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

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

###開発環境
jQueryのchart.jsを使用。
csvを読み込んでいます。。

###ソースファイル
index.html

HTML5
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title>TEST</title>
6    <script type="text/javascript" src="graph.js"></script>
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <link rel='stylesheet' href='style.css' type='text/css'/>
10  </head>
11  <body>
12    <div class="header">
13      <h1 class="logo">Raspi LO</h1>
14      <div class="nav" id="currentTime"></div>
15      <div class="nav" id="currentTemp"></div>
16      <div class="nav" id="currentHumidity"></div>
17    </div>
18    <div class="wrapper">
19      <div class="main">
20        <div class="box">
21          <h2>温度 [℃]</h2>
22          <canvas id="temperature" class="graph"></canvas>
23        </div>
24        <div class="box">
25          <h2>湿度 [％]</h2>
26          <canvas id="humidity" class="graph"></canvas>
27        </div>
28      </div>
29    </div>
30
31  </body>
32</html>

graph.js

JavaScript
1// 1桁の数字を0埋めで2桁にする
2var toDoubleDigits = function(num) {
3  num += "";
4  if (num.length === 1) {
5    num = "0" + num;
6  }
7 return num;
8};
9
10// CSV to Array 2D
11var csvToArray = function(path) {
12  var csvData = new Array;
13  var data = new XMLHttpRequest();
14  data.open("GET", path, false);
15  data.send(null);
16  var LF = String.fromCharCode(10);
17  var lines = data.responseText.split(LF);
18  for (var i = 0; i < lines.length;++i) {
19    var cells = lines[i].split(",");
20    if( cells.length != 1 ) {
21      csvData.push(cells);
22    }
23  }
24  return csvData;
25}
26
27var getDateData = function(date, src) {
28  var dst = new Array();
29  for(var i = 0; i < src.length; i++)
30  if (src[i][0].indexOf(date) !== -1) {
31    dst.push(src[i]);
32  }
33  return dst;
34};
35
36var arrayT = function(array){
37  var arrayT = [];
38  for (var i = 0; i < array.length; i++) {
39    for (var j = 0; j < array[i].length; j++) {
40      (i > 0)? arrayT[j].push(array[i][j]) :arrayT[j] = [array[i][j]];
41    }
42  }
43  return arrayT;
44}
45
46var replaceElement = function(array, before, after) {
47  for(var i=0; i < array.length; i++){
48    array[i] = array[i].replace(before, after);
49  }
50  return array;
51}
52
53var getDate = function(day) {
54  var date = new Date();
55  date.setDate(date.getDate() + day);
56  var year  = date.getFullYear();
57  var month = toDoubleDigits(date.getMonth() + 1);
58  var day   = toDoubleDigits(date.getDate());
59  return String(year) + "-" + String(month) + "-" + String(day);
60}
61
62var drawGraph = function(id, today, yesterday, labels){
63  var ctx = document.getElementById(id).getContext('2d');
64
65  var line1 = {
66    label:'Today',
67    data:today,
68    fill: false,
69    lineTension: 0,
70    backgroundColor: "#DE4E33",
71    borderColor: "#DE4E33",
72    pointHoverBackgroundColor: "#DE4E33",
73    pointHoverBorderColor: "#DE4E33",
74  };
75
76  var line2 = {
77    label:'Yesterday',
78    data:yesterday,
79    fill: false,
80    lineTension: 0,
81    backgroundColor: "#97DBF2",
82    borderColor: "#97DBF2",
83    pointHoverBackgroundColor: "#97DBF2",
84    pointHoverBorderColor: "#97DBF2",
85  }
86  // ラベル(横軸)
87  var label = labels;
88  var xAxes = [{
89    gridLines:{
90      color: "#5f5f5f",
91    },
92    ticks: {
93      fontColor: "#aaa",
94      fontSize: 12
95    }
96  }]
97  var yAxes = [{
98    gridLines:{
99      color: "#5f5f5f",
100    },
101    ticks: {
102      fontColor: "#aaa",
103      fontSize: 15,
104    }
105  }]
106  var scales = {xAxes, yAxes};
107  var legend = {labels:{fontColor:"#eee", fontSize: 15}, position:"bottom"};
108  // グラフ全体の設定
109  var option = {scales, legend};
110
111  // データの設定
112  var config = {
113    type: 'line',
114    data: { labels: label, datasets: [line1, line2]},
115    options: option,
116
117  }
118  var myChart = new Chart(ctx, config);
119
120};
121
122window.onload = function () {
123  var csvData = csvToArray("data.csv");
124  //var today = "2016-12-12 ";
125  //var yesterday = "2016-12-11 ";
126  var today = getDate(0);
127  var yesterday = getDate(-1);
128  var dataToday = getDateData(today, csvData);
129  var dataTodayT = arrayT(dataToday);
130  var label = replaceElement(dataTodayT[0], today, ""); // 0:00, 1:00, 2:00
131  var dataYesterday = getDateData(yesterday, csvData);
132  var dataYesterdayT = arrayT(dataYesterday);
133  drawGraph('temperature', dataTodayT[1], dataYesterdayT[1], label);
134  drawGraph('humidity', dataTodayT[2], dataYesterdayT[2], label);
135};

