Chartist.js Sample: A Line Chart

The following Line Chart, drawn by Chartist.js library:

Using our plugin, named Blazing Charts, I added the following shortcode to this post:

(left-bracket)BlazingChart charttype="chartist" source="chartist-chart-1"(right bracket)

The first parameter specifies which charting library is used. The second parameter is the slug of a Custom Post Type, named Chart Snippets, introduced by that plugin.

The source of the script for the drawing is added as plain text to a Chart Snippet. The content of the chart snippet for the above chart is as following.
For Right-To-Left languages, I would suggest to add style=”direction:ltr;” to the container div.

<div class="chart" style="direction:ltr;">
<div class="ct-chart" style="width:100%; height:400px;"></div>
</div>

<script type="text/javascript">
window.onload = function () {
  new Chartist.Line('.ct-chart', {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    series: [
      [12, 9, 7, 8, 5],
      [2, 1, 3.5, 7, 3],
      [1, 3, 4, 5, 6]
    ]
  }, {
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  });
}
</script>