Googleチャートの折れ線グラフを表示する

下記のような表をGoogleチャートで簡単に表示できます。

準備

head内で下記のようにAPIを読み込みます。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

折れ線グラフを描く

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([ //グラフデータの指定
      ['年', '売上', '支出'],
      ['2011',  1000,      400],
      ['2012',  1170,      460],
      ['2013',  660,       1120],
      ['2014',  1030,      540]
    ]);

    var options = { //オプションの指定
      title: '折れ線グラフサンプル'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); //グラフを表示させる要素の指定
    chart.draw(data, options);
  }
</script>

表示させたい箇所に下記のようにHTMLを記述します。

<div id="chart_div"></div>