CHART

by tomwilliams

HTML

<script src="https://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
Hello World

<div id="chart"></div>

JavaScript

$(document).ready(function() {
    GetVehicleAttributes();
});

function GetVehicleAttributes() {

var JsonAttributes = [{"GroupingName":null,"OrderBy":1,"ResultDate":"\/Date(-62135596800000+0000
)\/","ResultName":"Due on Site","ResultValue":"1","ResultValueNumeric":0,"ResultValuePercentage":0},
{"GroupingName":null,"OrderBy":3,"ResultDate":"\/Date(-62135596800000+0000)\/","ResultName":"AW-Part
 Pricing","ResultValue":"1","ResultValueNumeric":0,"ResultValuePercentage":0},{"GroupingName":null,"OrderBy"
:4,"ResultDate":"\/Date(-62135596800000+0000)\/","ResultName":"AW Authorisation","ResultValue":"6","ResultValueNumeric"
:0,"ResultValuePercentage":0},{"GroupingName":null,"OrderBy":5,"ResultDate":"\/Date(-62135596800000+0000
)\/","ResultName":"In Query","ResultValue":"2","ResultValueNumeric":0,"ResultValuePercentage":0},{"GroupingName"
:null,"OrderBy":6,"ResultDate":"\/Date(-62135596800000+0000)\/","ResultName":"In Work","ResultValue"
:"8","ResultValueNumeric":0,"ResultValuePercentage":0},{"GroupingName":null,"OrderBy":7,"ResultDate"
:"\/Date(-62135596800000+0000)\/","ResultName":"PDI Complete","ResultValue":"2","ResultValueNumeric"
:0,"ResultValuePercentage":0},{"GroupingName":null,"OrderBy":8,"ResultDate":"\/Date(-62135596800000+0000
)\/","ResultName":"Available","ResultValue":"16","ResultValueNumeric":0,"ResultValuePercentage":0},{"GroupingName"
:null,"OrderBy":10,"ResultDate":"\/Date(-62135596800000+0000)\/","ResultName":"Despatched","ResultValue"
:"17","ResultValueNumeric":0,"ResultValuePercentage":0}];

    var ctkGridData = new kendo.data.DataSource({
        data: JsonAttributes,
         schema: {
                    modal: {
                        fields: {
                            Graphvalue: { type: "Graphvalue" },
                            GraphOrder: { type: "number" },
                            TotalAtEvent: { type: "number" },
                            CurrentEvent: { type: "string" }
                        }
                    }
        ...