0

I am using USA/state map fusionchart 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 filter or trigger.Below I have attached screenshot where left side image i.e USA Map when I cliked any state other bar chart data will trigger on right sideenter image description here

const dataset = [
  {
    id: "HI",
    value: "3189000",
    //link: "j-drillDownState-HI|Hawaii",
    link: "Detailed/TotalSales.html",
    alpha: "100",

    usehovercolor: "1",
    showtooltip: "1",
  },
  {
    id: "DC",
    value: "2879000",
    link: "Detailed/TotalSales.html",
  },
  {
    id: "MD",
    value: "33592000",
    link: "j-drillDownState-MD|Maryland",
  },
  {
    id: "DE",
    value: "4607000",
    link: "j-drillDownState-DE|Delaware",
  },
  {
    id: "RI",
    value: "4890000",
    link: "j-drillDownState-RI|Rhode Island",
  },
  {
    id: "WA",
    value: "34927000",
    link: "j-drillDownState-WA|Washington",
  },]
const chartConfigs = {
  type: "maps/usa", // The chart type
  id: "data-plot-click-mouse-event",
  width: "500", // Width of the chart
  height: "400", // Height of the chart
  dataFormat: "json", // Data type
  dataSource: {
    // Map Configuration
    chart: {
      numbersuffix: "%",
      includevalueinlabels: "1",
      labelsepchar: ": ",
      entityFillHoverColor: "#FFF9C4",
      theme: "fusion",
      color: "red",
    },
    events: {
      dataPlotClick: function (e) {
        var infoElem = document.getElementById("infolbl");
        var index = e.data.dataIndex;
        infoElem.innerHTML =
          "The average value from <b>" +
          e.data.startText +
          "</b> to <b>" +
          e.data.endText +
          "</b> is <b>" +
          Math.round(e.data.binValue * 100) / 100 +
          "k</b>";
      },
    },

   
    events: {
      // Attach to beforeInitialize
      initialized: function () {
        console.log("Initialized mychart...");
      },
    },

    
    data: dataset,
  },
};
class Map extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      actualValue: "Hover on the plot to see the value along with the label",
      message: "Hover on the plot to see the value along with the label",
    };

    this.dataplotrollover = this.dataplotrollover.bind(this);
    this.dataplotrollout = this.dataplotrollout.bind(this);
  }

  
  dataplotrollover(eventObj, dataObj) {
    this.setState({
      message: [
        "You are currently hovering over ",
        <strong>{dataObj.categoryLabel}</strong>,
        " whose value is ",
        <strong>{dataObj.displayValue}</strong>,
      ],
    });
  }

  
  dataplotrollout(eventObj, dataObj) {
    this.setState({
      message: this.state.actualValue,
    });
  }
  render() {
    return (
      <div>
        <ReactFC
          {...chartConfigs}
          fcEvent-dataplotRollOver={this.dataplotrollover}
          fcEvent-dataplotRollOut={this.dataplotrollout}
        />

        {console.log("map", this.state.message)}
      </div>
    );
  }
}

export default Map

2 Answers 2

1

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

Thanks,

Srishti Jaiswal

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.