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'}}
]
}
});