Update linked charts dynamically

Recommended Posts

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",
                "showLabels": "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',

And to update the data I have:


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

Thanks in advance if you could help me.

Share this post

Link to post
Share on other sites

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/




Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now