Google Chart Toolsでグラフをつくる

SKIYAKIでエンジニアをしているtsukidaです。主にフロントエンド周りの業務を担当してます
弊社で開発しているプラットホームの管理画面にグラフを追加した際に
Google Chart Tools を使用したのでご紹介したいと思います。

Google Chart Toolsとは

Google Chart Tools とはgoogleが無料で提供しているグラフ描画APIです。
グラフの種類も豊富で、カスタマイズ性も高いのが特徴です。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        // グラフを描画するためのパッケージ(corechart)の呼び出し--------------①
        google.charts.load('current', {'packages':['corechart']});

        // コールバック--------------②
        google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        // データの作成--------------③
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'アイスの種類');
        data.addColumn('number', '売上数');
        data.addRows([
          ['バニラ', 3],
          ['チョコ', 5],
          ['ストロベリー', 1],
          ['抹茶', 2]
        ]);

        // グラフの描画--------------④
        var options = {'title':'今日のアイスの売り上げの内訳',
          'width':400,
          'height':300};

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
①パッケージの呼び出し
google.charts.load('current', {'packages':['corechart']});

チャートを読み込むためにパッケージの呼び出しを行います。
パッケージの種類は使いたいグラフによって変更したり増やしたりできます。
今回は円グラフを作成するのでcorechartを呼び出します。


③データの作成
var data = new google.visualization.DataTable();
			data.addColumn('string', 'アイスの種類');
			data.addColumn('number', '売上数');
			data.addRows([
				['バニラ', 3],
				['チョコ', 5],
				['ストロベリー', 1],
				['抹茶', 2]
			]);

addColumnの第一引数にデータの型を、第二引数にラベルを、
addRowsでデータの中身を指定します。


④グラフの描画
var options = {'title':'今日のアイスの売り上げの内訳',
				'width':400,
				'height':300};
				
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

グラフを描画する際、装飾等をオプションで指定できます。
ここではtitleとグラフの幅と高さを指定していますが、
他にもグラフの色やラベルの位置等かなり自由にカスタマイズできます

⑤\完成/

f:id:system-skiyaki:20160324171846p:plain

参考サイト