Create Stacked and Grouped Series Bound to Remote Data in Charts
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I create Stacked and Grouped Chart series that are grouped to remote data?
Solution
To implement this scenario:
- Assign an unique Group ID value to each Gender / Age Group combination.
- Set the stack name for each series to match the Gender field in the
dataBoundevent.
To see the same scenario for inline data, refer to the Bar Charts / Stacked and grouped bars demo.
The following example demonstrates how to implement the steps previously described.
<div id="chart"></div>
<script>
var dataUrl = "https://www.mocky.io/v2/5bfc002c3100006f0039bbff";
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
url: dataUrl,
}
},
group: {
field: "groupId",
dir: "asc"
}
},
series: [{
type: "column",
field: "value",
categoryField: "year"
}],
seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
dataBound: function(e) {
var series = e.sender.options.series;
for (var i = 0; i < series.length; i++) {
series[i].stack = series[i].data[0].gender;
}
}
});
</script>