Include the following in your headcode
<link rel="stylesheet" href="/_resources/css/chartist.css" /> <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
Using html view, add this code where you would like the chart to appear on your page.
<div class="ct-chart ct-perfect-fourth"></div>
Because of the nature of responsive design it's important to understand that charts need to be able to scale and adapt to the media. In order for an element to scale, you need to rely on a certain aspect ratios (like 4:3, 3:2, 16:9 etc.) rather than specifying a fixed width and height. Refer to the table below for the aspect ratios that are available.
| Container class | Ratio |
|---|---|
| .ct-square | 1 |
| .ct-minor-second | 15:16 |
| .ct-major-second | 8:9 |
| .ct-minor-third | 5:6 |
| .ct-major-third | 4:5 |
| .ct-perfect-fourth | 3:4 |
| .ct-perfect-fifth | 2:3 |
| .ct-minor-sixth | 5:8 |
| .ct-golden-section | 1:1.618 |
| .ct-major-sixth | 3:5 |
| .ct-minor-seventh | 9:16 |
| .ct-major-seventh | 8:15 |
| .ct-octave | 1:2 |
| .ct-major-tenth | 2:5 |
| .ct-major-eleventh | 3:8 |
| .ct-major-twelfth | 1:3 |
| .ct-double-octave | 1:4 |
Add this script to the footcode of your page.
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);