The Power of Using Charts with JavaScript and Storyline

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.”

Here are the source files we used.

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.

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

var player = window.parent.GetPlayer();

var barChartTitle = player.GetVar(“barChartTitle”);
var barChartyAxis = player.GetVar(“barChartyAxis”);

var barChartItem01Title = player.GetVar(“barChartItem01Title”);
var barChartItem01Value = player.GetVar(“barChartItem01Value”);

var barChartItem02Title = player.GetVar(“barChartItem02Title”);
var barChartItem02Value = player.GetVar(“barChartItem02Value”);

var barChartItem03Title = player.GetVar(“barChartItem03Title”);
var barChartItem03Value = player.GetVar(“barChartItem03Value”);

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

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.

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

title: {
text: barChartTitle
},
yAxis: {
title: {
text: barChartyAxis
}
},
series: [{
name: 'Total',
colorByPoint: true,
data: [{
name: barChartItem01Title,
y: barChartItem01Value
},{
name: barChartItem02Title,
y: barChartItem02Value
},{
name: barChartItem03Title,
y: barChartItem03Value
}]
}],

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

Screen Shot 2014-02-11 at 6.58.02 PM

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 

 

14 Comments

  1. Dear Brother Frazee,

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

    I created a similar idea, but with help of flash and Storyline.

    I have a query.

    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

  2. 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

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

    thanks,

    N.

  4. Stacy! Thank you for answering Kawstov your exactly right.

    nof, when I get a chance I will look into that. I can’t think of any reason why it wouldn’t work via HTML5 export so I’m hoping it’s something simple.

  5. Hello Brother Frazee,

    any update on HTML5?

    thanks
    n.

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

  7. 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!

  8. 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
    Jo

  9. 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.

  10. 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?

    Thank you!
    Lea

  11. Hi Lea, great questions. Let me get a developer to look at more into it. Until then, have you seen our Storyline Templates? Talk to you soon.

  12. Hi Brother Shawn,

    Thanks for looking into it. Waiting patiently for your answer :)

    Lea

  13. Thanks for your patience. I will let you know once my developer is available. Thanks.

  14. 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!

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>