へっぽこITエンジニア@名古屋のブログ

Follow me on GitHub

Google Chartsを使って体重管理

Google Chartsを使って私の体重の推移を観察してみようかと。
家から全然でないので、かなり太ってしました。
目標は60Kgです。

ちなみにソースは以下のように書きました。
データの個所は外部ファイルにしようかな。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['日付', '体重(Kg)'],
      ['21/05/16',  70.8],
      ['21/05/17',  70.7],
    ]);

    var options = {
      title: '私の体重の推移',
      legend: { position: 'bottom' },
      vAxis: {minValue:55,maxValue:75}
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
</script>

<div id="curve_chart" style="width: 100%; height: 500px"></div>

改修その1

getCsvメソッドを追加して、CSVファイルを読み込むように修正しました。

  function getCsv(url){
    //CSVファイルを文字列で取得。
    var txt = new XMLHttpRequest();
    txt.open('get', url, false);
    txt.send();

    //改行ごとに配列化
    var arr = txt.responseText.split('\n');
  
    //1次元配列を2次元配列に変換
    var res = [];
    for(var i = 0; i < arr.length; i++){
      //空白行が出てきた時点で終了
      if(arr[i] == '') break;
  
      //","ごとに配列化
      res[i] = arr[i].split(',');
  
      //体重の値は「"」を削除
      if(res[i][1].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
        res[i][1] = parseFloat(res[i][1].replace('"', ''));
      }
    }
    return res;
  }

  function drawChart() {
    var weight = getCsv("/it/google/weight.csv");

    var data = google.visualization.arrayToDataTable(weight);

    var options = {
      title: '21年の私の体重の推移',
      legend: { position: 'bottom' },
      vAxis: {minValue:55,maxValue:75}
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }

日付のほうは文字列なので、
登録忘れをすると スケールがおかしくなる気がします。

次は、日付型に改修ですかね。

参考サイト

折れ線グラフ【Google Charts入門】- 配当金推移をチャート化する方法

CSVファイルをグラフ化