Is there an example showing how clicking a bubble on a map updates another chart?
Can you describe what you want to do in more detail?
In the attached photo, I'd like to click on a bubble on the map, and update the donut chart above.
Based on which city you select, the donut chart above should only show the data for that particular city.
Is this possible?
The map chart uses latitude and longitude values to place those bubbles. Is there an ability to translate those coordinates into city values (i.e. are city values present the list you’re using with that map?).
If the answer to above is yes, then the course of action would be:
- Add a seriesClick property to the config object in Dashboard -> Advanced
Check this page here http://demos.telerik.com/kendo-ui/chart-api/events, specifically
[code]…
seriesClick: onSeriesClick,
…
function onSeriesClick(e) {
kendoConsole.log(kendo.format(“Series click :: {0} ({1}): {2}”,
e.series.name, e.category, e.value));
}
…[/code]
You will need to change data in the data source binding in this onSeriesClick function (read on).
When you retrieve your data in the pie chart, get all the data you’ll need and store it somewhere. For example in the handlers.requestSuccess function (Data Source -> Advanced). Then use it in point #3.
- In the onSeriesClick function you’d be able to access the chart’s dataSource property, for example:
var $ = Plumsail.jQuery11;
//eq(0) will select the first chart on the page
$('.plumsail-chart').eq(0).data("kendoChart").dataSource.add({
"Total": 200
});
This will add an object with a field “Total” and a value of 200. Here you’ll need to add all appropriate objects for the pie chart, using the data you saved in point #2. The objects will have to contain appropriate fields, the ones that are being used by the chart.
See this page for more information http://docs.telerik.com/kendo-ui/dataviz/chart/data-binding
How exactly do I add onSeriesClick to the config inside this function?
handlers.preRender = function(config, logger) {
logger.debug('Configuration: ', config);
return true;
}
I tried adding the following it doesn’t work.
$("#chart").kendoChart({
seriesClick: onSeriesClick,
});
function onSeriesClick(e) {
kendoConsole.log(kendo.format(“Series click :: {0} ({1}): {2}”,
e.series.name, e.category, e.value));
}
The console only returns the following config:
Configuration: {
seriesDefaults: [object Object],
map: [object Object],
title: [object Object],
pdf: [object Object],
theme: flat
}
I also tried:
var handlers = {};
handlers.preRender = function(config, logger) {
$.extend(config, {
seriesClick: onSeriesClick
});
logger.debug('Configuration: ', config);
return true;
}
function onSeriesClick(e) {
alert(“clicked”);
}
No events firing as well.
Ok, I figured out the answer. I was using the wrong event handler. Instead of
seriesClick: onSeriesClick, for maps, we need shapeClick: onShapeClick,
This is my code that works for map bubble click
var handlers = {};
handlers.preRender = function(config, logger) {
$.extend(config.map, {
shapeClick: onShapeClick,
});
logger.debug('Configuration: ', config.map);
return true;
}
function onShapeClick(e) {
console.log(e.shape.dataItem.city);
}