Kendo Stacked Column Chart grouping error

Question

I have data like this

And here is my Json data format

[{  "Value1":"B95 ",
"Value2":1.2600,
"ChartType":"column",
"ChartDescription":"Fuel Sales Quantity",
"Value3":"2015-07-27",
"SeriesField":"Value2",
"CategoryField":"Value3",
"IsGroup":true,
"IsStacked":true,
"GroupValue":"Value1",
"SortValue":"Value3"},

{"Value1":"B93",
"Value2":8.2100,
"ChartType":"column",
"ChartDescription":"Fuel Sales Quantity",
"Value3":"2015-07-22",
"SeriesField":"Value2",
"CategoryField":"Value3",
"IsGroup":true,
"IsStacked":true,
"GroupValue":"Value1",
"SortValue":"Value3"}]

I just want to create a grouped stacked charts per day with kendo column charts but when i draw this chart i have 6 unique day but chart show just 4 day The chart example here...

Data mixed or shifting each other...

Here is my Javascript code

function createChart(number) {
$("#chart-" + number).kendoChart({
    dataSource: myData,
    title: {
        text: title
    },
    legend: {
        visible: true,
        position: "bottom",
        labels: {
            template: '#: chartType == "pie" ? dataItem.Value1 : chartType == "donut" ? dataItem.Value1 : text #'
        }
    },
    seriesDefaults: {
        type: chartType,
        stack: stackValue
    },
    series: series,
    valueAxis: {
        labels: {
            format: "{0}"
        }
    },
    categoryAxis: categories,
    tooltip: {
        visible: true,
        format: "{0}",
        template: "#= dataItem.Value1 #: #= kendo.format('{0:N}',value)  #"
    }
});

}

$(document).ready(function () {
    $.ajax({
        url: '../Dashboards/QuerySelected',
        data: { id: number, from: fromdate, to: todate, fleet: fleetident },
        success: function (data) {
            if (data.length != 0) {
                    if (data[0].IsGroup) {
                        myData = {
                            data: data,
                            group:{
                                field: data[0].GroupValue
                            },
                            sort: {
                                field: data[0].SortValue,
                                dir: "asc"
                            }
                        }

                    }
                    else {
                        myData = data
                    }

                    series = [{
                        field: data[0].SeriesField
                    }];

                    categories = {
                        field: data[0].CategoryField
                    }
                    stackValue = data[0].IsStacked;
                    chartType = data[0].ChartType;
                    title = data[0].ChartDescription;

                    createChart(number);
            }
        }
    });
}

Is it possible to my erroe on grouping or sorting on chart ?? How can i solve this problem Thanx Saul

Answer 1

You could transform the data the data in javascript to look like this:

[
    {"Category": "2015-08-10", "B93": 1.2500, "DIESEL": 1.6, "B95": 0 },
    {"Category": "2015-08-06", "B93": 0, "DIESEL": 1.68, "B95": 0 }
]

One way to do it is:

  var ToolTipTemplate = "#= dataItem.Value1 #: #= kendo.format('{0:N}',value)  #";
  if (data.length != 0) {
    if (data[0].IsGroup) {
      var uniqueGroups = [];
      var transformedData = [];
      series = [];

      myData = new kendo.data.DataSource({
            data: data,
            group: {
                field: data[0].GroupValue
            },
      });
      myData.fetch(function () {
          var v = this.view();
          for (var i=0; i<v.length; i++){
            uniqueGroups.push(v[i].value)
            series.push({
              name: v[i].value,
              field: v[i].value,
              categoryField: "Category",
            });
          }                
       });

      myData = new kendo.data.DataSource({
        data: data,
        group: {
          field: data[0].SortValue
        },
        sort: {
          field: data[0].SortValue,
          dir: "asc"
        },
      });

      myData.fetch(function () {
        var v = this.view();
        for (var i=0; i<v.length; i++){
          var dataPoint = {"Category": v[i].value};
          for (var j=0; j<uniqueGroups.length; j++){
            dataPoint[uniqueGroups[j]] = 0;
          }
          for (var k=0; k<v[i].items.length; k++){
            dataPoint[v[i].items[k][v[i].items[k].GroupValue]] = v[i].items[k][v[i].items[k].SeriesField];
          }
          transformedData.push(dataPoint);            
        } 
      });

      console.log(transformedData);
      myData = transformedData;

      ToolTipTemplate = "#= series.name #: #= kendo.format('{0:N}',value)  #";          

    }
    else {
      myData = data
      series = [{
        field: data[0].SeriesField
      }];

      categories = {
        field: data[0].CategoryField
      }

    }

DEMO