App > Documentation > Components > Charts

Flot Charts

Built with Flot JS. Required libs:

<script src="node_modules/flot/jquery.flot.js"></script>

Example:

let plot = $.plot(placeholder, data, options);
Interactive Sparklines

Built with jqeruy.sparkline.

<script src="node_modules/jquery.sparkline/index.js"></script>

Example:

let myValues = [10,8,5,7,4,4,1];

$(.dynamicsparkline')sparkline(myvalues);
Rickshaw

Realtime chart is based on Rickshaw realtime example.

<script src="node_modules/rickshaw.min.js"></script>

Example:

let data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];

let graph new Rickshaw.Graph( { placeholder, options, series: [data] });
Sparkline Pie Chart

Same as interactive sparklines based on jqeruy.sparkline.

let myValues = [10,8,5,7,4,4,1];

$(.dynamicsparkline')sparkline(myvalues, {type: 'pie'});
Morris Charts

Built with Morris JS.

<script src="node_modules/raphael/raphael-min.js"></script>
<script src="node_modules/morris.js/morris.min.js"></script>

Example:

let data = [ { year: '2008', value: 20 }, { year: '2009', value: 10 }, { year: '2010', value: 10 }, { year: '2011', value: 8 } ];

let graph new Morris.Line( { element, data, labels });
Easy Pie Charts

Built with Easy Pie Chart.

<script src="node_modules/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>

$('.chart')easyPieChart({ options });
Flot Bars

Same as Flot Charts built with Flot. A bit different dependencies:

<script src="node_modules/flot.animator/jquery.flot.animator.min.js"></script>
<script src="node_modules/flot/jquery.flot.js"></script>
<script src="node_modules/flot-orderBars/js/jquery.flot.orderBars.js"></script>
<script src="node_modules/flot/jquery.flot.selection.js"></script>
<script src="node_modules/flot/jquery.flot.time.js"></script>

let plot = $.plot(placeholder, data, options);