Kendo Stacked Bar Chart with Complex Data

Kendo stacked bar chart dapat menerima berbagai bentuk data untuk menghasilkan chart. Berikut adalah contoh bentuk data yang dapat digunakan untuk kasus yang kompleks.

Server mengirimkan List

[code language=”csharp”]
public class ChartColumnAttribute
{
public double Value { get; set; }
public string Category { get; set; } //RKAP, RKAP s.d. Jun’14, Real s.d. Jun’14, Real s.d. Jun’13
public string AccountName { get; set; } //CNG, etc
public string Color { get; set; }
public double Aggregates { get; set; }

//label
public bool ShowLabel = false;
public double Label { get; set; }
}
[/code]

Kode javascript
[code language=”javascript”]
var dataSource;
var paletteStackedBarChart = [‘#D3E54E’, ‘#C6DA42’, ‘#B9CE37’, ‘#ACC328’, ‘#9FB11F’, ‘#939E13’, ‘#86BC07’];

$(document).ready(function () {
//datasource
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "@Url.Action("BindingChart")",
dataType: "json",
type: ‘POST’,
},
},
group: {
field: "AccountName",
},
serverFiltering: true,
});

//grid
var stackSeriesDefaults = {
type: "column",
stack: true,
labels: {
visible: function (e) {
var visible = false;
if (e.dataItem !== undefined)
visible = e.dataItem.ShowLabel;

return visible;
},
template: ‘#: kendo.toString(dataItem.Label, "n0") #’,
},
overlay: {
gradient: "none"
},
border: {
color: ‘#ffffff’,
width: 1,
},
};

$("#chart").kendoChart({
dataSource: dataSource,
legend: {
position: "bottom"
},
seriesDefaults: stackSeriesDefaults,
series: [{
field: "Value",
visibleInLegend: false,
color: function (point) {
return paletteStackedBarChart[point.series.index % paletteStackedBarChart.length];
},
}],
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
},
},
valueAxis: {
labels: {
format: "n0"
},
},
tooltip: {
visible: true,
template: ‘#= dataItem.AccountName #: #= kendo.toString(value, "n0") #’
},
});
});
[/code]