The Power of Using Charts with JavaScript and Storyline

One of the coolest things that Articulate Storyline allows is using JavaScript and Storyline together. This means you can leverage any of the many JavaScript solutions (plugins, libraries, or frameworks) right inside your Storyline course. One of the best applications of this concept is the use of charts. For this demo we are going to create a dynamic chart that uses Storyline data to populate and build the graphic. The goal for this post and the posts following is to show how to use an integrated JavaScript solution that is dynamically driven by Storyline variables. Cool, right?

Take a moment to adjust the variables in the input boxes below and then click “Chart.”

Using Charts with JavaScript and Storyline

Often there are multiple solutions that essentially do the same thing. When it comes to choosing a JavaScript solution there are a few questions that you want to answer in order to ensure you choose the correct one before wasting any time digging into code. Here is what you should be asking:

Does this solution do what is needed or could it potentially do what is needed with minor modifications?

Minor modifications are obviously a term relative to how much time you have available. In our case the answer is not much. This can usually be decided by looking at examples.

Does this solution have clear, straightforward, and well-organized documentation?

It’s obviously best to have a good idea about what your doing, so you can verify that the documentation does or does not give you (at the very least), a vague idea for how your going to do it.

Once we chose the JavaScript solution for charting we downloaded and viewed the examples. It’s always good to review both the documentation as well as some of the examples to get an idea of the structure so you make changes later. The next step is to target the areas within the code where the information is located in which we want to control. This information will become controlled with our Storyline variables. For this demo, we mainly want to control #1, The title of each bar chart item and #2, the quantity of each bar chart item. In a later post we will modify the code to be more dynamic by adding the ability to control the number of bars within the chart.

For now we are going to use a three bar item chart. In Storyline we created our variables that account for eight all together. One for the chart’s title, one for the y-Axis, and six since each bar item needs to have both a title and a quantity. Here is example code below:

————————————————————————————————————————————————-

barChartTitle = “Charlie’s Fruit”
barChartyAxis = “Number of Fruits”

barChartItem01Title = “Apples”
barChartItem01Value = 03

barChartItem02Title = “Bananas”
barChartItem02Value = 33

barChartItem03Title = “Grapes”
barChartItem03Value = 53

————————————————————————————————————————————————-

Storyline allows us to access its variables with a couple quick lines of JavaScript. So we are going to create local JavaScript variables within our WebObject and store the Storyline variables into them.

Now all we have to do is populate the chart with the data that we are passing into the chart. This specific charting plugin uses JSON to populate its data. We must properly format our data so the plugin will be able to build a chart from it. Here is the segment of JSON code which we modified to change the title, yAxis, and each bar’s title and value.

In a future article, we will add the ability to adjust the number of bars items in the chart which can be modified by simply adding or removing “barTitle##” and barQuantity variables. So stay tuned!

Note: This example we have used HighCharts simply because we enjoy how the charts animate. This specific example would require licensing depending on how you would use it (for more information on HighCharts pricing). Although, we chose HighCharts for this demo because of its features, we could have just as easily used open source JavaScript charting systems such as the jquery plugins like jqplot or flot.

16 Comments

Kawstov
on March 7, 2014 at 3:14 am

Dear Brother Frazee,

Kudos to such a brilliant work. It doubles the pleasure when an input is represented as a visual illustration.

I see that in index.html, you used – var player = window.parent.GetPlayer(); to pull the values from variables in Storyline.

Any method to put back some values, from index.html to Storyline? The reason I am asking is, I don’t know coding much, so Javascript coding is a bit dicy for me. But, if you give an example, I can understand it.

Regards,
Kawstov

Stacy Morse
on March 27, 2014 at 6:40 am

Hi Kawstov,

Try this:

player.SetVar(“YourStorylineVariableName”, yourJavascriptVariable);

Remember that whatever you name your Storyline variable in your code, you also have to create that variable in Storyline. In other words, this won’t create a new Storyline variable, it will just set a value for a variable that already exists.

Hope that helps!

Stacy

nof
on March 31, 2014 at 1:31 pm

Does this work in HTML5 export as well? I can only get it working in SWF version.

I will check with Brother Frazee and see if he has an update. Thanks for your comment.

Brother Frazee
on July 7, 2014 at 8:01 am

I figured out the solution. While running in HTML5 mode for some reason the HighChart Framework doesn’t like that the values are being passed as strings. The quick solution is to cast the values that are suppose to be numbers before storing them into a variable.
Example
var barChartItem01Value = Number( player.GetVar( “barChartItem01Value” ) );
Hope this helps! Sorry it took so long for me to look into this!

Joanna
on September 11, 2014 at 1:38 am

Hello Brothers,

thank you for great post and example.
In the last paragraph you say: “In the following post we will add the ability to adjust the number of bars items in chart…”
I can’t see any post like you mention…is it added yet?

Thanks, Joanna. That post has not been posted yet. We will keep you updated when the next one comes out. Thanks for the comment! Have an awesome day.

Lea
on September 30, 2014 at 4:43 am

Hi

Thanks so much for a great post!
We downloaded the code and it works fine, we just have 2 things we’d like to change, but not sure how:

1) How can we change the CSS applied to the chart? For example, we’d like to change the font-family, or colors.
2) We need to add a vertical line to the chart, because we’re using this for a financial chart and we need to show the maximum sum allowed. Is this possible?

Hi Lea, Thanks for being so patient. Try using http://www.jqplot.com/. It uses CSS code, but it will help you save a lot of time to do the things you need. So, the chart example we have is called High Charts and uses all JavaScript, and more complex without knowing JavaScript. Hope that helps. Have a good day!

Nick
on February 5, 2015 at 11:01 am

Thank you for the great post.

The technique works really well if I publish for the web, but if I publish for LMS, and upload to SCORM Cloud I get “Oops! Page not found!” instead of the chart, even though the web objects are clearly in the uploaded ZIP folder.