オタクじゃないよGeekだよ

趣味的なIT/IoT。そんな内容

【Chart.js】x=時間の散布図でデータをajaxで取得する

f:id:mae8bit:20181104205510p:plain

はじめに

これまでHighcharts一筋だったのですが、商用利用では有償となるため、Chart.jsで練習がてらにテストしてみました。

要件は以下の通り

  • X軸が時間の散布図でうまく表示されること
  • サーバーからデータをダイナミックに引き出せること

 結論から言うと、全く問題ナシです。

 

構成

主要ファイルはhtml、Chart.jsとjQueryを使用します。jQuery.get()を使ってサーバーからデータをJSON形式で取得します。

サーバー側はデータベースからデータを引き出すことを想定して、PHPで記述します。今回はデータベースは使用せず、データを直書きします。

 

ソースコード

github.com

ソースコード内のコメントも参照願います。

サーバー側 _json.php

$dataset1['data'][] = array('x' => strtotime('2018/11/2 00:00:00'),'y' =>  0);

ここでは時刻データをstrtotime()関数で整数化して渡しています。この数値の意味は1970/01/01 00:00:00からの経過時間秒になります。

echo json_encode($data);

最後に配列をJSON形式に変換して返しています。

 

クライアント側 timescatter.html

<script src="./js/jquery/1.9.1/jquery.min.js"></script>
<script src="./js/chartjs/2.7.3/Chart.bundle.min.js"></script>

お決まりです。

//サーバーからデータを受け取る
$.get("_json.php", function(data) {
    //alert(data); //php側のエラーをチェックする場合
    var jdata = JSON.parse(data);

$.get()で_json.phpからデータを受け取っています。

JSON.parse()でテキストデータをJSON書式とみなしてJavascript配列に変換しています。$.get()ではなく直接JSONデータとして受け取ることのできるajax関数もあるようですが、PHPでエラーが発生したとき、エラーメッセージをalert(data)で簡単に確認できるので、敢えてテキストデータとして受信しています。

    //phpから渡されたx値は1970/01/01 00:00:00からの経過時間秒なのでdate型に置き換える
    var l = jdata.length;
    for(var i=0; i<l; i++) {
        var m = jdata[i].data.length;
        for(var j=0; j<m; j++) {
            //javascriptのDate基準値は1970/01/01 00:00:00からの経過時間ミリ秒
            jdata[i].data[j].x = new Date(jdata[i].data[j].x * 1000);
        }
    }

forループ内ではxの値をPHPの時刻整数からJavascriptのDateオブジェクトに変換しています。秒からミリ秒に変換するために*1000をしてからnew Date()に渡しています。

 

さいごに

Chart.js全然いけますね。今回は最初に表示したらそれっきりだったのでajaxを使う意味はありませんが、実運用では定期的にグラフを自動更新するとか、利便性の上がる使い方ができます。

私の場合はウェブサーバーとデータベースサーバーが異なるという制限回避のために使用します。

以上