Berikut adalah contoh penggunaan bar chart Kendu UI
[code language=”javascript”]
var palette = ["#FFF19F", "#E8E277", "#DDDA63", "#D2D34F", "#B0BC13"];
var seriesDefaults = {
type: ‘column’,
overlay: {
gradient: "none"
},
labels: {
visible: true,
format: ‘N1’,
padding: {
bottom: 0
}
},
};
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: self.options.bindingUrl,
dataType: "json",
},
},
serverFiltering: true,
});
//chart
$(‘.chart-operation’).kendoChart({
dataSource: dataSource,
legend: {
position: ‘bottom’
},
seriesDefaults: seriesDefaults,
series: [{
field: ‘Value’,
tooltip: {
visible: false,
color: ‘#fff’,
template: ‘#= kendo.toString(value, "N2") #’
},
labels: {
format: ‘N2’,
},
color: function (point) {
return self.options.palette[point.index % self.options.palette.length];
},
}],
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
},
},
valueAxis: {
labels: {
format: "N0"
},
visible: false,
},
dataBound: function (e) {
var gridData = self.dataSource.view();
},
});
[/code]
Data dari server
[code language=”javascript”]
[{"Value":64.3,"Category":"RKAP \u002714"},{"Value":37.5,"Category":"RKAP s.d. Nop\u002714"},{"Value":43.999999999999993,"Category":"Real s.d. Nop\u002714"},{"Value":0,"Category":"Real s.d. Nop\u002713"},{"Value":64.3,"Category":"Prognosa \u002714"}]
[/code]
