Line Chart Example

An example of a Google Line Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
    
          <div id="ex0"></div>

JavaScript

google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Rate');

      data.addRows([
        [1, 4.07], [2, 4.37],
        [3, 4.46], [4, 4.49], [5, 4.19],
        [6, 4.26], [7, 4.46], [8, 4.43],
        [9, 4.30], [10, 4.34], [11, 4.34],
        [12, 4.19], [13, 4.16], [14, 4.13],
        [15, 4.12], [16, 4.16], [17, 4.04],
        [18, 4.00], 
      ]);

      var options = {
        width: 1000,
        height: 563,
        hAxis: {
          title: 'The Number of Month Since May. 2013'
        },
        vAxis: {
          title: '30-Year Fixed Mortgage rate (%) '
        }
      };

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

      chart.draw(data, options);

    }