Using Text Entry Variables for Interactive Graphs

Hi Andrea,

If you want to create a bar chart natively in Storyline (without JavaScript or a web object), there are a couple of ways you might accomplish this.

1. The laborious method is to determine the maximum value the chart might have (whether it be 10, 24, 100 or whatever) and make a rectangle with the equivalent number of states, where the image of each state is incrementally taller. So, for example, if you wanted the maximum height of the bar to be 384 pixels and the maximum value is 24, you could make the first state of the rectangle 16 pixels tall, the second 32 pixels tall, and so on through 24 states. Whatever value the user enters, just display the corresponding state.

2. Ultimately, a quicker way might be to use a vertically oriented slider. Set your minimum and maximum values, make the track transparent, fill the thumb with a solid color and stretch it so it's the maximum height you want, and place a "mask" to hide the bottom of the thumb from the bottom of the chart to the bottom of the slide. Set the slider variable to the value the user enters and it will appear at that height on the chart. Be sure to place a 99% transparent shape (no border) over the slider so users can't drag it. You could even get fancy by using a couple triggers and layers to quickly and smoothly animate the bar into position.

Hope that gives you some ideas.

Attached is an example of Option 2 in my previous reply.

Stumbled upon this post and your reply, Steve.

Love your creative use of a slider, and thanks for the example!

Hi Steve, thanks so much for taking the time to answer my question. Your answers were so helpful :) I did initially think that Option 1 was probably the main option for an 'in storyline solution" and I agree that would be very laborious as you said. 

I hadn't thought of Option 2 that you suggested and I definitely agree, it seems like a much quicker, more elegant solution. Thanks so much for sharing the file so I can see how you set it up.

I did have one other question that I was hoping I could ask your thoughts on: if I was to explore the javascript/external options to set this up outside storyline, are there are resources or tutorials that you might be able to suggest that I could look into further to see how this can be done? 

I have read through some of the other discussion board posts on this topic and some members of the Articulate community mentioned using Google Sheets but I'm not sure if this would be the right approach for me as my company prefers not to host information in Google sheets.

Do you know if there are other options for web objects (outside of Google sheets) that I could look into or is there a javascript solution for this?

Thank you again for all your help and time.

Andrea

Hi Andrea,

One of the "resident experts" in the forums for drawing objects on the fly using JavaScript is the user "Math Notermans." Not directly what you're after but here's a link to one of his posts:

https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360 

Cluelabs has a chart widget for Storyline (I haven't tried it but it looks promising for your application):

https://cluelabs.com/single-chart-elearning-widget 

There are many chart libraries available on the internet that you could probably embed via a web object (but then you'll need some JavaScript to pass variable values between Storyline and the web object...search the forums for "javascript" and "web object").

Hope that gives you some ideas! 

Hi Steve,

Thanks so much for the ideas. I will definitely check out Math's posts and the cluelabs widget.

That's a good point about the different chart libraries available. I found a few options in my preliminary research but I need to do further research into them to validate from a data security perspective. I am always looking to further grow my javascript skills so this will be a fun challenge :)

Thanks again. I really appreciate all the resources.

Andrea

I often need to show results of games and e-learning projects in graphs and charts. Although there are quite a few great solutions with or without Javascript, one of the easiest to use is ( in my opinion ) Chartist.js
https://gionkunz.github.io/chartist-js/

As seen on the website you can do quite a lot with it.

The steps you need to do to get it working in Storyline are as follows.

Step 1:
Make a folder on your HD and add the chartist javascript library there.
And add an empty index.html in that folder....
As seen in the 2 images below...add a folder with a specific name and add the chartist files into it you want to use. As Chartist has many options...you can change that.



And in the folder i have these files...



Step 2:
Add the folder with index as your Webobject on a separate slide.

Step 3:
You need some Javascript code to load the Chartist js.
All of that is on your starting slide.

This code checks the WebObjectfolder and loads any Javascripts libraries you want / need. In this case only 2. The chartist.min.js and the chartist.min.css.
If you add more libraries like jQuery or whatever, you need to update 2 values in this script. The amounfOfLibs, obvious 2 in this case. And the webObjectURL. Any time you change something in your webObjects Storyline grabs that folder and creates a custom one with a complex name. So when changing something you also need to publish once...get that folders name...and replace it in the script.


As seen in the image above...i publish as Scorm ( can be Web too ) and check the Webobjects folder and get the name of the folder and replace it in my start script.

Step 4:
Now you can use Chartist code to create your charts. On the chartist site there are quite some examples to get started. https://gionkunz.github.io/chartist-js/examples.html
I used the simple piechart to show it.

You need to take into account that the Chartist library first needs to be loaded before you can call it. So either you need a button to activate the graph... ( Chartist is small so it loads quick ) or you need to set a variable that acts when Chartist is loaded...Using the variable isJavascriptsLoaded for that...when its True...we can set our piegraph.

Do remember you need to select the element in Storyline with JS to set it...
I mostly use the 'accessibility name' for that...

And now you can use variables or whatever to set the charts values...

There is some small issue i cannot easy figure out. That is the position of the Chartist chart on the Storyline screen. It always seems off to me, and i dont know how to fix that without manually moving it. Well anyways this is for me the simplest solution for graphs in Storyline.

Here it the sample on Review..
https://360.articulate.com/review/content/480d10b6-ddb5-4ca0-abbc-41f56fb44314/review

And here is the Storyline file attached...
 
Kind regards,
Math

Hi Math,

Thank you so so much for replying to my post and your detailed breakdown on how to use Chartist.js. This is a really great solution and exactly what I'm looking for!

I really like the variety of options for the charts and it seems relatively simple to set up. Thanks for sharing your Storyline file. It was really helpful to see the javascript you used in the example.

I am really excited to dive in with it and experiment with it some more. That's good to know about the issue with getting the charts positioned on the screen.

Thank you for all your help,

Andrea

Thanks Steve and Math. This looks very promising.