アクセスカウンタ

頑張る父さんの記録帳

プロフィール

ブログ名
頑張る父さんの記録帳
ブログ紹介
平凡なサラリーマンが取り組んでいる、ダイエット・ゴルフ・株式投資などのさまざまな記録を掲載しています。
zoom RSS

【ブログ編集】CanvasJSを使ってグラフ作成

2017/11/05 10:58
体重グラフをCanvasJSを使って自作してみた。

CanvasJSを使ってグラフ作成

体重データはcsv形式のファイルで作成した。csvのデータは「西暦年」「月」「日」「体重」「体脂肪率」「体重ラベル」「体脂肪率ラベル」で構成する。ラベル以外は数字のみ。測定データがないものは空データとする。体重と体脂肪率は小数点以下も記録できるようにした。データラベルは「"(数字)"」の形式で格納。表示が密になるのでピーク時の数値を小数点以下を四捨五入した整数の値で貼ることにした。なお、CanvasJSの折れ線グラフではデータラベルは上側に表示される。


csvデータ(例)

2017,10,29,82.7,26.7,,,
2017,10,30,83.0,26.1,"83","26",
2017,10,31,null,null,,,
2017,11,1,84.1,26.3,,,
2017,11,3,83.9,25.9,,,
2017,11,4,83.7,26.2,"84","26",


次に、グラフ化だ。今回は CanvasJS を使う。現時点のバージョンは v1.9.10 GA だ。

csvを読み込んで、体重(dataPoints1)と体脂肪率(dataPoints2)の2軸の重ね折れ線グラフを作成する。CanvasJSでは月を0から数えるのでマイナス1し、描画処理を行う。左の第1軸を体重、右の第2軸を体脂肪率とし、目盛線の数が同じになるように、かつ、2つのグラフが重ならないように、縦軸の最小値と最大値を決める。


2軸の重ね折れ線グラフを描画

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="DietCanvas">
  <script type="text/javascript">
    $(document).ready(function () {
      $.ajax({
        type: "GET",
        url: "diet.csv",
        dataType: "text",
        success: function (data) { processData(data); }
      });
      function processData(allText) {
        var allLinesArray = allText.split('\n');
        if (allLinesArray.length > 0) {
          var dataPoints1 = [];
          var dataPoints2 = [];
          for (var i = 0; i <= allLinesArray.length - 1; i++) {
            var rowData = allLinesArray[i].split(',');
            if(rowData && rowData.length > 1) {
              if(rowData[3] == "") {} else {
                dataPoints1.push({
                  x: new Date(rowData[0],rowData[1]-1,rowData[2]),
                  y: parseFloat(rowData[3]),
                  indexLabel: rowData[5]
                });
              };
              if(rowData[4] == "") {} else {
                dataPoints2.push({
                  x: new Date(rowData[0],rowData[1]-1,rowData[2]),
                  y: parseFloat(rowData[4]),
                  indexLabel: rowData[6]
                });
              };
            }
          }
          drawChart(dataPoints1,dataPoints2);
        }
      }
      function drawChart(dataPoints1,dataPoints2) {
        var chart = new CanvasJS.Chart("DietChart", {
          height: 280,
          animationEnabled: true,
          animationDuration: 2000,
          zoomEnabled: true,
          title: { text: "体重&体脂肪率", fontSize: 18 },
          legend: { fontSize: 14 },
          axisX: {
            valueFormatString: "DD-MMM YYYY",
            labelAngle: 0,
            labelMaxWidth: 55,
            labelFontSize: 14
          },
          axisY: {
            title: "体重",
            includeZero: false,
            minimum: 20,
            maximum: 100,
            suffix: "kg",
            titleFontSize: 14,
            labelFontSize: 14
          },
          axisY2: {
            title: "体脂肪率",
            includeZero: false,
            minimum: 0,
            maximum: 80,
            suffix: "%",
            titleFontSize: 14,
            labelFontSize: 14
          },
          data: [
            {
              type:"line",
              name:"体重[kg]",
              showInLegend:true,
              markerSize:3,
              dataPoints:dataPoints1
            },
            {
              type:"line",
              name:"体脂肪率[%]",
              axisYType:"secondary",
              showInLegend:true,
              markerSize:3,
              dataPoints:dataPoints2
            }
          ]
        });
        chart.render();
      }
    });
  </script>
  <div id="DietChart" style="width:100%;height:300px;padding-top:20px;"></div>
