Google Chartsで複数種類のグラフを配置する

一つのWebページ上で、複数の異なるグラフを表示したいシーンは少なくありません。

基本的には、描画したいグラフごとに関数を定義し、それぞれをコールバックに指定することで事足ります。

が、描画したいグラフの種類によっては、ロードする際に複数のパッケージを指定するなど、若干の注意を要する箇所もあります。

Google Charts で複数種類のグラフを描画するやり方を、”Timeline”と”Pie Chart”の例で記載します。

描画したいグラフを確認する

まずどの種類のグラフを描画するかを確認します。

というのも、描画するグラフの種類によって、ロードするパッケージが変わってくるからです。

“corechart”パッケージは以下の種類のグラフをカバーしているので、この範囲に収まるのであれば、”corechart”だけでOKです。

• bar（横棒グラフ）
• column（縦棒グラフ）
• line（線グラフ）
• area（面グラフ）
• stepped area（階段状の面グラフ）
• bubble（バブルチャート）
• pie（円グラフ）
• donut（ドーナツグラフ）
• combo（複数グラフの組み合わせ）
• candlestick（ローソク足）
• histogram（ヒストグラム）
• scatter（散布図）

これらのグラフ以外を使用する場合は、ロードするパッケージを複数指定することになります。

グラフに合わせてパッケージをロードする

表示したいグラフが「棒グラフ」と「円グラフ」のように、”corechart”パッケージに収まる範囲であれば、”corechart”をロードするだけで事足ります。

もし”corechart”に含まれないグラフ、例えば”Timelines”などを入れ込みたい場合は次のように複数のパッケージをロードします。

グラフごとに関数を定義する

描画するグラフそれぞれでfunctionを定義し、各々をコールバックに指定します。

例えばTimelineとPie Chartといった2つのグラフを描画したい場合は、コードのアウトラインとしては次のようになります。

ソースコードと実行結果

最後に、定義したグラフをhtmlのbody部に配置します。

ソースコード全体としては次のようになります。

 

上のコードでは次のようなグラフを描画しています。