I. Overview
When the map automatically displays the tooltip of each area, other charts also display the data of the corresponding area, as shown in the following figure:
II. Example
2.1 New dataset
Create a new dashboard and create a new Embedded dataset, as shown in the following figure:
2.2 Chart settings
1) Add 2 charts: a map and a column chart, as shown below:
2) Set the data and attributes for the column chart and map, as shown in the figure below:
Map
Bar chart
2.3 Add event
Select body from the component list, and add an After Initialization event.
In the event definition window, create a new parameter named area, and the parameter value uses the formula: Embedded1.select(country)
As shown below:
The JS code of the event is as follows:
window.area = area;
window.temp = 0;
var len = window.area.length;
var temp = 0;
setTimeout(function () {
var vanchart = FR.Chart.WebUtils.getChart('chart0').vanCharts.charts[0];
//Get the map series and all data points
var series = vanchart.series,
allPoints = [];
for (var i = -1; ++i <series.length;) {
allPoints = allPoints.concat(series[i].points);
}
setInterval(function () {
// Update the column chart, assign the current map point to the area parameter of the column chart
FR.Chart.WebUtils.changeParameter(
'chart1', {
'area': window.area[window.temp]
}
);
// The map displays the data point currently looped to
for (var j = 0; j <allPoints.length; j++) {
if (allPoints[j].name == window.area[window.temp]) {
vanchart.showTooltip(allPoints[j]);
}
}
// window.temp is the serial number of currently displayed map data point
// Every time the data of one area is displayed, window.temp is increment by 1, so the next area will be displayed in the next loop
// When it is the final map point, window.temp is reset to display the first map point
if (window.temp == (window.area.length-1)) {
window.temp = 0;
} else {
window.temp = window.temp + 1;
}
}, 2000); //Interval of the loop is 2000 milliseconds, so the next map point will be displayed every 2 seconds
}, 1000)
2.4 Preview effect
Save the template and preview. The effect is as shown in the beginning.
Note: Mobile terminal is not supported.
