CODEWITHSUNDEEP
javascriptgoogle-visualization
fon44
fon44

Reputation: 23

Cannot make google.visualization.ChartWrapper example work

Here is some code taken literally from https://developers.google.com/chart/interactive/docs/drawing_charts#chartwrapper
It should display a ColumnChart, but it does not produce any output. Instead, a JavaScript error occurs.
When loading the file standalone, the error is loader.js:135 Uncaught TypeError: Cannot read property 'length' of undefined in loader.js:135
Any idea how to solve this?

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Upvotes: 2

Views: 515

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

at one point, it would work without loading any packages

however, with recent releases, the 'corechart' package needs to be loaded when using loader.js

see following, working example...

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

function drawVisualization() {
  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                ['', 700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'vis_div'
  });
  wrapper.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="vis_div" style="width: 600px; height: 400px;"></div>

Upvotes: 1

Related Questions