Google Chartでグラフを書いてみる


GoogleChartを使ってみたのでその備忘録です。
使用してみた感想としては、見慣れたグラフではありますが、簡単に扱えるのは良いなと思いました。
ソースはリファレンスからのそのままですが、こんな感じです。

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            //おまじないです
            google.charts.load('current', {'packages':['line']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {

              var data = new google.visualization.DataTable();
              //表示カラムを追加
              data.addColumn('number', 'Day');
              data.addColumn('number', '項目1');
              data.addColumn('number', '項目2');
              data.addColumn('number', '項目3');
              //データの追加
              data.addRows([
                [1,  37.8, 80.8, 41.8],
                [2,  30.9, 69.5, 32.4],
                [3,  25.4,   57, 25.7],
                [4,  11.7, 18.8, 10.5],
                [5,  11.9, 17.6, 10.4],
                [6,   8.8, 13.6,  7.7],
                [7,   7.6, 12.3,  9.6],
                [8,  12.3, 29.2, 10.6],
                [9,  16.9, 42.9, 14.8],
                [10, 12.8, 30.9, 11.6],
                [11,  5.3,  7.9,  4.7],
                [12,  6.6,  8.4,  5.2],
                [13,  4.8,  6.3,  3.6],
                [14,  4.2,  6.2,  3.4]
              ]);
              //オプション設定
              var options = {
                chart: {
                  title: 'Box Office Earnings in First Two Weeks of Opening',
                  subtitle: 'in millions of dollars (USD)'
                },
                width: 900,
                height: 500
              };

              var chart = new google.charts.Line(document.getElementById('linechart_material'));
              //グラフの描画
              chart.draw(data, options);
            }
        </script>
        <title>Line Charts</title>
    </head>
    <body>
      <div id="linechart_material" style="width: 250px;height: 300px"></div>
    </body>
</html>

スポンサード・リンク

//データの追加
data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  11.7, 18.8, 10.5],
    [5,  11.9, 17.6, 10.4],
    [6,   8.8, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
]);

こんな感じにデータを渡すといい感じに表示してくれます。
実際にはDBなんかからデータを取得して表示すると思いますので、適時読み替えてください。
スポンサード・リンク


日本で一番簡単にビットコインが買える取引所 coincheck bitcoin