Charts

Requirements

Cyclops uses Chartist.js for displaying simple, responsive charts. To display a chart, include the Chartist script file.

<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

  

Then use either the cyclops jQuery function or the knockout binding to create your chart. The knockout binding uses the jQuery function under the covers and thus shares all the same options, chart API documentation.

    
// jQuery
$('.myChart').chart({type: 'Line', data: data, chartOptions: {}})
    
    
<!-- knockout binding -->
<div class="myChart" data-bind="chart:{ type: 'Line', data: data, chartOptions: {} }"></div>
    
  

Interactive

In addition to displaying data in a chart, the loading, failed, and empty states should be accounted for. The interactive example below demonstrates an artifically long loading time, with options to render a failed or empty template.

Line Chart

		
var lineData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  series: [
  {
    name: "Widget",
    value: [75, 76, 77, 78, 81, 79, 76]
  },
  {...}
  ]
};

ko.applyBindings({ data: lineData }, $("#lineChart")[0]);
		
		
<div id="lineChart" data-bind="chart:{ type: 'Line', data: data }"></div>
		

	

Bar Chart

		
var barData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  series: [{
    name: "My First dataset",
    value: [65, 59, 80, 81, 56, 55, 40]
  },
  {
    name: "My Second dataset",
    value: [28, 48, 40, 19, 86, 27, 90]
  }]
};

ko.applyBindings({ data: barData }, $("#barChart")[0]);
		
		
<div id="lineChart" data-bind="chart:{ type: 'Bar', data: data }"></div>
		

	

Pie, Donut & Guage Chart

		
var pieData = {
  series: [
    {
      value: 300,
      name: "set 1"
    },
    {...}
  ]
}

ko.applyBindings({ data: pieData }, $("#pieChart")[0]);
ko.applyBindings({ data: pieData }, $("#donutChart")[0]);
ko.applyBindings({ data: pieData }, $("#guageChart")[0]);
		
		
<div id="pieChart" data-bind="chart:{ type: 'Pie', data: data }"></div>
<div id="donutChart" data-bind="chart:{ type: 'Donut', data: data }"></div>
<div id="guageChart" data-bind="chart:{ type: 'Guage', data: data }"></div>
		

	

Aspect Ratio

In order for a chart element to scale properly and be responsive, apply an aspect ratio (e.g. 4:3, 3:2, 16:9 etc.) rather than specifying a fixed width and height. Specify the ratio directly on the container without the need to calculate any fixed dimensions. In order to create a chart that is using the aspect ratio of a golden section you can add the .ct-golden-section to the container where chart is initialized.

Color Palette

Chart series default color palette is made up of 10 unique colors. If your chart happens to contain more than 10 series, the color series will loop (e.g. the 1st and 11th series will be the same color).