Set Different Chart Series Types According to the DataItem Property
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I dynamically set the Chart series type after the data was bound and depending on a specific property of the points?
Solution
Use the grouping capabilities of the Chart while setting the series type on the dataBound event.
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
var data = [{
value: 1,
name: 'Bid',
category: new Date(2018, 0, 1)
},
{
value: 2,
name: 'Offer',
category: new Date(2018, 0, 1)
},
{
value: 3,
name: 'Volume',
category: new Date(2018, 0, 1)
},
{
value: 4,
name: 'Bid',
category: new Date(2018, 1, 1)
},
{
value: 5,
name: 'Offer',
category: new Date(2018, 1, 1)
},
{
value: 6,
name: 'Volume',
category: new Date(2018, 1, 1)
}
];
$("#chart").kendoChart({
dataSource: {
data: data,
group: {
field: "name"
}
},
series: [{
field: "value",
categoryField: "category"
}],
valueAxis: [{}, {
name: 'columnAxis'
}],
categoryAxis: {
axisCrossingValue: [0, Number.MAX_VALUE]
},
dataBound: function() {
var series = this.options.series;
for (var idx = 0; idx < series.length; idx++) {
var options = series[idx];
if (options.name === "Volume") {
options.type = 'column';
options.axis = 'columnAxis';
} else {
options.type = 'line';
}
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>