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 


Pin It on Pinterest