質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.37%

ボタンクリックでjQueryで描画したグラフを再読込（日付変更）したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,735
Zu_Chan

Zu_Chan

score 14

実現したいこと

カウントアップ、カウントダウンボタンを用いて、グラフに表示する日付の前後を行いたいと考えています。
しかし、カウントアップ後のグラフの描画、更新がうまく行かず、手詰まり状態になってしまいました。
どなたか実装のお力を貸していただけませんか？

開発環境

jQueryのchart.jsを使用。
csvを読み込んでいます。。

ソースファイル

index.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST</title>
    <script type="text/javascript" src="graph.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='style.css' type='text/css'/>
  </head>
  <body>
    <div class="header">
      <h1 class="logo">Raspi LO</h1>
      <div class="nav" id="currentTime"></div>
      <div class="nav" id="currentTemp"></div>
      <div class="nav" id="currentHumidity"></div>
    </div>
    <div class="wrapper">
      <div class="main">
        <div class="box">
          <h2>温度 [℃]</h2>
          <canvas id="temperature" class="graph"></canvas>
        </div>
        <div class="box">
          <h2>湿度 [％]</h2>
          <canvas id="humidity" class="graph"></canvas>
        </div>
      </div>
    </div>

  </body>
</html>

graph.js 

// 1桁の数字を0埋めで2桁にする
var toDoubleDigits = function(num) {
  num += "";
  if (num.length === 1) {
    num = "0" + num;
  }
 return num;
};

// CSV to Array 2D
var csvToArray = function(path) {
  var csvData = new Array;
  var data = new XMLHttpRequest();
  data.open("GET", path, false);
  data.send(null);
  var LF = String.fromCharCode(10);
  var lines = data.responseText.split(LF);
  for (var i = 0; i < lines.length;++i) {
    var cells = lines[i].split(",");
    if( cells.length != 1 ) {
      csvData.push(cells);
    }
  }
  return csvData;
}

var getDateData = function(date, src) {
  var dst = new Array();
  for(var i = 0; i < src.length; i++)
  if (src[i][0].indexOf(date) !== -1) {
    dst.push(src[i]);
  }
  return dst;
};

var arrayT = function(array){
  var arrayT = [];
  for (var i = 0; i < array.length; i++) {
    for (var j = 0; j < array[i].length; j++) {
      (i > 0)? arrayT[j].push(array[i][j]) :arrayT[j] = [array[i][j]];
    }
  }
  return arrayT;
}

var replaceElement = function(array, before, after) {
  for(var i=0; i < array.length; i++){
    array[i] = array[i].replace(before, after);
  }
  return array;
}

var getDate = function(day) {
  var date = new Date();
  date.setDate(date.getDate() + day);
  var year  = date.getFullYear();
  var month = toDoubleDigits(date.getMonth() + 1);
  var day   = toDoubleDigits(date.getDate());
  return String(year) + "-" + String(month) + "-" + String(day);
}

var drawGraph = function(id, today, yesterday, labels){
  var ctx = document.getElementById(id).getContext('2d');

  var line1 = {
    label:'Today',
    data:today,
    fill: false,
    lineTension: 0,
    backgroundColor: "#DE4E33",
    borderColor: "#DE4E33",
    pointHoverBackgroundColor: "#DE4E33",
    pointHoverBorderColor: "#DE4E33",
  };

  var line2 = {
    label:'Yesterday',
    data:yesterday,
    fill: false,
    lineTension: 0,
    backgroundColor: "#97DBF2",
    borderColor: "#97DBF2",
    pointHoverBackgroundColor: "#97DBF2",
    pointHoverBorderColor: "#97DBF2",
  }
  // ラベル(横軸)
  var label = labels;
  var xAxes = [{
    gridLines:{
      color: "#5f5f5f",
    },
    ticks: {
      fontColor: "#aaa",
      fontSize: 12
    }
  }]
  var yAxes = [{
    gridLines:{
      color: "#5f5f5f",
    },
    ticks: {
      fontColor: "#aaa",
      fontSize: 15,
    }
  }]
  var scales = {xAxes, yAxes};
  var legend = {labels:{fontColor:"#eee", fontSize: 15}, position:"bottom"};
  // グラフ全体の設定
  var option = {scales, legend};

  // データの設定
  var config = {
    type: 'line',
    data: { labels: label, datasets: [line1, line2]},
    options: option,

  }
  var myChart = new Chart(ctx, config);

};

