[SOLVED] Multiple grouping in kendo ui stacked bar chart

Multiple grouping in kendo ui stacked bar chart

I want to create a 100% stacked bar chart that will show status value duration ratio grouped by device and status type. Something like http://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked100-bar.

I managed to make a partial solution based on this answer but it has a big problem - I cannot make it 100% stacked bar if I use stack property of series. Does somebody know what the problem is?

The other problem is that I want to do the same thing but with the data binding. Is it possible to do that? I don't know how to have multiple series with the same field data binding?

The code:

    <!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Stacked and grouped Column Chart</title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.bootstrap.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>

      var monthly =  [
          {
            "statusType": "Status1",
            "statusValue": "status value 1",
            "device": "D2",
            "duration": 7
          },
          {
            "statusType": "Status1",
            "statusValue": "status value 2",
            "device": "D2",
            "duration": 13
          },
          {
            "statusType": "Status1",
            "statusValue": "status value 1",
            "device": "D1",
            "duration": 16
          },
          {
            "statusType": "Status1",
            "statusValue": "status value 2",
            "device": "D1",
            "duration": 4
          },
          {
            "statusType": "Status2",
            "statusValue": "status value 3",
            "device": "D1",
            "duration": 11
          },

          {
            "statusType": "Status2",
            "statusValue": "status value 4",
            "device": "D2",
            "duration": 9
          },
                  {
            "statusType": "Status2",
            "statusValue": "status value 3",
            "device": "D2",
            "duration": 16
          },

          {
            "statusType": "Status2",
            "statusValue": "status value 4",
            "device": "D1",
            "duration": 14
          },

      ];

      theseries = [];
      thesectors = [];

      var dataDS = new kendo.data.DataSource({
                        data: monthly,
            group: [              
              {field: "statusType"},
              {field: "statusValue"},
            ],
            sort: { field: "device", dir: "asc" }
        });


      //convert the data
      dataDS.fetch(function(){
        var view = dataDS.view();

        for (i = 0; i < view.length; i++) {            
          var statusType = view[i];
          for (p = 0; p < statusType.items.length; p++) { 
              var statusValue = statusType.items[p];

              var series = {};
              series.name = statusValue.value;
              series.stack = statusType.value;
              series.data = [];


              for (j=0; j<statusValue.items.length; j++){
                var data = statusValue.items[j];
                if (i==0 && p==0) {
                   thesectors.push(data.device);
                }
                series.field='duration';
                series.data.push(data)

              }
              theseries.push(series);
          }

        }
      });

        function createChart() {

          $("#chart").kendoChart({
               theme: "Fiori",
               legend:{
                    visible: true,
                    position:"bottom"
               },
               seriesDefaults: {
                    type: "bar",
                    stack: {
                        type: "100%"
                    }
                },series: theseries,
            categoryAxis: {
                   categories: thesectors,
                },


          });       

        }

        $(document).ready(createChart);
    </script>
</div>


</body>
</html>

Solution

You can get the 100% stack by setting stack.group and stack.type on each series:

  //convert the data
  dataDS.fetch(function(){
    var view = dataDS.view();

    for (i = 0; i < view.length; i++) {            
      var statusType = view[i];
      for (p = 0; p < statusType.items.length; p++) { 
          var statusValue = statusType.items[p];

          var series = {};
          series.name = statusType.value +":"+ statusValue.value;
          series.stack = {};
          series.stack.group = statusType.value;
          series.stack.type = "100%";
          series.data = [];


          for (j=0; j<statusValue.items.length; j++){
            var data = statusValue.items[j];
            if (i==0 && p==0) {
               thesectors.push(data.device);
            }
            series.field='duration';
            series.data.push(data)

          }
          theseries.push(series);
      }

    }
  });

Updated DEMO