First, CHECK your JavaScript console. On Chrome, you can access the JavaScript console via Chrome->View->DEVELOPER->JavaScript Console, or Chrome->TOOLS->JavaScript Console. All modern browsers have a JavaScript console; you may need to poke around menus with names like "Advanced" or "Developer Tools" to find it.

Hopefully, the console leads you immediately to the problem. Sometimes, however, it'll be hard to translate the console message to the underlying cause. Here are some common pitfalls:

• You may be using the GOOGLE Loader incorrectly.
• Only load the charts/loader.js once. No matter how many charts you have on your web page, you should have one and only one call like this:
  
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> // Do this ONCE.
  
  This can be in the head or the body of your web page, depending on when you want the load to occur.
  
  
• Ideally, call google.charts.load only once, with all the packages you'll need for your web page.

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

google.charts.setOnLoadCallback(drawBarChart1);
function drawBarChart1() {
...
var barChart1 = new google.visualization.BarChart(document.getElementById('chart1'));
...
}

google.charts.setOnLoadCallback(drawBarChart2);
function drawBarChart2() {
...
var barChart2 = new google.visualization.BarChart(document.getElementById('chart2'));
...
}

google.charts.setOnLoadCallback(drawTimeline);
function drawTimeline() {
...
var timeline = new google.visualization.Timeline(document.getElementById('chart3'));
...
}

</script>
<div ID="chart1"></div>
...
<div id="chart2"></div>
...
<div id="chart3"></div>

• Every chart should have a unique element id (e.g., chart1, chart2 in the above example).
• Look for typos. Remember that JavaScript is a case-sensitive language.

First, check your JavaScript console. On Chrome, you can access the JavaScript console via Chrome->View->Developer->JavaScript Console, or Chrome->Tools->JavaScript Console. All modern browsers have a JavaScript console; you may need to poke around menus with names like "Advanced" or "Developer Tools" to find it.

Hopefully, the console leads you immediately to the problem. Sometimes, however, it'll be hard to translate the console message to the underlying cause. Here are some common pitfalls:

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

google.charts.setOnLoadCallback(drawBarChart1);
function drawBarChart1() {
...
var barChart1 = new google.visualization.BarChart(document.getElementById('chart1'));
...
}

google.charts.setOnLoadCallback(drawBarChart2);
function drawBarChart2() {
...
var barChart2 = new google.visualization.BarChart(document.getElementById('chart2'));
...
}

google.charts.setOnLoadCallback(drawTimeline);
function drawTimeline() {
...
var timeline = new google.visualization.Timeline(document.getElementById('chart3'));
...
}

</script>
<div id="chart1"></div>
...
<div id="chart2"></div>
...
<div id="chart3"></div>