</div>
</body>
</html>


これで一旦グラフができる。





上記のグラフは「全期間」「過去1年間」「過去3年間」のボタンを追加したものだ。追加方法としては、chart.render以降を下記に書き換えた。


3つのボタンの追加(「全期間」「過去1年間」「過去3年間」)

     :
     :
        chart.render();

        var dpsLength = chart.options.data[0].dataPoints.length;
        var lastDate = chart.options.data[0].dataPoints[dpsLength-1].x;
        var button1 = document.getElementById("setViewport1");
        button1.addEventListener( "click", setViewport1);
        function setViewport1(){
          chart.options.axisX.viewportMinimum = null;
          chart.options.axisX.viewportMaximum = null;
          chart.render();
        }
        var button2 = document.getElementById("setViewport2");
        button2.addEventListener( "click", setViewport2);
        function setViewport2(){
          chart.options.axisX.viewportMinimum = new Date(lastDate.getFullYear()-1,lastDate.getMonth(),lastDate.getDate());
          chart.options.axisX.viewportMaximum = new Date(lastDate.getFullYear(),lastDate.getMonth(),lastDate.getDate());
          chart.render();
        }
        var button3 = document.getElementById("setViewport3");
        button3.addEventListener( "click", setViewport3);
        function setViewport3(){
          chart.options.axisX.viewportMinimum = new Date(lastDate.getFullYear(),lastDate.getMonth()-3,lastDate.getDate());
          chart.options.axisX.viewportMaximum = new Date(lastDate.getFullYear(),lastDate.getMonth(),lastDate.getDate());
          chart.render();
        }
      }
    });
  </script>
  <div><button id="setViewport1" type ="button">全期間</button><button id="setViewport2" type ="button">過去1年間</button><button id="setViewport3" type ="button">過去3ヶ月</button></div>
  <div id="DietChart" style="width:100%;height:300px;padding-top:20px;"></div>
</div>
</body>
</html>


ところが、ChromeやSafariではグラフが表示できない。理由はよくわからないが、headにCanvasJSのバージョン1.7.0のJavaScriptを追加したら表示できるようになった。ただし、3つのボタンに対しては無反応のままだ。


ChromeやSafariで表示させるための仮処置

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>


最後に、体重や体脂肪率に測定データがない日を破線にすることに挑戦。これもChromeやSafariでまだうまく描画できていない。破線をきれいに描画させるには、長期にわたり測定データがない区間についてその開始日と終了日に空のデータを入れておくことだ。





サイトに掲載する際はiframeを使って表示させるのが便利だ。BIGLOBE会員であれば無料の個人ホームページの管理画面からログインし、無料オプションのWebFTPを用いて任意のディレクトリを作成。パソコンからサーバへの転送に関するWebFTPのマニュアルを見ながら、そのディレクトリに、「csvファイル(メモ帳で作成可能)」と「htmlファイル(メモ帳で修正可能)」を転送すればよい。ブログ記事に下記のiframeを書けばよいのだ。


サイトでiframeを使って表示

<iframe src="http://******/diet.html" width="100%" height="350" scrolling="no"></iframe>






にほんブログ村 ブログブログ ブログ活用法へ
さまざまな活用法を読んでみよう!
記事へブログ気持玉 / トラックバック / コメント


続きを見る

トップへ

月別リンク

免責事項: 無断転載はおやめください。当ブログへのリンクはフリーですが、いかなる不利益・損害、期待した効果や実績が得られなかったとしても一切責任を負いませんので、ご自身の責任において行動をお願いします。また、当ブログから他のサイトにリンクをしている場合があります。移動された先のホームページは当方が管理するものでも運営するものでもございません。よって、その内容の真偽につきましても一切責任を負いませんのでご了承下さい。

プロフィール




頑張る父さん こちらからメールをお送りください☆



頑張る父さんの記録帳/BIGLOBEウェブリブログ
文字サイズ:       閉じる