JSFiddle - React, Tailwind, and code Playground

by jlujan

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JavaScript

var data;
var chart;

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var results = [{"count":1,"year":"2009 "},{"count":3,"year":"2011 "},{"count":5,"year":"2012 "},{"count":9,"year":"2013 "},{"count":2,"year":"2014 "},{"count":1,"year":"2015 "},{"count":59,"year":"2016 "},{"count":4,"year":"2017 "}];

  data = new google.visualization.DataTable();
  data.addColumn('string', 'VoteName');
  data.addColumn('number', 'VoteCount');


      results.forEach(function(data1, index) {
       
      data.addRow([
              data1.year,
              data1.count
            ]);
    });


  var options = {
    title: 'My Pie Chart- Lujan',
    width: 600,
    height: 600
  };

  chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'select', selectHandler);
  chart.draw(data, options);
}

function selectHandler() {
  // be sure something is selected
  if (chart.getSelection().length) {
    var selectedItem = chart.getSelection()[0];
    var value = data.getValue(selectedItem.row, 0);
    alert('The user selected ' + value);
  }
}