Struggling to find a simple solutions
I need to know how to bind it and what the format of the data should be when reading data directly from the server. I have tried everything but I can't get the data correct.
My needs
I need the DISTINCT names down the left side.
I need columns stacked horizontally by color
I need an aggregate total running horizontally accross from left to right.
The data I have on the server.
[{ name : "jaime", color: "green", value : 23 },
{ name : "jaime", color: "yellow", value : 34 },
{ name : "jaime", color: "red", value : 23 },
{ name : "rob", color: "green", value : 23 },
{ name : "rob", color: "yellow", value : 11},
{ name : "rob", color: "red", value : 64 }]
Here is my data call
I need to know how to bind the chart based on the data and datasource read syntax. This is the source code from the stacked chart example demo page which is closest to my needs.
I need to know how to bind it and what the format of the data should be when reading data directly from the server. I have tried everything but I can't get the data correct.
My needs
I need the DISTINCT names down the left side.
I need columns stacked horizontally by color
I need an aggregate total running horizontally accross from left to right.
The data I have on the server.
[{ name : "jaime", color: "green", value : 23 },
{ name : "jaime", color: "yellow", value : 34 },
{ name : "jaime", color: "red", value : 23 },
{ name : "rob", color: "green", value : 23 },
{ name : "rob", color: "yellow", value : 11},
{ name : "rob", color: "red", value : 64 }]
Here is my data call
transport: {
read: {
url: "/Inspection/SupervisorChartData/",
dataType: "json"
}
},
<
div
id
=
"example"
class
=
"k-content"
>
<
div
class
=
"chart-wrapper"
>
<
div
id
=
"chart"
></
div
>
</
div
>
<
script
>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Olympic Medals won by USA"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "Gold Medals",
data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
color: "#f3ac32"
}, {
name: "Silver Medals",
data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
color: "#b8b8b8"
}, {
name: "Bronze Medals",
data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
color: "#bb6e36"
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
majorGridLines: {
visible: false
}
},
});
}
$(document).ready(function() {
setTimeout(function() {
createChart();
}, 400);
});
</
script
>
</
div
>