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

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.

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

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.