I have a requirement in which on click of kendo chart item, I want to
drill down and show new values in chart. After clicking any of the bar i want to hit the db with selected
value, fetch values then bind the kendo chart
and show the chart . And also for example I have a
dropdownlist with different chart types such as bar,bubble,scatter as
items. on selection change i want to bind the respective chart
dynamically in kendo UI. Please provide sample code for this
2 scenarios.
10 Answers, 1 is accepted
I am afraid both of your requirements are not supported out-of-the-box in Kendo UI and in order to achieve them you need a custom implementation. I believe the following tips will be useful:
- By design Kendo UI Chart accepts data in JSON, JSONP and XML through the DataSource. Hence when such a dataSource is changed (filtered, sorted etc.) the Chart will automatically refresh;
- For the dril-down functionality you may consider using the Chart's seriesClick event.
Regards,
Iliana Nikolovathe Telerik team


The scatter chart have two values and you can reach them with value.x and value.y. This rule is applied for the other charts with multiple values too.
Regards,Hristo Germanov
Telerik

this my json data y field:data, x field is date , name is weight , can i reach JOBORDER FROM KENDO. ANY METHOD ?. WHEN I CLICK?
THANKS..
We send you e.dataItem as a click event argument and there you can access the original data row. For example: e.dataItem.JOBORDER will return you 1.
Can you examine our online documentation for more information?
Hristo Germanov
Telerik

<script>
var mydata=[{"name":"Work","data":108404,"mach":"A"},{"name":"Reason Late","data":80121,"mach":"A"},{"name":"Work","data":2920,"mach":"C"},{"name":"manuel wait","data":138383,"mach":"C"},{"name":"Work","data":174811,"mach":E"},{"name":"Work","data":39887,"mach":"F"},{"name":"manuel wait","data":761119041,"mach":"A"}];
$('#stacked').kendoChart({
dataSource:{
data:mydata,
group: {
field:"name",
dir:"asc"
},
schema:{
model:{
fields:{
"name":{"type":"string"},
"data":{"type":"number"},
"mach":{"type":"string"}
}
}
}
},
seriesDefaults : {
stack:true
},
series: [{type:"bar", field:"data", stack:true}],
categoryAxis: {
field: "mach"
}
});
</script>
how can i can stack name according data for each mach ?
Can you examine this online demo and tell me if it works for you?
Regards,Hristo Germanov
Telerik

