[Tutorial] Dynamic interactive charts

[jared]

I wanted to post this example for those who are making quiz apps or study apps. The ability to see your progress visually is uber important. This is why we have charts in the first place.
seeItLive
incorporating charts in the past has been difficult. Here is an easy example you can fork or use yourself to incorporate a correct/incorrect chart into your app. This is based on the standard celebration chart that is used in the world of Precision Teaching and Applied Behavior Analysis. This allows us to look at proportionate changes in the rates of our behavior.

Any easy way to think of this is: If i never get an answer to the test correct, but today I get 1, thats a pretty big deal. a 100% increase IMPRESSIVE. But what if i go from 99 to 100. that’s nothing. a 1% increase. this chart allows us to see differences in such a manner.

these are the only blocks you would need. first i load my data into lists, then i send it to the web viewer and let javaScript and C3.JS do the rest.

This is the only code. in your webviwer, call to the html file below

https://github.com/jaredgib/jaredgib.github.io/blob/master/safmedsChart.html

1

2

3

4

5

6

7

8

[tatiang]

Can you post a screenshot or video of the effect?

[jared]

Here you go!
Keep in mind this was only a proof of concept app and data set. The data look wonky but the idea works.

Chart.js would be a better charting library imo. I’m trying to understand their documentation. It’s easier to make a prettier chart with chart.js.

And a workable chart example here

https://jsfiddle.net/jaredgibb/95kL6qbh/27/

[Patrick_Elisha]

Thanks for this post. But I’m not able to open the links. Error 404.
Is anything wrong? Please confirm.

[jared]

try this one.

not sure why but that link broke

SemiLogChartSafMeds - JSFiddle - Code Playground

the github file changed. here’s my repository, check it out. im adding more charts today.

https://github.com/jaredgib/jaredgib.github.io

[Patrick_Elisha]

Great!
Thank you.

[jared]

Note: those were all made Using C3JS charting libraries.

I will be posting an example using chartJS later today. The process is nearly the same. I have a working example but want to further config to show why I’m using it over C3. It is specifically due to the logarithmic charts and the Skewed scaling that occurs on the y-Axis.

[teamzaddysn9m]

Hi, may I ask if I must download anything before coding on Visual Studios Code?

[jared]

Nope! Should be all you need!