New to Kendo UI for jQuery? Download free 30-day trial

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.

    <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

In this article