Google Chartsを使ってグラフをWebで表示する

2026年6月10日

はじめに

以前、温度データと照度データをラズベリーパイからGoogleのスプレッドシートに送信し、それをノーコードのGlideアプリケーションで見やすくする、ということを試しました。ノーコードでWebアプリを作る方法はとても簡単なのですが、「自前のWebページ上にIoTのデータをグラフとして表示したい」となると、どうすればいいのか気になったので調べてみました。

その結果、Google Chartsという機能を使えばWebページに簡単にグラフを表示できることが分かったので、本記事ではその使い方を紹介します。昔からあるツールのため知っている方には今更な内容かもしれませんが、比較的新しい解説記事が見当たらなかったため、改めて整理しました。

Google Chartsとは

Google Chartsの概要

Google Chartsとは、Webサイト上でグラフや図を表示するための機能です。基本的な使い方やサンプルコードは、すべて以下の本家サイトにまとまっています。本家の情報を直接確認したい方は、こちらのリンクからどうぞ。

https://developers.google.com/chart

以下では、Google Chartsで作成できるグラフをいくつか紹介します。コードはすべて本家サイトからのコピーですが、ラズベリーパイ上のWebサーバーで動作確認しています。動作確認環境は以下のとおりです。

  • Webサーバー：Raspberry Pi 3B + Lighttpd
  • ブラウザ：Google Chrome 90.0.4430.93

Google Chartsで作成できる主なグラフの種類

Google Chartsでは、以下のような主要なグラフを簡単に作成できます。

ラインチャート

Google Chartsで作成したラインチャートの例

コンボチャート

Google Chartsで作成したコンボチャートの例

パイチャート

Google Chartsで作成したパイチャートの例

バーチャート

Google Chartsで作成したバーチャートの例

カラムチャート

Google Chartsで作成したカラムチャートの例

ゲージチャート

Google Chartsで作成したゲージチャートの例

ここまで主なグラフを紹介しましたが、Google Chartsにはガントチャートやツリーマップのような、意外なラインナップも揃っています。上記以外のグラフをお探しの方は、Google Chartsの本家サイトを確認してみてください。

Google Chartsを自分のWebページに組み込む3つのステップ

Google Chartsは、グラフの種類を選ぶ→サンプルコードを自分のページに組み込む→JSFiddleで動作を確認する、という3つのステップで使えるようになります。

1. 作成したいグラフの種類をChart Galleryで探す

課題：Google Chartsで作成できるグラフの種類が多く、目的のグラフがどれに当たるのか分かりにくい。
解決策：本家サイトのChart Galleryから、作りたいイメージに近いグラフを探す。

最初に、使いたいグラフの形式を本家サイトのGuideメニューから探します。

Google Charts本家サイトのGuideメニュー画面

以下のChart Galleryのページを見ると、どんなグラフになるのかイメージしやすくなっています。

Google ChartsのChart Galleryページ

2. サンプルコードを自分のWebページに組み込む

課題：サンプルコードをそのまま使っても、自分のデータに合わせたグラフにならない。
解決策：サンプルコードをコピーしたうえで、データやオプションの変数を少しずつ書き換えていく。

使いたいグラフが決まったら、右側の目次から「Creating Material ***」のようなページを探してクリックします。

Google Chartsの「Creating Material」ページの目次

このページに、サンプルとなるグラフとそのソースコードが掲載されています。

Google Chartsのサンプルグラフとソースコードの表示画面

サンプルコードを自分のWebページのHTMLファイルにコピーし、データやラベルなどの変数を少しずつ書き換えながら、期待するグラフに仕上げていきます。

3. JSFiddleで動作を確認する

課題：自分のWebサーバーに反映する前に、グラフの見た目や動作を手早く確認したい。
解決策：本家サイトのExamplesページにある「Code it yourself on JSFiddle」を使い、HTML/CSS/JavaScriptをブラウザ上で試す。

JSFiddleを使うと、自分のサーバーにアップロードしなくてもブラウザ上でコードを編集しながらグラフの動作を確認できます。コードを少しずつ調整したいときに便利なので、ぜひ活用してみてください。

JSFiddle上でGoogle Chartsのサンプルコードを編集・確認する画面

まとめ：自前のWebページにグラフを表示するならGoogle Chartsが手軽

本記事で紹介した内容をまとめます。

  • Google Chartsを使えば、Webページ上にラインチャート・パイチャート・ゲージチャートなど多彩なグラフを表示できる
  • Chart Galleryから作りたいグラフを探し、サンプルコードをコピーして変数を書き換えるだけで利用できる
  • JSFiddleを使えば、自分のサーバーに反映する前にブラウザ上で動作を確認できる

ラズベリーパイなどで収集したIoTデータを、ノーコードツールではなく自前のWebページで可視化したい場合には、Google Chartsを試してみてはいかがでしょうか。

GCP,Raspberry Pigoogle charts