Google Charts Button

I am trying to draw a Google Chart, that changes the values when Clicking a button. I tried the following code, but it didn't work.

How can I make the button work and how can I make it change text from "gravimetric " to "volumetric"?

Loading the Charts Library:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawChart);

And my data looks like this:

// Chart Data
    var rowData1 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                    ['1000', '217', 'Gravimetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                    ['1500', '203', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
    var rowData2 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                    ['800', '190', 'Volumetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                    ['1200', '150', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];

var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData1);
    data[1] = google.visualization.arrayToDataTable(rowData2);

    var current = 0;
    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.value = 'Switch to ' + (current ? 'Gravimetric' : 'Volumetric') + ' Densities';
          });
      options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

      chart.draw(data[current], options);
    }
    drawChart();

    button.onclick = function() {
      current = 1 - current;
      drawChart();
    }

The HTML looks like:

<body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
    <div style="text-align: center;"><button id="b1" style="background: #ea5b0c; color: #ffffff; font-family: 'Big John'; font-size: 18;">Click</button></div>
  </body>

Solution

wasn't sure where drawChart function was being called from here...

google.charts.setOnLoadCallback(drawChart);

to make it easier, just use the promise the load statement returns.

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  ... add code here ...
});

next, the options object was being used before it was created, here...

options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

should be...

var options = {};
options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

see following working snippet...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  // Chart Data
  var rowData1 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                  ['1000', '217', 'Gravimetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                  ['1500', '203', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
  var rowData2 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                  ['800', '190', 'Volumetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                  ['1200', '150', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];

  var data = [];
  data[0] = google.visualization.arrayToDataTable(rowData1);
  data[1] = google.visualization.arrayToDataTable(rowData2);

  var current = 0;
  // Create and draw the visualization.
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  var button = document.getElementById('b1');
  function drawChart() {
    // Disabling the button while the chart is drawing.
    button.disabled = true;
    google.visualization.events.addListener(chart, 'ready', function() {
      button.disabled = false;
      button.value = 'Switch to ' + (current ? 'Gravimetric' : 'Volumetric') + ' Densities';
    });
    var options = {};
    options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

    chart.draw(data[current], options);
  }
  drawChart();

  button.onclick = function() {
    current = 1 - current;
    drawChart();
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<div style="text-align: center;"><button id="b1" style="background: #ea5b0c; color: #ffffff; font-family: 'Big John'; font-size: 18;">Click</button></div>