Created
November 28, 2014 20:33
-
-
Save ArthurZ/b133179a28814321970d to your computer and use it in GitHub Desktop.
Getting Started With Chartist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"> | |
| <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"> | |
| </script> | |
| <script> | |
| var data = | |
| { | |
| // A labels array that can contain any sort of values | |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], | |
| // Our series array that contains series objects or in this case series data arrays | |
| series: [[5, 2, 4, 2, 0]] | |
| }; | |
| // Create a new line chart object where as first parameter we pass in a selector | |
| // that is resolving to our chart container element. The Second parameter | |
| // is the actual data object. | |
| new Chartist.Line('.ct-chart', data); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="ct-chart ct-perfect-fourth">Testing Chartist</div> | |
| </body> | |
| </html> |
I guess when you run this locally on your machine you can't use URIs without the scheme component (starting with double slash). Usually the browser uses the scheme the site is in (http or https) but when executed locally with file:// i guess some browsers will fail to load where others fallback to http. Just replace the double shash with https://.
You also need to watch out for your script being executed before the dom parser discovered your element with the ct-chart class. To fix this just include your scripts right before the body close tag.
The combination of these two hints has fixed my issue.
Thank you gionkunz!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It does not work. Getting error: ReferenceError: Chartist is not defined