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

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

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

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

JavaScript

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

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

Q&A

解決済

1回答

1037閲覧

Arduino温度データをChart.jsでチャート化したい

nejimawaso2

総合スコア14

PHP

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

JavaScript

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

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

0グッド

0クリップ

投稿2018/11/13 05:19

編集2018/11/13 05:48

前提・実現したいこと

Arduinoの温度センサから取得したデータをCSVファイルに書き込んで
そのデータを読み込みChart.jsでリアルタイムに表示するプログラムを組もうとしているんですが
Chart.jsにPHPで読み込んだCSVファイルをデータとしてどのように渡せばいいのかわかりません。

教えていただきたいです。
よろしくお願いします。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="myChart"></canvas> <script type="text/javascript" src="../js/moment.js"></script> <script type="text/javascript" src="../js/Chart.js"></script> <script type="text/javascript" src="../js/chartjs-plugin-streaming.js"></script> <script> var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { datasets: [{ data: [] }] }, options: { scales: { xAxes: [{ type: 'realtime' }] }, plugins: { streaming: { duration: 20000, refresh: 1000, delay: 1000, frameRate: 30, pause: false, onRefresh: function(chart) { chart.data.datasets[0].data.push({ x: Date.now(), y: get_data() }); } } } } });

分からないこと

下記のサイトを参考にしたのですがPHPでデータを取得する際,DBから取ってきているので
CSVから読み込む方法が分かりません。
参考にしたサイト

補足情報(FW/ツールのバージョンなど)

PHP,JavaScript,Chart.js

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

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

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

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

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

guest

回答1

0

ベストアンサー

やることはDBだろうがCSVだろうが設定ファイルだろうが同じです。
要はchartjsで利用できる形式のデータを作ったらいいだけです。
PHP側では連想配列を作っていますが、CSVから取得したデータを同じ形式の連想配列にしてあげましょう。
まずはCSVからデータを取得するところから。
CSVからデータを取得するやり方は調べればいくらでも出てきますので、調べてやってみてください。

投稿2018/11/13 05:29

m.ts10806

総合スコア80765

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

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

nejimawaso2

2018/11/13 05:37

CSVからデータを取得する方法は分かるのですが、どのような連想配列をChart.jsのどの部分にどのように渡せばいいのかが分かりません。 ちなみにCSVに落とすデータは 日付,温度です
m.ts10806

2018/11/13 05:42

参考サイトでAjaxでPHPを非同期実行しているというところはご理解されていますか? あと、PHPからデータを持ってきた前提で、モックのような形で静的htmlで「こういう設定でチャートを表示させたい」というところを提示してもらったほうが良いです。 PHPでとってこようがどこからとってこようが、chart.jsに設置できるデータの形式は決まっているわけです。 その形をPHPで作れば良いので。
nejimawaso2

2018/11/13 05:56

今いじっているプログラムを載せたのですが、このプログラムで折れ線グラフを表示できると思います。 get_data関数を使ってajaxでデータを取得するということはわかりますが、PHPでCSVから取得したデータをreturnする時はどのようなかたちで渡せばいいのでしょうか?連想配列だとしたら日付,温度をどのような形で返せばいいのでしょうか? はじめて使うのでよくわかっていませんのですみません。
m.ts10806

2018/11/13 06:12

> どのようなかたちで渡せばいいのでしょうか? コメントでも書いていますが「chart.jsで使える形式」です。 なので、まずは固定データで作ってください。その固定データ部分をPHPで「文字列」として作ります。 その固定データ次第なのでその後どう整形するかは要件次第です。要件は質問者さんが決めるものですので。 json形式の方が扱いやすくはなりますが、それも要件次第です。 参考にされた記事では単にカウントした件数のみを返しているようですしね。
m.ts10806

2018/11/13 06:15

すみません。紛らわしい表現がありました。 > その固定データ部分をPHPで「文字列」として作ります。 PHPから返すのが「文字列」でないと返らないだけで作るのは連想配列でかまいません。連想配列を作ってjson_encode()するとかですね。これは例です。 まずは固定データでグラフを作ってください。 今提示された情報だけだとget_data()関数が設置されていないので他人にグラフは表示できませんので・・
nejimawaso2

2018/11/13 06:43

回答を参考にまたいろいろいじってみます。 ありがとうございました。
m.ts10806

2018/11/13 06:44

解決されたようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問