n-HIROKIの日常

n-HIROKIの取り組みを記録したものです。

CanvasJSで折れ線グラフを表示する

こんにちは
n-hirokiです。
僕の技術メモです。


前回の記事の続編です!

今回は受け取ったデータをCanvasJSでグラフにして表示します!

hiroki-prog.hatenablog.com

テキストファイルのデータをJavaScriptに渡す方法は前回の記事をご覧ください。



まずは今回扱うdata.txtの確認です。
・data.txtの内容

datetime -> データの取得日時
highB -> データの上位ビット
lowB -> データの下位ビット


・data.txt

{"datetime":"2018-03-07 16:48:01","highB":"0","lowB":"42"}
{"datetime":"2018-03-07 16:48:07","highB":"2","lowB":"202"}
{"datetime":"2018-03-07 16:48:12","highB":"3","lowB":"49"}
{"datetime":"2018-03-07 16:48:17","highB":"2","lowB":"78"}
{"datetime":"2018-03-07 16:48:22","highB":"216","lowB":"244"}



ではコードの説明に入ります!




1、CanvasJSの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js">
</script>


2、変数定義

<script type="text/javascript">
    var lines = "";     //PHPのデータ受け取り
    var data = "";      //データ分割
    var datetime;       //日時生成
    var high = 0;       //highB用
    var low = 0;       //lowB用
    var value = 0;      //highとlowBの計算結果
    var dataPlot = [];    //CanvasJSに渡すデータ
    var count = 0;     //forループカウント用
    var line = [];    //linesで受け取ったデータを1行ごとに分ける
    var lineCount = 0;    //lineのlinesから受け取るインデックスの管理用
    var temp;    //date生成用変数
</script>


3、PHPからデータを受け取る

    lines = String(<?php echo json_encode($lines); ?>);


この状態だと、

    lines[0] -> {
    lines[1] -> "
    lines[2] -> d
    lines[3] -> a

インデックスごとに1文字しか入っていないため扱いにくい




4、扱いやすいようにする

    for(count = 0;lines.length >= count + 1;count++){
        if(line[lineCount] == undefined){
            line[lineCount] = lines[count];
        }else{
            line[lineCount] += lines[count];
        }
        if(lines[count] == '}'){
            lineCount++;
        }
    }


これでlineの内容はこうなる

    line[0] -> {"datetime":"2018-03-07 16:48:01","highB":"0","lowB":"42"}
    line[1] -> {"datetime":"2018-03-07 16:48:07","highB":"2","lowB":"202"}
    line[2] -> {"datetime":"2018-03-07 16:48:12","highB":"3","lowB":"49"}



5、CanvasJSに渡すデータ形式に生成する

for(count = 1;line.length > count + 1;count++){
    //欲しいデータを取得するため切り抜く
    data = line[count].split(",");     //欲しいデータを取得しやすくするために分割

    //datetime生成
    temp = data[1].slice(13,32);    //2018-03-07 16:48:01 この形に切り抜かれている
    var y = parseInt(temp.slice(0,4));    //年 int型にキャスト
    var m = parseInt(temp.slice(5,7)) - 1;    //月
    var d = parseInt(temp.slice(8,10));    //日
    var h = parseInt(temp.slice(11,13));    //時
    var i = parseInt(temp.slice(14,16));    //分
    var s = parseInt(temp.slice(17,19));    //秒
            
    datetime = new Date(y,m,d,h,i,s);    //Date型


    //value生成
    high = parseInt(data[2].slice(9,10));    //high int型にキャスト
    low = parseInt(data[3].slice(8,-2));    //low
    value = high * (256 + low);    //valueの計算

    //CanvasJSの形式に生成
    dataPlot.push({
        label:datetime, y:value
    });
}



6、CanvasJSの処理

var stage = document.getElementById('stage');
var chart = new CanvasJS.Chart(stage, {
    title: { 
       text: "グラフタイトル"
    },
   data: [{
        type: 'line',
        dataPoints: dataPlot
    }]
});
    chart.render();


CanvasJSはかなり簡単にグラフを生成してくれて便利です!
JavaScriptに不慣れな僕は今回のデータの生成で結構苦戦しました!
特にlineの各インデックスの最初に"undefined"が入ってしまいかなりハマりましたw
今回もとても良い勉強になったと思います!
なんとか動いてくれて嬉しいです!