New to Kendo UI for jQueryStart a free 30-day trial

Create Stacked and Grouped Series Bound to Remote Data in Charts

Environment

ProductProgress® Kendo UI® Chart for jQuery
Operating SystemWindows 10 64bit
Visual Studio VersionVisual Studio 2017
Preferred LanguageJavaScript

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