style.css

CSS
1@charset "UTF-8";
2body {
3	background: #222;
4	color: #fff;
5	margin: 0;
6	padding: 0;
7	line-height: 1;
8}
9.header {
10	text-align: center;
11	padding: 0.5em 0.5em 0.5em 0.5em;
12	background: #150D0F;
13	height: 40px;
14}
15.logo {
16	width: 400px;
17	font: 22px "Trebuchet MS", Arial, Helvetica, sans-serif;
18	color: #eee;
19	float: left;
20}
21.nav {
22	width: 100px;
23	height: 40px;
24	padding-top: 5px;
25	list-style-type: none;
26	text-align: center;
27	float: left;
28	overflow: hidden;
29}
30.nav a {
31	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
32	font-weight: 700;
33	color: #ba9b89;
34	text-decoration: none;
35}
36.nav:hover {
37	background: #36281f;
38}
39.wrapper {
40	clear: left;
41	overflow: hidden;
42	margin: 0 auto;
43	padding: 0;
44}
45.main {
46	width: 100%;
47	float: left;
48}
49h2 {
50	border-left: 10px solid #008c00;
51	color: #eee;
52	padding: 5px 20px;
53    font-size:18px;
54}
55.graph {
56	border: solid 1px #666;
57	background: #333;
58}
59.box {
60	width: 400px;
61	padding-right: 20px;
62	float: left;
63}
64
65/* スマホ用（画面サイズ450px以下） */
66
67@media screen and (max-width:450px) {
68    body {
69        font-size: 13px;
70    }
71    .logo {
72        width: 200px;
73        float: none;
74    }
75    .nav {
76        display: none;
77    }
78    .wrapper {
79        width: auto;
80        padding: 0 10px;
81    }
82    .main {
83        width: auto;
84        padding: 0;
85        border: none;
86    }
87
88    .main{
89        float: none;
90    }
91}

data.csv

TEXT
12017-09-23 0:00,21,50,1006,5
22017-09-23 1:00,21,52,1007,6
32017-09-23 2:00,20,52,1008,7
42017-09-23 3:00,21,45,1009,1
52017-09-23 4:00,21,43,1017,1
62017-09-23 5:00,23,46,1016,2
72017-09-23 6:00,24,41,1002,6
82017-09-23 7:00,24,41,1003,2
92017-09-23 8:00,25,61,1002,6
102017-09-23 9:00,26,51,1009,5
112017-09-24 0:00,21,50,1006,5
122017-09-24 1:00,21,52,1007,6
132017-09-24 2:00,20,52,1008,7
142017-09-24 3:00,21,45,1009,1
152017-09-24 4:00,21,43,1017,1
162017-09-24 5:00,23,46,1016,2
172017-09-24 6:00,24,41,1002,6
182017-09-24 7:00,24,41,1003,2
192017-09-24 8:00,25,61,1002,6
202017-09-24 9:00,26,51,1009,5

行動規範の内容に同意します

回答1件

ベストアンサー

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

javascript
1var myLineChart = new Chart(ctx, config);
2
3// 値を変更
4myLineChart.data.datasets[0].data[2] = 50;
5// 表の更新
6myLineChart.update();

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

投稿2017/09/24 11:53

IShix

総合スコア1724

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

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

関連した質問