title: TypeError: google.charts.Bar is not a constructor
body: <p>I'm trying to work with <strong>Google charts API</strong>, but I get an error I can't understand:</p>
  
  <ul>
  <li>When I uses a single chart it shows very well the chart, but when I
  add the second graph I receive the following error:</li>
  </ul>
  
  <blockquote>
    <p>TypeError: google.charts.Bar is not a constructor</p>
  </blockquote>
  
  <p>Here is my code:</p>
  
  <pre><code>  &lt;div class="row"&gt;
        &lt;div class="col-md-12" style="padding-left:3px; padding-right:3px"&gt;
            &lt;html&gt;
              &lt;head&gt;
                &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
                &lt;script type="text/javascript"&gt;
                  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);
                  }
                &lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
                &lt;div id="chart_div" style="width: 100%; height: 420px;"&gt;&lt;/div&gt;
              &lt;/body&gt;
            &lt;/html&gt;
        &lt;/div&gt;    
  
    &lt;div class="row"&gt;
        &lt;div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px"&gt;
          &lt;html&gt;
            &lt;head&gt;
              &lt;script type="text/javascript"&gt;
                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));      }
              &lt;/script&gt;
            &lt;/head&gt;
            &lt;body&gt;
              &lt;div id="barchart_material" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
            &lt;/body&gt;
          &lt;/html&gt;
      &lt;/div&gt;    
  &lt;/div&gt;    
  </code></pre>