Google Pie Chart w Table

Pie Chart interacts with Table using Google Charts

by hoyasultan

HTML

<script src="https://www.google.com/jsapi"></script>
   <div id="product-allocation-chart" style="width:600px; height: 300px;"></div>
   <div id="product-allocation-table" style="width:600px; height: 500px;"></div>

JavaScript

google.load("visualization", "1", {packages:["corechart","table"]});
      google.setOnLoadCallback(drawProductAllocationChart);
      function drawProductAllocationChart() {
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Allocation'],
          ['Product A', 25],
          ['Product B', 50],
          ['Product C', 15],
          ['Product D', 10]
        ]);

        var options = {
          //title: 'My Daily Activities'
		  is3D: true
        };

        var productAllocationChart = new google.visualization.PieChart(document.getElementById('product-allocation-chart'));
        productAllocationChart.draw(data, options);
		
		var productAllocationTable = new google.visualization.Table(document.getElementById('product-allocation-table'));
        productAllocationTable.draw(data, null);
		
        // When the table is selected, update the orgchart.
        google.visualization.events.addListener(productAllocationTable, 'select', function() {
          portfolioAllocationChart.setSelection(productAllocationTable.getSelection());
        });

        // When the orgchart is selected, update the table visualization.
        google.visualization.events.addListener(productAllocationChart, 'select', function() {
          productAllocationTable.setSelection(productAllocationChart.getSelection());
        });
      }