'Javascript chart click to open new

I am using a set of data, the amount of CO₂ output of the all the US states. So far I split all the states into their corresponding regions. What I am trying to do is; when someone clicks on a region, it would make a new pie chart of the corresponding states. So if click on the section of Northeast region, it would open up a new chart of PA, NY, NH, etc. I am not sure as to how to set up the code for an on click to open new chart. My ultimate goal is to just have it fade out and fade in the new chart. I am rather new to this so I am not too sure. Here is the code that I already have:

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Region',      'CO2 Output'],
        ['Northeast',   31887048.7],
        ['Midwest',     64278877.8],
        ['South',       76192034.1],
        ['West',        78808504.3],
    ]);
    
    var options = {
        title: 'Average Maximum Co2 Output of the US Regions'
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

</script>
</head>

<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>

Solution 1:^[1]

You can use interactivity as described here https://developers.google.com/chart/interactive/docs/basic_interactivity

See:

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var value = data.getValue(selectedItem.row, selectedItem.column);
      alert('The user selected ' + value);
    }
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.
  google.visualization.events.addListener(chart, 'select', selectHandler);

For fading out, you can just use jQuery $('#myChartDiv').fadeOut(); and then just fade in the next chart. You will have to pass a parameter to the second chart so that it knows which one to show.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	user1477388

'Javascript chart click to open new

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]