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

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

新規登録して質問してみよう
ただいま回答率
85.50%
phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

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

JavaScript

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

Q&A

解決済

1回答

2711閲覧

morris.js データベースからの日時・時間の取得

van-0215

総合スコア89

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

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

JavaScript

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

0グッド

0クリップ

投稿2016/11/09 03:26

編集2016/11/13 23:06

現在 phpMyadimin を使用してデータベースからの日付と時間を取り出し、morris.jsというグラフ作成ライブラリを使用して、こちらのサイトを参考にグラフを作ろうとしています。

引き出し元のデータベースのテーブルに日付と時間が存在するのですが、それぞれdate型(YY-MM-DD)とTIME型(HH:MM:SS)を使用しています。

それぞれ、'-' と ':' があるためだと思いますが、グラフには以下のように表示されてしまいます。

イメージ説明

これをX軸に日付、Y軸に時間を表示したいと思います。イメージはこちら

参考にテーブルの構造はこちらです。

イメージ説明

DBからデータを確保し、morris.jsを記述したプログラムは、こちらです。

PHP

1echo "<script language='JavaScript'>"; 2echo "var day_data = ["; 3$flag=1; 4while ($data = mysql_fetch_array($quryset)){ 5 if($data[1] == $_SESSION['id']){//ログインユーザとデータの書き込みユーザーが一致したら 6 if($flag==0){//データの区切り , 場合分け 7 echo ","; 8 }else{ 9 $flag=0; 10 } 11 echo "{'date': '" .$data[2] . "', 'time': '" .$data[3] . "'}"; 12 } 13} 14echo "];"; 15echo "new Morris.Line({"; 16echo "element: 'graph',"; 17echo "data: day_data,"; 18echo "xkey: 'date',"; 19echo "ymax: '24',"; 20echo "ymin: '0',"; 21echo "ykeys: ['time'],"; 22echo "labels: ['勉強時間'],"; 23echo "smooth: false,"; 24echo "resize: true"; 25echo "});"; 26echo "</script>";

data[2]:日付
data[3]:時間
は、上記のプログラムでしっかりと確保できているのは確認済みです。

どうすれば、グラフを上記で述べた通りできますか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/11/10 15:32

画像のリンクが切れています。
guest

回答1

0

ベストアンサー

parseTime: false で時間として扱わなくなるようです。

JavaScript

1new Morris.Line( { 2 element: 'chart1' 3 , data: [ 4 { 5 x: '2015-10-12' 6 , y: '12:10:10' 7 }, { 8 x: '2015-10-13' 9 , y: '08:10:10' 10 }, { 11 x: '2015-10-14' 12 , y: '06:10:10' 13 }, { 14 x: '2015-10-14' 15 , y: '24:10:10' 16 } 17 ] 18 , xkey: 'x' 19 , ykeys: ['y'] 20 , labels: ["x"] 21 , ymax: 24 22 , ymin: 0 23 , hideHover: true 24 , hoverCallback: function( index, options, content, row ) { 25 return '<strong>勉強時間<br />' + row.x + '<br />time:' + row.y + '</strong>'; 26 } 27 , parseTime: false 28 , resize: true 29} ); 30```**動くサンプル:**[https://jsfiddle.net/g3t9q4ox/1/](https://jsfiddle.net/g3t9q4ox/1/) 31 32--- 33 34 35【Morris.jsのメモ - Qiita】 36[http://qiita.com/ShingoOikawa/items/af3baef8e96d7c6904bc](http://qiita.com/ShingoOikawa/items/af3baef8e96d7c6904bc) 37 38【morris.js】 39[http://morrisjs.github.io/morris.js/lines.html](http://morrisjs.github.io/morris.js/lines.html)

投稿2016/11/14 16:13

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

van-0215

2016/11/15 02:25

>>kei344 様 回答ありがとうございました。助かりました!!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問