An Example of a Google Bar Chart

by C Ui

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JavaScript

<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([
          ['Year', 'Vancouver', 'Calgary', 'Toronto'],
         ['1980', 100065, 93977, 73656],
['1982', 107830, 106311, 89452],
['1984', 113722, 86724, 95423],
['1985', 112852, 80462, 103111],
['1986', 120036, 86482, 131959],
['1990', 226385, 128484, 235983],
['1992', 245260, 129506, 203323],
['1995', 307747, 132114, 195311],
['1999', 281163, 166110, 228372],
['2000', 295978, 176305, 243249],
['2009', 592441, 385882, 396154],
['2010', 675853, 398764, 432264],
['2015', 902801, 453814, 622046]

        ]);

        var options = {
          title: 'Average House Price (in CDN$)',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 100%; height: 500px"></div>
  </body>
</html>