CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-asp.net-mvckendo-ui-mvc
dtksmsl
dtksmsl

Reputation: 239

Kendo UI stacked bar chart with remote data

I am trying to bind the kendo chart to the remote json data.

I have a sample example that I created.

I dont know why the chart is incorrectly displayed and the ordering of the axis is messed up in this example.

var data = [   
{"Name":1,"Year":2011,"Expense":200.00},
{"Name":1,"Year":2012,"Expense":274.91},
{"Name":1,"Year":2013,"Expense":0},
{"Name":1,"Year":2014,"Expense":0},

{"Name":5,"Year":2011,"Expense":100.00},
{"Name":5,"Year":2012,"Expense":315.84},
{"Name":5,"Year":2013,"Expense":0},
{"Name":5,"Year":2014,"Expense":0},

{"Name":6,"Year":2011,"Expense":100.00},
{"Name":6,"Year":2012,"Expense":0},
{"Name":6,"Year":2013,"Expense":200},
{"Name":6,"Year":2014,"Expense":50},    
];

$(document).ready(function() {
$("#chart").kendoChart({
    theme: "silver",
    title: {
        text: "Total records processed"
    },
    legend: {
        position: "bottom"
    },
    dataSource: {
        data: data,
        group: {
            field: "Name"
        }
    },
    transitions: false,
    series: [{
        type: "column",
        stack: "true",
        field: "Expense"
    }],
    categoryAxis: {
        field: "Year"                                
    },
            tooltip: {
      visible: true,
      template: "#= value #"
    }
});
});

http://jsfiddle.net/johnok/F2TQ8/92/

Upvotes: 0

Views: 1646

Answers (1)

ezanker
ezanker

Reputation: 24738

You can add a sort property to the dataSource:

    dataSource: {
        data: data,
        group: {
            field: "Name"
        },
        sort: { field: "Year", dir: "asc" }
    },

Updated FIDDLE

Upvotes: 1

Related Questions