Map events

by annlee » Mon Nov 30, 2015 10:15 pm

Is there an example showing how clicking a bubble on a map updates another chart?
annlee
 
Posts: 35
Joined: Thu Oct 08, 2015 3:25 pm

by Rostislav » Tue Dec 01, 2015 10:54 am

Can you describe what you want to do in more detail?
User avatar
Rostislav
 
Posts: 61
Joined: Fri Oct 09, 2015 10:51 am

by annlee » Thu Dec 03, 2015 5:29 pm

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?
Attachments
Capture.JPG
Capture.JPG (117.86 KiB) Viewed 807 times
annlee
 
Posts: 35
Joined: Thu Oct 08, 2015 3:25 pm

by Rostislav » Fri Dec 04, 2015 12:47 pm

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:
1. 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: Select all
..
seriesClick: onSeriesClick,
..

function onSeriesClick(e) {
    kendoConsole.log(kendo.format("Series click :: {0} ({1}): {2}",
        e.series.name, e.category, e.value));
}
..


You will need to change data in the data source binding in this onSeriesClick function (read on).

2.
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.

3. In the onSeriesClick function you'd be able to access the chart's dataSource property, for example:

Code: Select all
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
User avatar
Rostislav
 
Posts: 61
Joined: Fri Oct 09, 2015 10:51 am

by annlee » Tue Dec 08, 2015 5:29 pm

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

}
annlee
 
Posts: 35
Joined: Thu Oct 08, 2015 3:25 pm

by annlee » Tue Dec 08, 2015 5:54 pm

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.
annlee
 
Posts: 35
Joined: Thu Oct 08, 2015 3:25 pm

by annlee » Tue Dec 08, 2015 6:41 pm

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);
}
annlee
 
Posts: 35
Joined: Thu Oct 08, 2015 3:25 pm


Return to Dashboard Designer for SharePoint 2013

cron