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

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

ただいまの
回答率

90.98%

  • PHP

    17812questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13885questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5835questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3400questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSV

    513questions

    CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

Chart.jsで日付に合わせてグラフをプロットしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 537

Zu_Chan

score 8

実現したいこと

Chart.jsを利用して、csvファイルをグラフ化しています。
現状では、2日以上のデータを比較し、前日のデータが0:00以外からはじまっていると、前日のデータが左詰めにされてしまいます。
例)19:00からデータが始まっていると、19:00のデータが0:00スタートになってしまう。
途中から始まっていても、時間に合わせてプロットができるようにしたいです。

様々な解決方法を考えましたが、行き詰まってしまいます。
助言をいただけたら幸いです。

graph.php

<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<script src="../../js/jquery-1.12.4.min.js"></script>
<script src="../../js/jquery.js"></script>
<script src="../../js/chart.js"></script>
<script src="js/graph.js"></script>
<script src="../../js/galleria-1.5.7.js"></script>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<title></title>
</head>
<body>
    <!--グラフ描画-->

    <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>

    <br>
</body>
</html>

data.csv

2017-10-06 19:00,25,51
2017-10-06 20:00,26,51
2017-10-06 21:00,25,51
2017-10-06 22:00,25,52
2017-10-06 23:00,24,54
2017-10-07 00:00,24,55
2017-10-07 01:00,24,55
2017-10-07 02:00,23,58
2017-10-07 03:00,24,57
2017-10-07 04:00,23,60
2017-10-07 05:00,24,59
2017-10-07 06:00,24,60
2017-10-07 07:00,24,57
2017-10-07 08:00,24,55
2017-10-07 09:00,24,60
2017-10-07 10:00,25,57
2017-10-07 11:00,25,59
count = 0;

// 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:getDate(count),
    data:today,
    fill: false,
    lineTension: 0,
    backgroundColor: "#DE4E33",
    borderColor: "#DE4E33",
    pointHoverBackgroundColor: "#DE4E33",
    pointHoverBorderColor: "#DE4E33",
  };

  var line2 = {
    label:getDate(count -1),
    data:yesterday,
    fill: false,
    lineTension: 0,
    backgroundColor: "#4E33DE",
    borderColor: "#4E33DE",
    pointHoverBackgroundColor: "4E33DE",
    pointHoverBorderColor: "4E33DE",
  }
  // ラベル(横軸)
  var label = labels;
  var xAxes = [{
    gridLines:{
      color: "#5f5f5f",
    },
    ticks: {
      fontColor: "#000",
      fontSize: 12
    }
  }]
  var yAxes = [{
    gridLines:{
      color: "#5f5f5f",
    },
    ticks: {
      fontColor: "#000",
      fontSize: 15,
    }
  }]
  var scales = {xAxes, yAxes};
  var legend = {labels:{fontColor:"#000", 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 count = 0;
  var csvData = csvToArray("csv/data.csv");
  //var today = "2016-12-12 ";
  //var yesterday = "2017-09-23 ";
    var today = getDate(count);
    var yesterday = getDate(count -1);
    var dataToday = getDateData(today, csvData);
    var dataTodayT = arrayT(dataToday);
    var label = replaceElement(dataTodayT[0], today, ""); // 0:00, 1:00, 2:00
    //alert(label);
    var label = ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'];
    //alert(label);
    var dataYesterday = getDateData(yesterday, csvData);
    var dataYesterdayT = arrayT(dataYesterday);

    if(dataYesterday.length > 0){
      drawGraph('temperature', dataTodayT[1], dataYesterdayT[1], label);
      drawGraph('humidity', dataTodayT[2], dataYesterdayT[2], label);
    }
    else {
      drawGraphToday('temperature', dataTodayT[1],label);
      drawGraphToday('humidity', dataTodayT[2],label);
      document.getElementById("next").disabled = "true";
      document.getElementById("back").disabled = "true";
    }
  }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

dataYesterdayTに必要なだけnullを詰めておけばいいように思えるのですが、上手くいきませんでしたか?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/07 15:04

    時間によって詰めるnullの数を変える流れが思いつかない現状でした。

    キャンセル

  • 2017/10/07 15:09

    labelの要素でdataYesterdayを探索して存在しなければ要素を追加すればいいのでは。

    キャンセル

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

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

関連した質問

  • 解決済

    javascriptでカレンダーのカスタマイズ

    カレンダーの表示を以下のスクリプトと他cssコードで表示しています。 これだと、正常にカレンダーは表示されますが、特定の日時にハイライトや、見た目の装飾がこのままだと出来ません。

  • 解決済

    facebook Graph APIで、友達リストの取得

    お世話になります。 こちらのページを参考にswiftでgraph APIを使用して自分のtaggable_friendsを取り出しています。 以下のコードで、問題なく、

  • 解決済

    document.writeを使わず毎月○○日(複数)に指定したhtmlを表示したい

    ★実現したいこと はじめまして 友人が経営する喫茶店のサイトを作っています。 htmlとcssは一生懸命勉強したのですが、jsがちんぷんかんぷんで助言をいただきたいです。

  • 解決済

    Ralis上でAjaxを使ってテーブルを操作するには

    Topicテーブルのnumカラムをブラウザ上で操作したいです。 数字をクリックすると数字が1増えるようにしたいのですがどう書けば良いのかがわかりません。 <div id="

  • 解決済

    動的に追加していく画像選択フォームのプレビュー表示

    追加ボタンを押すと動的に、画像選択フォームを追加していき、画像のプレビューを表示するフォームを作っています。ただ、フォームを新しく動的に追加していくと、当然画像も追加されてプレビュ

  • 解決済

    jQueryでの年計算について

    jQueryでプルダウンの年計算を作っているのですがどうしてもわからないところがあります。 $(function() { for (var i = 2017; i >= 190

  • 解決済

    店ごとにカレンダーの休日の設定

    jQuery UI のお問い合わせフォーム欄に「カレンダー」を実装していますが… 実行したい内容 ・店(店舗A)を選択後、カレンダー通りに、選べるようにしたい。 ・店ごとの休日が異

  • 解決済

    chart.jsにて、円グラフで動的変更ができません。

    chart.jsとangular.jsを利用して、入力した数値を円グラフでアニメーションを利用し表示したいと思います。 線グラフについては実践されている方がおり、その方からソースを

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

  • PHP

    17812questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13885questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5835questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3400questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSV

    513questions

    CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。