Fork me on GitHub

You are here

Examples

Example 1: Line chart, filled and stacked

$('#chart').chart({ template : 'line_basic_3', tooltips : { serie1 : [ 'a', 'b', 'c', 'd' ], serie2 : [ 'a', 'b', 'c', 'd' ] }, values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4]}, labels : [ 'first', 'second', 'third', 'fourth' ], defaultSeries : { fill: true, stacked : true }, axis : { l : { title : 'Average height' } } });

Example 2: Line chart, fill with some animations

Tip: use the "re-generate" button to create the chart again and test the starting animation.

$('#chart').chart({ template : 'line_basic_2', tooltips : { serie1 : [ 'a', 'b', 'c', 'd' ], serie2 : [ 'a', 'b', 'c', 'd' ] }, values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4]}, defaultSeries : { fill: true, stacked : false, highlight : { scale : 2 }, startAnimation : { active : true, type : 'grow', easing : 'bounce' } } });

Example 3: Mixed lines

$('#chart').chart({ template : 'line_basic_4', tooltips : [ 'Single tooltip A', 'Single tooltip B', 'Single tooltip C', 'Single tooltip D' ], values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4], serie3 : [1, 2, 3, 4]}, defaultSeries : { fill: true, stacked : true }, series : { serie3 : { fill: false, stacked: false } } });

Example 4: Simple bars

$('#chart').chart({ template : 'line_basic_5', tooltips : { serie1 : [ 'a', 'b', 'c', 'd' ], serie2 : [ 'a', 'b', 'c', 'd' ] }, values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4] }, defaultSeries : { type: 'bar' }, barMargins: 10 });

Example 5: Mixed bars & lines with 2 different axis

$('#chart').chart({ template : 'line_basic_6', tooltips : { serie1 : [ 'a', 'b', 'c', 'd' ], serie2 : [ 'a', 'b', 'c', 'd' ], serie3 : [ 'a', 'b', 'c', 'd' ] }, values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4], serie3 : [1, 2, 3, 4] }, labels : [ 'first', 'second', 'third', 'fourth' ], defaultSeries : { type: 'bar', stacked: true }, series : { serie3 : { type : 'line', stacked : false, axis : 'r' } }, axis : { r : { max : 100, suffix : '%' } } });

Example 6: Simple pie chart

$('#chart').chart({ template : 'pie_basic_1', values : { serie1 : [1, 2, 3, 4] }, labels : ['a', 'b', 'c', 'd'], legend : ['a', 'b', 'c', 'd'], tooltips : { serie1 : ['a', 'b', 'c', 'd'] }, defaultSeries : { values : [ { plotProps : { fill : 'red'}}, { plotProps : { fill : 'blue' }}, { plotProps : { fill : 'green'}}, { plotProps : { fill : 'gray'}} ] } });

Example 7: Donut chart

$('#chart').chart({ template : 'pie_basic_2', values : { serie1 : [1, 2, 3, 4] }, labels : ['a', 'b', 'c', 'd'], tooltips : { serie1 : ['a', 'b', 'c', 'd'] }, defaultSeries : { r: -.5, values : [ { plotProps : { fill : 'red'}}, { plotProps : { fill : 'blue' }}, { plotProps : { fill : 'green'}}, { plotProps : { fill : 'gray'}} ] } });

Example 8: Multiple series pie chart

$('#chart').chart({ template : 'pie_basic_2', values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4] }, labels : ['a', 'b', 'c', 'd'], tooltips : { serie1 : ['a', 'b', 'c', 'd'], serie2 : ['a', 'b', 'c', 'd'] }, defaultSeries : { values : [ { plotProps : { fill : 'red'}}, { plotProps : { fill : 'blue' }}, { plotProps : { fill : 'green'}}, { plotProps : { fill : 'gray'}} ] } });