Here is my HTML file with the JavaScript

My problem is I cannot get anything to appear. What am i doing wrong. 

<html>
  <head>
    <script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js";></script>
    <script type="text/javascript">
      
       // Load the Visualization API and the piechart package.
      google.visualization.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.visualization.setOnLoadCallback(drawChart);

        var data1 = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Cat 1', 26], ['Cat 3', 16], ['Cat 2', 30],
          ['Total', 100]
        ]);
        var data2 = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Cat 1', 100], ['Cat 3', 200], ['Cat 2', 300],
          ['Total', 400]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  1: {offset: 0.2},
                     2: {offset: 0.3},
                     3: {offset: 0.4},
                     4: {offset: 0.5},
          },
          animation: {
          startup:true,
          duration: 1000,
          easing: 'in'
          }
        };
  

        var current = 0;

        var data = [];
        data[0] = google.visualization.arrayToDataTable(data1);
        data[1] = google.visualization.arrayToDataTable(data2);

        var chart = new 
google.visualization.PieChart(document.getElementById('piechart'));
        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 ? 'Tea' : 'Coffee');
          });
      options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' 
Production by Country';

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



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

    drawChart();


    </script>
  </head>
  <body>
    <div id="piechart"></div>
    <div id="b1"></div>
  </body>
</html>


If someone could explain why the charts or the button is not being drawn. I 
would be much appreciative.

Thank you.

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/34619c60-efe3-4063-bc33-38ad3ecea977%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to