TypeError: google.charts.Bar is not a constructor

13,261

Your HTML markup is strange, and I'm not sure if that is intentional or not. According to the docs, you should load everything in a single call to google.charts.load() and you should be loading both the corechart and bar packages there. All of your javascript should also be in the same <script></script> tag.

Here's a working example with two charts on the same page:

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date', 'val1', 'val2' , 'val3', 'val4'],
      [ '09',  12, 5, 9, 2],
      [ '10',  32, 19, 16, 9],
      [ '11',  2, 7, 5, 12],
      [ '12',  23, 11, 9, 18],
      [ '13',  5, 7, 4, 12],
      [ '14',  21, 16, 12, 43],
      [ '15',  2, 1, 2, 3],
      [ '16',  9, 12, 18, 32],                    
    ]);

    var options = {
      height: 400,
      title: 'Viste journalière',
      intervals: { 'style':'area' },
      hAxis: {title: 'Jour',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

  function drawChartTwo() {
    var data = google.visualization.arrayToDataTable([
      ['Titre', 'Comment', 'like', 'no'],
      [ 'text1',  7, 10, 3],
      [ 'text2',  2, 4, 5],
      [ 'text3',  4, 3, 2],                       
    ]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>

<div class="row">
  <div class="col-md-12" style="padding-left:3px; padding-right:3px">
    <div id="chart_div" style="width: 100%; height: 420px;"></div>
  </div>
</div>    

<div class="row">
  <div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </div>    
</div>

Edit: Example works now and added a jsfiddle

13,261

Author by

visulo

Updated on June 27, 2022

Comments

visulo almost 2 years

I'm trying to work with Google charts API, but I get an error I can't understand:

When I uses a single chart it shows very well the chart, but when I add the second graph I receive the following error:

TypeError: google.charts.Bar is not a constructor

Here is my code:

  <div class="row">
      <div class="col-md-12" style="padding-left:3px; padding-right:3px">
          <html>
            <head>
              <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(drawChart);

                function drawChart() {
                  var data = google.visualization.arrayToDataTable([
                    ['Date', 'val1', 'val2' , 'val3', 'val4'],
                              [ '09',  12, 5, 9, 2],
                              [ '10',  32, 19, 16, 9],
                              [ '11',  2, 7, 5, 12],
                              [ '12',  23, 11, 9, 18],
                              [ '13',  5, 7, 4, 12],
                              [ '14',  21, 16, 12, 43],
                              [ '15',  2, 1, 2, 3],
                              [ '16',  9, 12, 18, 32],                    
                  ]);

                  var options = {
                    height: 400,
                    title: 'Viste journalière',
                    intervals: { 'style':'area' },
                    hAxis: {title: 'Jour',  titleTextStyle: {color: '#333'}},
                    vAxis: {minValue: 0}
                  };

                  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                  chart.draw(data, options);
                }
              </script>
            </head>
            <body>
              <div id="chart_div" style="width: 100%; height: 420px;"></div>
            </body>
          </html>
      </div>    

  <div class="row">
      <div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
        <html>
          <head>
            <script type="text/javascript">
              google.charts.load('current', {'packages':['bar']});
              google.charts.setOnLoadCallback(drawChart);
              function drawChart() {
                var data = google.visualization.arrayToDataTable([
                  ['Titre', 'Comment', 'like', 'no'],
                         [ 'text1',  7, 10, 3],
                         [ 'text2',  2, 4, 5],
                         [ 'text3',  4, 3, 2],                       
                   ]);

                var options = {
                  chart: {
                    title: 'Company Performance',
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017',
                  },
                  bars: 'horizontal' // Required for Material Bar Charts.
                };

                var chart = new google.charts.Bar(document.getElementById('barchart_material'));

                chart.draw(data, google.charts.Bar.convertOptions(options));      }
            </script>
          </head>
          <body>
            <div id="barchart_material" style="width: 900px; height: 500px;"></div>
          </body>
        </html>
    </div>    
</div>