0

I'm trying to visualize different datasets on one graph. This graph is made via google charts API. By testing I encountered the problem that the graph is not working on chrome but on other browsers like Edge and Firefox. Here is my code:

<head>
  <meta charset="ISO-8859-1">
  <title> tea and coffee</title>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawVisualization);

    function drawVisualization() {
      // Some raw data (not necessarily accurate)
      var rowData1 = [
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
          'Rwanda', 'Average'
        ],
        ['2004/05', 165, 938, 522, 998, 450, 114.6],
        ['2005/06', 135, 1120, 599, 1268, 288, 382],
        ['2006/07', 157, 1167, 587, 807, 397, 623],
        ['2007/08', 139, 1110, 615, 968, 215, 409.4],
        ['2008/09', 136, 691, 629, 1026, 366, 569.6]
      ];

      var rowData2 = [
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
          'Rwanda', 'Average'
        ],
        ['2004/05', 122, 638, 722, 998, 450, 614.6],
        ['2005/06', 100, 1120, 899, 1268, 288, 682],
        ['2006/07', 183, 167, 487, 207, 397, 623],
        ['2007/08', 200, 510, 315, 1068, 215, 609.4],
        ['2008/09', 123, 491, 829, 826, 366, 569.6]
      ];

      // Create and populate the data tables.
      var data = [];
      data[0] = google.visualization.arrayToDataTable(rowData1);
      data[1] = google.visualization.arrayToDataTable(rowData2);

      var options = {
        width: 600,
        height: 350,
        vAxis: {
          title: "Cups"
        },
        hAxis: {
          title: "Month"
        },
        seriesType: "bars",
        series: {
          5: {
            type: "line"
          }
        },
        animation: {
          startup: true,
          duration: 1000,
          easing: 'out'
        },
      };
      var current = 0;
      // Create and draw the visualization.
      var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
      var button = document.getElementById('b1');
      var button2 = document.getElementById('b2');

      function drawChart() {
        // Disabling the button while the chart is drawing.
        button.disabled = true;
        button2.disabled = true;
        google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button2.disabled = false;
            button.value = 'Switch to' + current;
            button2.value = 'Switch to' + current;
          });
        options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
        chart.draw(data[current], options);
      }
      drawChart();

      buttonChange = function() {
        current = 0;
        drawChart();
      }

      button2Change = function() {
        current = 1;
        drawChart();
      }
    }
  </script>
</head>

<body>
  <select>
    <option id='b1' onclick="buttonChange()" value="Tea">Tea</option>
    <option id='b2' onclick="button2Change()" value="Coffee">Coffee</option>
  </select>
  <div id="visualization" style="width: 900px; height: 500px;"></div>
  <script type="text/javascript">
    function buttonChange() {
      current = 0;
      drawChart();
    }
    function button2Change() {
      current = 1;
      drawChart();
    }
  </script>
</body>

As you see I just combined some snippets from the API. So the contained data is just a placeholder. I already tried to deactivate all Chrome-Extensions, checked the options for irregularities and tried on another PC. On every Browser it works fine. I hope someon can help me.

alessandrio
  • 4,282
  • 2
  • 29
  • 40
Katrin
  • 1
  • 1
  • Yes I did but there was no error. – Katrin Nov 15 '17 at 14:39
  • Your drawChart function is defined inside of another function, drawVisualization. Your buttonChange and button2Change functions are defined outside of that, so they shouldn't see the local drawChart function defined inside drawVisualization. But your example seems to work fine otherwise: https://jsfiddle.net/7hf9mcvs/ – dlaliberte Nov 15 '17 at 17:55
  • I solved it. The problem is that Chrome apparently does not support `onclick` in the `options`-element. The workaround was to add an `onchange` event to the `select`-element. [For further information](https://stackoverflow.com/questions/4340690/javascript-onclick-alert-not-working-in-chrome) – Katrin Nov 16 '17 at 17:26

0 Answers0