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.

class name ratio
.ct-square1
.ct-minor-second15:16
.ct-major-second8:9
.ct-minor-third5:6
.ct-major-third4:5
.ct-perfect-fourth3:4
.ct-perfect-fifth2:3
.ct-minor-sixth5:8
.ct-golden-section1:1.618
.ct-major-sixth3:5
.ct-minor-seventh9:16
.ct-major-seventh8:15
.ct-octave1:2
.ct-major-tenth2:5
.ct-major-eleventh3:8
.ct-major-twelfth1:3
.ct-double-octave1:4

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).

.ct-series-a = #8cc63f
rgb(140,198,63)
.ct-series-b = #58776a
rgb(88,119,106)
.ct-series-c = #f5a934
rgb(245,169,52)
.ct-series-d = #d44747
rgb(212,71,71)
.ct-series-e = #59b082
rgb(89,176,130)
.ct-series-f = #597c97
rgb(89,124,151)
.ct-series-g = #404c43
rgb(64, 76, 67)
.ct-series-h = #5e9354
rgb(94,147,84)
.ct-series-i = #f1ee6b
rgb(241,238,107)
.ct-series-j = #b8e288
rgb(184,226,136)
.ct-series-k = #5e9354
rgb(94,147,84)
.ct-series-l = #58776a
rgb(88,119,106)
.ct-series-m = #b8e288
rgb(184,226,136)
.ct-series-n = #8cc63f
rgb(140,198,63)
anchor link to top of page