JavaScriptでアニメーションを用いたグラフを作る

JavaScriptでグラフを作る方法として「Highchart」「ccchart」「D3」など様々ありますが、今回はGoogle Chart Toolsを使用したアニメーショングラフ作成をしてみます。

まずはソースコードを公開↓

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<?php

/**
 * 縦棒グラフ関数
 */
function tatebou_graph($id, $data, $label){
    $change_data = data_change($data);
    $initial_data = data_initialize($data);

    return<<<EOT
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            {$initial_data}
            ]);

        var options = {
            title : '{$label["title"]}',
            vAxis: {title: '{$label["vAxis"]}'},
            hAxis: {title: '{$label["hAxis"]}'},
            seriesType: 'bars',
            animation:{ duration: 1000, easing: 'out',},
        };

        var chart = new google.visualization.ComboChart(document.getElementById("{$id}"));
        chart.draw(data, options);

        //500ms秒後アニメーション起動
        setTimeout(function(){
            data = google.visualization.arrayToDataTable([
                {$change_data}
                ]);

            chart.draw(data, options);
        },500);

    }
    </script>
    <div id="{$id}"></div>
EOT;
}


/**
 * 横棒グラフ関数
 */
function yokobou_graph($id, $data, $label){
    $change_data = data_change($data);
    $initial_data = data_initialize($data);

    return<<<EOT
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            {$initial_data}
            ]);

        var options = {
            title : '{$label["title"]}',
            vAxis: {title: '{$label["vAxis"]}'},
            hAxis: {title: '{$label["hAxis"]}'},
            seriesType: 'bars',
            animation:{ duration: 1000, easing: 'out',},
        };

        var chart = new google.visualization.BarChart(document.getElementById("{$id}"));
        chart.draw(data, options);

        //500ms秒後アニメーション起動
        setTimeout(function(){
            data = google.visualization.arrayToDataTable([
                {$change_data}
                ]);

            chart.draw(data, options);
        },500);

    }
    </script>
    <div id="{$id}"></div>
EOT;
}


/**
 * 折れ線グラフの関数
 */
function oresen_graph($id, $data, $label){
    $change_data = data_change($data);
    $initial_data = data_initialize($data);

    return<<<EOT
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            {$initial_data}
            ]);

        var options = {
            title : '{$label["title"]}',
            vAxis: {title: '{$label["vAxis"]}'},
            hAxis: {title: '{$label["hAxis"]}'},
            animation:{ duration: 1000, easing: 'out',},
        };

        var chart = new google.visualization.LineChart(document.getElementById("{$id}"));
        chart.draw(data, options);

        //500ms秒後アニメーション起動
        setTimeout(function(){
            data = google.visualization.arrayToDataTable([
                {$change_data}
                ]);

            chart.draw(data, options);
        },500);

    }
    </script>
    <div id="{$id}"></div>
EOT;
}



/**
 * 円グラフ
 */
function en_graph($id, $data, $label){
    $change_data = data_change($data);
    $initial_data = data_initialize($data);

    return<<<EOT
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            {$initial_data}
            ]);

        var options = {
            title : '{$label["title"]}',
            animation:{ duration: 1000, easing: 'out',},
        };

        var chart = new google.visualization.PieChart(document.getElementById("{$id}"));
        chart.draw(data, options);

        //500ms秒後アニメーション起動
        setTimeout(function(){
            data = google.visualization.arrayToDataTable([
                {$change_data}
                ]);

            chart.draw(data, options);
        },500);

    }
    </script>
    <div id="{$id}"></div>
EOT;
}



/**
 * 渡されたデータをグラフ表示をするために最適化を行う関数
 */
function data_change($data){
  $fig_data = "";
  foreach ($data as $key1 => $value1) {
    $fig_temp = "[";
    foreach ($value1 as $key2 => $value2) {
      $fig_temp =  $fig_temp.$value2.",";
    }
    $fig_temp = substr($fig_temp,0,-1); //最後の,を削除
    $fig_temp =  $fig_temp."],";
    $fig_data = $fig_data.$fig_temp;
  }
  return $fig_data;
}



/**
 * すべての要素の数値100の多次元配列を作る(初期化)
 */
function data_initialize($data){
  $initial_data = "";
  $initial_num = "100"; //初期の数値
  foreach ($data as $key1 => $value1) {
    $temp = "[";
    foreach ($value1 as $key2 => $value2) {
      if ($key1 == 0 || $key2 == 0) {
        $temp =  $temp.$value2.",";
      }else{
        $temp =  $temp.$initial_num.",";
      }
    }
    $temp = substr($temp,0,-1); //最後の,を削除
    $temp =  $temp."],";
    $initial_data = $initial_data.$temp;
  }
  return $initial_data;
}

最初に上段に記載されているグラフを表示する関数からの説明ではなく、下段のプログラムについて説明します。

Sample.phpについて
はじめに「 require_once 」で外部ファイルを呼び出しています。
この場合は、「 Google_Graph.php 」にグラフを定義しているため、Google_Graph.phpを呼び出しています。

次に$csvにテストデータを代入しています。
多次元配列にしたほうが便利なので多次元配列にしています。
注意する点として、文字列をデータとして扱うときは必ず’ ‘(シングルクォーテーション)で囲ってください。
そうしないとグラフ表示されません。

あとは縦棒グラフとか横棒グラフなどの関数を呼び出してprintで出力しています。

Google_Graph.phpについて
縦棒グラフ、横棒グラフ、円グラフ、折れ線グラフの4つのグラフを関数化しています。

縦棒グラフ・・・function tatebou_graph($id, $data, $label)
横棒グラフ・・・function yokobou_graph($id, $data, $label)
円グラフ・・・function en_graph($id, $data, $label)
折れ線グラフ・・・oresen_graph($id, $data, $label)

それぞれの引数は、
$id – グラフのユニークなID
$data – グラフに表示するデータ要素
$label – タイトル名、縦軸名、横軸名
となっています。

Googleグラフにアニメーションを付加する方法として、data.setValueでデータを再定義する方法がありますが(詳しくはここ)、データの個数分setValueをセットする必要があります。
個人的にはめんどくさいなぁと思ったので、
google.visualization.arrayToDataTable()
を二回行うことでグラフの値を書き換えて出力しています。

上記の関数以外にも、
function data_change($data)
function data_initialize($data)
があります。
それぞれ、data_change$data()では貰ったデータをグラフに表示できるように最適化を行っています。
data_initialize()では、すべてのデータ要素を初期化しています。
グラフを表示する際、はじめに初期化したデータを表示し、次に表示したいデータをアニメーションによって表示を行います。

実行結果

GoogleChartToolsのアニメーションについては違う記事で詳細に書こうと思います。