Update linked charts dynamically

[Jhonny]

Hi, I am using FusionCharts maps. I set the "worldwithcountries" map linking the "USA" map. If I click on USA, it opens the USA map with States. Now in USA States I show range data with custom values, and I want to change that values every time I change an option in a select options menu. Now, I am trying to update automatically the values of the linked map (USA map), in certain point I do it, but I have to click on back button (on USA map) and then click again on USA to see the USA map with the new values, it exists any way to do this without click on back button and then go back to USA map? Here the code I have:

        var dataSource = {
            "chart": {
                "theme": "fint",
                "formatNumberScale":"0",
                "numberSuffix":"M",
                "showLabels": "0",
                "useSNameInToolTip":"0",
                "useSNameInLabels": "0"
            },
            "data": [
                {
                    "id": "23",
                    "displayValue": "United States",
                    "link": "newchart-json-US",
                }
            ],
            "linkeddata": [{
                "id": "US",
                "linkedchart": {
                    chart: {
                        theme: "fusion",
                        nullentitycolor: "#4FCAF6",
                        hoverOnNull: "0",
                        showLabels: "0",
                        legendcaption: "",
                        entitytooltext: text
                    },
                    colorrange: {
                        gradient: "0",
                        color: colorRange
                    },
                    data: markers
                }
            }]
        };

		FusionCharts.ready(function () {
                var populationMap = new FusionCharts({
                    type: 'worldwithcountries',
                    renderAt: 'world-map',
                    width: '100%',
                    height: '600',
                    dataFormat: 'json',
                    id: 'world-map-chart',
                    dataSource
                }).render();
            });

And to update the data I have:

FusionCharts.items["world-map-chart"].setJSONData(dataSource);

Of course, when I select an option on select menu I update the dataSource value.

Thanks in advance if you could help me.

[Akash Biswas]

Hi Jhonny,

 

The "linkedCharts" objects are part of the main chart dataSource. On the rendered chart, the defined linked charts are the child chart of the main chart. Hence, modifying the main chart dataSource with new values will reflect on the view when the main chart is loaded after setting the new dataSource.

So, for your scenario when you are currently on the child chart, and you set new dataSource for the main chart using setJSONData(). You need to traverse back to the main chart to see the new data reflected.

Sample fiddle replicating the scenario : http://jsfiddle.net/xp9c354t/

 

Thanks,

Akash.