[Google Charts] JSONファイルを読み込んでグラフを描画

投稿者: | 2021年1月28日

前頁Google Charts でTool Tipをカスタマイズで描画したグラフは、データ部分をコードに直接書いていました。

このデータを外部から取得できるようにすれば、汎用性が高まりそうです。

今回は、データをJSONファイルから取得できるように改良してみます。

データの準備

まず、読み込む対象のデータをjsonファイル形式で準備します。

ファイル名は、”sample.json” とします。

“cols”はカラム情報を、”rows”はデータ情報を表します。”v”は値を意味します。”f”は表示フォーマットを指しますが、今回は使用しないので全てnullとしています。

コードの修正

作成したデータを読み込むために、コードを修正します。

元となるコードは、前頁Google Charts でTool Tipをカスタマイズで作成したコードです。

主にデータ取得部分を改変します。また、JSONの読み込みにはajaxを使用する為、必要なライブラリも追加でロードしています。

ファイル名は、”index.html” です。

 

ファイルの配置とApacheの起動

先に書いたように、JSONの読み込みにajaxを使いますので、Webサーバが必要です。

今回はXAMPPを使用しますので、XAMPPのhtdocsフォルダに、作成した”sample.json” と “index.html” を配置します。

XAMPPコントロールパネルから、Apacheを起動。

動作確認

ブラウザのURLバーに、次のアドレスを入力しページを開きます。

http://localhost/index.html

グラフが描画されました。

参考ページ

今回のコード改変には、下記のサイトを参考にさせていただきました。

https://so-zou.jp/web-app/tech/web-api/google/chart/interactive/data-table.htm

https://developers.google.com/chart/interactive/docs/roles#javascript-literal-notation

https://techlearn.hatenablog.com/entry/2015/08/30/171102