Using Text Entry Variables for Interactive Graphs

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