need suggestion how can I do it with fusion chart

[ayush12]

I am new here and I need suggestion so basically my requirements are I am using USA/state map so when I clicked any USA state it will trigger a new bar chart in another section and vice versa the data filter each time when I clicked any chart either world map or bar chart I know we can use event listener but here my concern is how data filter in another section suppose when I clicked any chart other chart data also trigger or filter and I am implementing through reactjs please help me this one thanks. I have attached a screenshot left side map when I clicked any USA state the right side bar chart also filter .

[Srishti Jaiswal]

Hi Ayush,

In FusionCharts you can easily update the chart/ map data on triggering the respective click events . For charts,  you need to use the "dataplotClick" event API and for maps use the "entityClick " ëvent API. In the event callbacks you need to use the "setJSONData()" method to update the chart/ map data.

Reference sample in react: https://codesandbox.io/s/setjsondata-sample-wojt5?file=/src/index.js

 

Documentation Links:-

 https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events

https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods#setJSONData

Hope this will help.

Thanks,
Srishti Jaiswal

[ayush12]

thanks for sharing your answer but I am not looking this way the example you share in codesandbox https://codesandbox.io/s/setjsondata-sample-wojt5?file=/src/index.js its not that proper I need.when I clicked any chart the other 3 charts should also filter but in other component you can see the screenshot there are 4 section when I clicked treemap the other 3 section should filter when I cliked as many times its not filter one time so every chart filter this way so when I am using class component the setState its not working like so how will I proceeds to filter eeach data and the 4 chart is class componnet and they are 4 component and they are connected but how will filter each data I didn't get is there any way we can do it thanks.

[Srishti Jaiswal]

Hi Ayush,

You can refer to the below dashboard where clicking on a map entity updates other chart's data. You can also download it's source code for reference. You have to implement the business logic accordingly.

Documentation Links:-

Dashboard: https://www.fusioncharts.com/dashboards/wealth-management-dashboard

Live: https://www.fusioncharts.com/demos/dashboards/wealth-management-dashboard/

https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events

https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods#setJSONData

Hope this will help.

Thanks,
Srishti Jaiswal

[ayush12]

Hi Srishti,

Thanks for giving the above code its matches my requirement but that code in vue.js which can't understand to implement in Reactjs please if there is any way I can get it in Reactjs format it will be very helpful.

[Ayan Bhadury]

Hi @ayush12

You can check out our extensive dashboard gallery for reference :  https://www.fusioncharts.com/dashboards/

 

[ayush12]

hi @Ayan Bhadury

I have seen all dashboard but it's not in reactjs here is a link which matches my requirement https://www.fusioncharts.com/dashboards/wealth-management-dashboard but it's in vue.js and is there any way I can get code in ReactJS or similar dashboard in reactjs please help me out in reactjs .

[Ayan Bhadury]

3 minutes ago, ayush12 said:

hi @Ayan Bhadury

I have seen all dashboard but it's not in reactjs here is a link which matches my requirement https://www.fusioncharts.com/dashboards/wealth-management-dashboard but it's in vue.js and is there any way I can get code in ReactJS or similar dashboard in reactjs please help me out in reactjs .

https://www.fusioncharts.com/dashboards/venture-financing-dashboard

[ayush12]

please look into this link https://www.fusioncharts.com/demos/dashboards/wealth-management-dashboard/ when I click any USA state map the other bar chart filter this way I needed and I need in ReactJS, not in vuejs.

@Ayan Bhadury

[Ayan Bhadury]

Just now, ayush12 said:

please look into this link https://www.fusioncharts.com/demos/dashboards/wealth-management-dashboard/ when I click any USA state map the other bar chart filter this way I needed and I need in ReactJS, not in vuejs.

@Ayan Bhadury

Apologies exact dashboard is not available with React, you can refer to the earlier messages and implement the same using events & API methods