fusionchartsreact-fusioncharts

How to get the value from a color range scale when the value changes? (fusioncharts)


I have a fusion map that has a color range scale (from 0 to 3,000,000,000).

When I adjust the scale (on the UI), I would like to get the value that is shown on the scale.

I would preferably like to capture it in an event.

I thought the event would have a name such as 'colorRangeUpdated', 'valueChange', 'colorRangeScaleUpdate', or 'getColorRangeValue' but I don't think any of these events exist.

How to get the value from a color range scale when the value updates? (e.g. the user slides the left or right slider to a different value).

Is there an event for this? What is it called?

(Here is a perfect example of a fusion map which has a sliding color scale) https://www.fusioncharts.com/fusionmaps/examples/average-temperature-of-us-states

I have already created events such as 'entityRollover' and 'entityRollout' but I didn't see any events related to the color range scale in the documentation https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events


Solution

  • With the help of the legendRangeUpdated event you can get the updated value from a color range scale. See also JS fiddle.

    const dataSource = {
      chart: {
        caption: "Average Temperature of US States",
        subcaption: "1979 - 2000",
        entityfillhovercolor: "#F8F8E9",
        numbersuffix: "°F",
        showlabels: "1",
        borderthickness: "0.4",
        theme: "fusion",
        entitytooltext:
          "<b>$lname</b> has an average temperature of <b>$datavalue</b>"
      },
      colorrange: {
        minvalue: "20",
        code: "#00A971",
        gradient: "1",
        color: [
          {
            minvalue: "20",
            maxvalue: "40",
            code: "#EFD951"
          },
          {
            minvalue: "40",
            maxvalue: "60",
            code: "#FD8963"
          },
          {
            minvalue: "60",
            maxvalue: "80",
            code: "#D60100"
          }
        ]
      },
      data: [
        {
          id: "HI",
          value: "70.0"
        },
        {
          id: "DC",
          value: "52.3"
        },
        {
          id: "MD",
          value: "54.2"
        },
        {
          id: "DE",
          value: "55.3"
        },
        {
          id: "RI",
          value: "50.1"
        },
        {
          id: "WA",
          value: "48.3"
        },
        {
          id: "OR",
          value: "48.4"
        },
        {
          id: "CA",
          value: "59.4"
        },
        {
          id: "AK",
          value: "26.6"
        },
        {
          id: "ID",
          value: "44.4"
        },
        {
          id: "NV",
          value: "49.9"
        },
        {
          id: "AZ",
          value: "60.3"
        },
        {
          id: "MT",
          value: "42.7"
        },
        {
          id: "WY",
          value: "42.0"
        },
        {
          id: "UT",
          value: "48.6"
        },
        {
          id: "CO",
          value: "45.1"
        },
        {
          id: "NM",
          value: "53.4"
        },
        {
          id: "ND",
          value: "40.4"
        },
        {
          id: "SD",
          value: "45.2"
        },
        {
          id: "NE",
          value: "48.8"
        },
        {
          id: "KS",
          value: "54.3"
        },
        {
          id: "OK",
          value: "59.6"
        },
        {
          id: "TX",
          value: "64.8"
        },
        {
          id: "MN",
          value: "41.2"
        },
        {
          id: "IA",
          value: "47.8"
        },
        {
          id: "MO",
          value: "54.5"
        },
        {
          id: "AR",
          value: "60.4"
        },
        {
          id: "LA",
          value: "66.4"
        },
        {
          id: "WI",
          value: "43.1"
        },
        {
          id: "IL",
          value: "51.8"
        },
        {
          id: "KY",
          value: "55.6"
        },
        {
          id: "TN",
          value: "57.6"
        },
        {
          id: "MS",
          value: "63.4"
        },
        {
          id: "AL",
          value: "62.8"
        },
        {
          id: "GA",
          value: "63.5"
        },
        {
          id: "MI",
          value: "44.4"
        },
        {
          id: "IN",
          value: "51.7"
        },
        {
          id: "OH",
          value: "50.7"
        },
        {
          id: "PA",
          value: "48.8"
        },
        {
          id: "NY",
          value: "45.4"
        },
        {
          id: "VT",
          value: "42.9"
        },
        {
          id: "NH",
          value: "43.8"
        },
        {
          id: "ME",
          value: "41.0"
        },
        {
          id: "MA",
          value: "47.9"
        },
        {
          id: "CT",
          value: "49.0"
        },
        {
          id: "NJ",
          value: "52.7"
        },
        {
          id: "WV",
          value: "51.8"
        },
        {
          id: "VA",
          value: "55.1"
        },
        {
          id: "NC",
          value: "59.0"
        },
        {
          id: "SC",
          value: "62.4"
        },
        {
          id: "FL",
          value: "70.7"
        }
      ]
    };
    
    FusionCharts.ready(function() {
      var myChart = new FusionCharts({
        type: "usa",
        renderAt: "chart-container",
        width: "100%",
        height: "100%",
        dataFormat: "json",
        dataSource,
        
          "events": {
          "legendRangeUpdated": function(dataObj) {
          
              alert(dataObj.data.minValue);
          }
        } 
      }).render();
    });