JavaScriptはクライアントサイドなので、サーバーにあるMySQLなどのデータを表示するのに少し工夫が必要そうです。データの準備はサーバーサイドにしてもらいたいなーと思いますがみなさんどうしているんですかね??

調べてみたところJavaScriptからPHPが呼べることが分かりました。

ということはPHPからMySQLなどのデータベースと接続してその結果をJavaScriptにレスポンスしてあげればいいじゃん!ということになります。
処理もサーバーサイドで行えます(*´罒`*)ニヒヒ

調べた結果をご紹介します(〃’ω’)

JavaScriptからPHPを実行させる

Google本家のサンプルコードに参考になるコードがありました。
タイトルは”Populating Data Using Server-Side Code”となっていて、まさにServer side codeであるPHPを使う内容の記事です。

記事の序盤でサンプルページの紹介がありますので抜粋しておきますね。

You can use server-side code to acquire data to populate your chart. Your server-side code can load a local file, query a database, or get the data in some other way. The following PHP example demonstrates reading chart data from a local text file when a page is requested. You can copy these files to your own server, if it supports PHP.

訳してみると

チャートを作るためのデータをサーバーサイドのコードから作ることができます。ローカルファイルも使うことができるし、データベースにQueryしてもいいし、他のどんな方法でも可能です。ここで紹介するサンプルプログラムはページが読み込まれるときにローカルファイルを参照するものです。

とのことでした。
サンプルがローカルファイルを読み取るのでここをMySQLにQueryするPHPに変えてあげればOKなはずです(ง°̀ロ°́)ง


どうやってPHPを呼んでデータを受け取るの?

JavaScript内でjQueryのajax()関数を使いURLを送ってそのリスポンスをJSONフォーマットで受け取ります。
URLにPHPのコードを指定してあげれば、PHP内で動かしたMySQLのクエリ結果をリスポンスの形で受け取ることができます。

今回はGoogle Chartsでグラフを表示させることが目的としました。
Google ChartsはJSONフォーマットでテーブルを作製できるようなので、レスポンスをGoogle ChartsのJSONフォーマットにしてあげればこのサンプルプログラムがそのまま使うことができるのでそのようにしたいと思います。

JavaScriptからPHPを呼んでMySQLの結果を表示するソースコード

GoogleのサンプルプログラムからPHPを呼べることがわかったので、MySQLからデータを取得するPHPを作ってJSONフォーマットで応答するコードを作ってみました。

Javascript側のコード

ほぼGoogleのサンプルコードです。呼ぶPHPだけ変えています。

 

PHP側のコード

PHP側のコードはMySQLからデータを取得してJSONフォーマットで返すようにします。レスポンス部分は”echo MakeTable($arryCol, $arryRow);”です。

MySQLに部屋の温度データを保存していたので、その日付と温度をQueryするようになっています。

DBに接続しているのはDbManager.phpでこちらがコードです。localhostで接続していたので、localhostを表す127.0.0.1をhostに設定しています。

ちなみにEncode.phpはこちらです。

動作確認してちゃんと動いているのが確認できました。

動作確認してちゃんと動いているのが確認できました。
JavascriptからPHP経由でMySQLのデータを取得しグラフで表示している様子。

ちょっとデータが適当すぎますが、動作確認には問題ないでしょう(◍•ᴗ•◍)♡ ✧*。


ちなみにグラフはインタラクティブにデータを表示できるJavaScriptの方が良いですね(〃’ω’) PHP側で実装するJpGraphはグラフが画像になってしまうのでちょっと扱いにくかったです。。

まとめ

JavaScriptからPHP経由でMySQLのデータを扱う方法をご紹介しました。用途に応じて検討してみるのもありだと思います!

記事を読んでいただいてありがとうございます。この記事がいいなと思ったら下記のSNSボタンのクリックをお願いします。励みになります😁