Untuk Pie Chart tambakan code berikut pada saat init kendo chart :
seriesClick: function (e) {
//TO DO: trigger function for detail
gotoDetailPieChart(e.category);
}
chartBusinessProcess = $("#chartBu").kendoChart({
dataSource: dataSource,
theme: "metro",
legend: {
visible: true,
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "pie",
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= kendo.format(\"{0:p2}\",value)#"
}
},
series: [{
field: "@nameof(FieldModel.Percent)",
categoryField: "@nameof(FieldModel.Category)",
overlay: {
gradient: "sharpBevel"
},
}],
tooltip: {
visible: true,
template: "#= category #: \n #=dataItem.Value# - #= kendo.format(\"{0:p2}\",value)#"
},
seriesClick: function (e) {
//TO DO: trigger function for detail
gotoDetailPieChart(e.category);
}
}).data("kendoChart");
Sedangkan untuk radar chart :
axisLabelClick: function (e) {
//TO DO: trigger function for detail
gotoDetailRadarChart(e.text);
}
chartIso = $("#chartIso").kendoChart({
dataSource: dataSource,
theme: "metro",
legend: {
visible: true,
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "radarLine",
labels: {
visible: false,
}
},
series: [{
field: "@nameof(FieldModel.Value)",
categoryField: "@nameof(FieldModel.Category)",
}],
tooltip: {
visible: true,
template: "#= category #: \n #= kendo.format(\"{0:N0}\",value)#"
},
axisLabelClick: function (e) {
//TO DO: trigger function for detail
gotoDetailRadarChart(e.text);
}
}).data("kendoChart");