window.onload = function () {
  var csvData = csvToArray("data.csv");
  //var today = "2016-12-12 ";
  //var yesterday = "2016-12-11 ";
  var today = getDate(0);
  var yesterday = getDate(-1);
  var dataToday = getDateData(today, csvData);
  var dataTodayT = arrayT(dataToday);
  var label = replaceElement(dataTodayT[0], today, ""); // 0:00, 1:00, 2:00
  var dataYesterday = getDateData(yesterday, csvData);
  var dataYesterdayT = arrayT(dataYesterday);
  drawGraph('temperature', dataTodayT[1], dataYesterdayT[1], label);
  drawGraph('humidity', dataTodayT[2], dataYesterdayT[2], label);
};

style.css 

@charset "UTF-8";
body {
    background: #222;
    color: #fff;
    margin: 0;
    padding: 0;
    line-height: 1;
}
.header {
    text-align: center;
    padding: 0.5em 0.5em 0.5em 0.5em;
    background: #150D0F;
    height: 40px;
}
.logo {
    width: 400px;
    font: 22px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #eee;
    float: left;
}
.nav {
    width: 100px;
    height: 40px;
    padding-top: 5px;
    list-style-type: none;
    text-align: center;
    float: left;
    overflow: hidden;
}
.nav a {
    font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #ba9b89;
    text-decoration: none;
}
.nav:hover {
    background: #36281f;
}
.wrapper {
    clear: left;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
.main {
    width: 100%;
    float: left;
}
h2 {
    border-left: 10px solid #008c00;
    color: #eee;
    padding: 5px 20px;
    font-size:18px;
}
.graph {
    border: solid 1px #666;
    background: #333;
}
.box {
    width: 400px;
    padding-right: 20px;
    float: left;
}

/* スマホ用（画面サイズ450px以下） */

@media screen and (max-width:450px) {
    body {
        font-size: 13px;
    }
    .logo {
        width: 200px;
        float: none;
    }
    .nav {
        display: none;
    }
    .wrapper {
        width: auto;
        padding: 0 10px;
    }
    .main {
        width: auto;
        padding: 0;
        border: none;
    }

    .main{
        float: none;
    }
}

data.csv 

2017-09-23 0:00,21,50,1006,5
2017-09-23 1:00,21,52,1007,6
2017-09-23 2:00,20,52,1008,7
2017-09-23 3:00,21,45,1009,1
2017-09-23 4:00,21,43,1017,1
2017-09-23 5:00,23,46,1016,2
2017-09-23 6:00,24,41,1002,6
2017-09-23 7:00,24,41,1003,2
2017-09-23 8:00,25,61,1002,6
2017-09-23 9:00,26,51,1009,5
2017-09-24 0:00,21,50,1006,5
2017-09-24 1:00,21,52,1007,6
2017-09-24 2:00,20,52,1008,7
2017-09-24 3:00,21,45,1009,1
2017-09-24 4:00,21,43,1017,1
2017-09-24 5:00,23,46,1016,2
2017-09-24 6:00,24,41,1002,6
2017-09-24 7:00,24,41,1003,2
2017-09-24 8:00,25,61,1002,6
2017-09-24 9:00,26,51,1009,5

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

link

checkベストアンサー

0

chart.jsを使ったことがないので使い方など分かりませんが、更新がうまくいかないのでしたらchart.jsの公式から提供されているAPIを利用してうまくいきませんか？ 

var myLineChart = new Chart(ctx, config);

// 値を変更
myLineChart.data.datasets[0].data[2] = 50;
// 表の更新
myLineChart.update();

Chart.js API · GitBook
http://www.chartjs.org/docs/latest/developers/api.html#updateconfig

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る