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:

1. Assign an unique Group ID value to each Gender / Age Group combination.
2. Set the stack name for each series to match the Gender field in the dataBound event.

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.

html

    <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>

See Also

• Chart JavaScript API Reference
• Drawing API
• Aggregate Data in Pie Charts
• Draw on Scatter Plots Surface
• Expand Clickable Area of Points