Google Chart

❮ Previous Next ❯

The Google Chart gallery offers many types of charts ready to use, ranging from simple line charts to intricate hierarchical tree maps.

Scatter Chart
Line Chart
Bar / Column Chart
Area Chart
Pie Chart
Donut Chart
Org Chart
Map / Geo Chart

How to Use Google Chart?

1. Add a <div> element (with a unique id) in the HTML where you want to display the chart:

2. Add a link to the charts loader:

3. Load the Graph API, and add the function to run when the API is loaded:

Bar Charts

Contry	Mhl
Italy	55
France	49
Spain	44
USA	24
Argentina	15

Pie Charts

Contry	Mhl
Italy	55
France	49
Spain	44
USA	24
Argentina	15

To convert a Bar Chart to a Pie chart, just replace:google.visualization.BarChartwith:google.visualization.PieChart

3D Pie

Contry	Mhl
Italy	55
France	49
Spain	44
USA	24
Argentina	15

To show the Pie in 3D, simply include is3D: true in the options.

Line Graph

Price	Size
50	7
60	8
70	8
80	9
90	9
100	9
110	10
120	11
130	14
140	14
150	15

Scatter Plots

Price	Size
50	7
60	8
70	8
80	9
90	9
100	9
110	10
120	11
130	14
140	14
150	15

To create a scatter plot with the same data, switch "google.visualization" to "ScatterChart".

<!DOCTYPE html>
<html>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <body>
    <div id="myChart" style="width:100%; max-width:600px; height:500px;"></div>
    <script>
      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        // Set Data
        const data = google.visualization.arrayToDataTable([
          ['Contry', 'Mhl'],
          ['Italy', 55],
          ['France', 49],
          ['Spain', 44],
          ['USA', 24],
          ['Argentina', 15]
        ]);
        // Set Options
        const options = {
          title: 'World Wide Wine Production'
        };
        // Draw
        const chart = new google.visualization.BarChart(document.getElementById('myChart'));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <body>
    <div id="myChart" style="width:100%; max-width:600px; height:500px;"></div>
    <script>
      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        // Set Data
        const data = google.visualization.arrayToDataTable([
          ['Contry', 'Mhl'],
          ['Italy', 54.8],
          ['France', 48.6],
          ['Spain', 44.4],
          ['USA', 23.9],
          ['Argentina', 14.5]
        ]);
        // Set Options
        const options = {
          title: 'World Wide Wine Production'
        };
        // Draw
        const chart = new google.visualization.PieChart(document.getElementById('myChart'));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <body>
    <div id="myChart" style="width:100%; max-width:600px; height:500px;"></div>
    <script>
      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        // Set Data
        const data = google.visualization.arrayToDataTable([
          ['Contry', 'Mhl'],
          ['Italy', 54.8],
          ['France', 48.6],
          ['Spain', 44.4],
          ['USA', 23.9],
          ['Argentina', 14.5]
        ]);
        // Set Options
        const options = {
          title: 'World Wide Wine Production',
          is3D: true
        };
        // Draw
        const chart = new google.visualization.PieChart(document.getElementById('myChart'));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <body>
    <div id="myChart" style="width:100%; max-width:600px; height:500px;"></div>
    <script>
      google.charts.load('current', {
        packages: ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        // Set Data
        const data = google.visualization.arrayToDataTable([
          ['Price', 'Size'],
          [50, 7],
          [60, 8],
          [70, 8],
          [80, 9],
          [90, 9],
          [100, 9],
          [110, 10],
          [120, 11],
          [130, 14],
          [140, 14],
          [150, 15]
        ]);
        // Set Options
        const options = {
          title: 'House Prices vs. Size',
          hAxis: {
            title: 'Square Meters'
          },
          vAxis: {
            title: 'Price in Millions'
          },
          legend: 'none'
        };
        // Draw
        const chart = new google.visualization.LineChart(document.getElementById('myChart'));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <body>
    <div id="myChart" style="width:100%; max-width:600px; height:500px;"></div>
    <script>
      google.charts.load('current', {
        packages: ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        // Set Data
        const data = google.visualization.arrayToDataTable([
          ['Price', 'Size'],
          [50, 7],
          [60, 8],
          [70, 8],
          [80, 9],
          [90, 9],
          [100, 9],
          [110, 10],
          [120, 11],
          [130, 14],
          [140, 14],
          [150, 15]
        ]);
        // Set Options
        const options = {
          title: 'House Prices vs. Size',
          hAxis: {
            title: 'Square Meters'
          },
          vAxis: {
            title: 'Price in Millions'
          },
          legend: 'none'
        };
        // Draw
        const chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics