ブログにも埋め込めるGoogle スプレッドシートのグラフの使い方

GoogleのWebベースのオフィススイート　Gスイート　の中の一つ　

Googleスプレッドシートの紹介をしたいと思います。

GスイートはGoogleドライブ内でのサービスでなので、「スプレッドシート」以外の「ドキュメント」、「スライド」、「Gmail」など他のGスイート群との連携も取れて便利なのが特徴ですが、その中でもスプレッドシートのグラフに限定して使い方を説明します。

とても簡単にグラフが作成出来て表示の見た目の変更も簡単、そしてGoogleドライブの成せる技なのでしょうか完成したグラフを簡単に自分のブログやHPに乗せることが出来てしまいます。

画像としてHPに埋め込む事ができ、元のデータを変更すると埋め込んだ画像も自動で変更されるので、ブログ以外にも天候などの日々変わるデータの表示などにも使えます。

index
スプレッドシートとグラフを表示する
スプレッドシートで使えるグラフの種類
数値が入力されてない空欄を補完して線をつなげる
グラフの　最小値　最大値　を変更
グラフのグリッド表示を変更
折れ線グラフのラインの表示変更
スプレッドシートのグラフをブログに掲載する方法
まとめ

スプレッドシートのグラフを表示する

血圧の計測記録です。これをグラフにします。

グラフにするエリアを選択しますTime以外を選択しました。

[Ctrl]を押しながら選択で追加選択できます。

メニューバーの［挿入］> グラフ　を選択します。

グラフが生成されました。

右側に表示されたグラフエディタでグラフの表示を変更出来ます。

スプレッドシートで使えるグラフの種類

グラフの種類を選べます。

グラフ例：

積み上げ縦棒グラフ

3D円グラフ

レーダーチャート

散布図

その他に株価のロウソク足チャートやマップチャート、組織図などたくさん種類があります。

今回は折れ線グラフを選びます。

関連記事 ⇨Googleスプレッドシートで棒グラフを作成する方法

数値が入力されてない空欄を補完して線をつなげる

血圧測定の数値が入ってない空白の枠があると、折れ線グラフがつながらず途切れてしまっています。

数値が入力されてない空欄があるため

グラフの線が繋がってません

この空欄を補完して線を繋げたい場合は、

カスタマイズ　>　グラフの種類　の　[null値を表示]をチェックします。

[null値を表示]をチェックすると数値が入力されてない枠を補完してくれます。

補完されてグラフの線が繋がりました。

グラフの　最小値　最大値　を変更

グラフの下、50以下が数値のとして無駄なので、表示範囲を変更します。

カスタマイズ > 縦軸を選びます。

最小値に50と入力しました。

一番下の値が50に変更されました。

グラフのグリッド表示を変更

カスタマイズ > グリッド線　

横軸を選んで、
　
主グリッドラインの数を　自動から　7　に
準グリッドラインの数を 6 に変更しました。

日付が増えてグリッドの数も日の数と同じになりました。

今度は縦軸を選びます

血圧の数値なので高血圧の目安　130　は表示したい。

主グリッドラインの数を自動から　6　に
準グリッドラインの数を　1　に変更しました。　

縦のグリッドも増えました。130の数値が表示されました。

折れ線グラフのラインの表示変更

ラインの色を変更

脈拍は血圧値よりも目立たない色に変えたいので。

カスタマイズ > 系列

「午前の脈拍」を選択して　色を地味な色に変更しました。
「午後の脈拍」も同じように変更しました。

脈拍の下の2本の線の色が変わりました。

ラインのポイントを変更

数値を測った場所が、わかりやすいようにポイントを表示します。

ポイントの形を　
午前は　●
午後は　▲

にします。

カスタマイズ > 系列

「午前の最高値」を選んで、ポイントのサイズを 4px ポイントの形を　●Circle　にしました。

ポイントのサイズはドロップダウンで数値を選べますが、直接数値を入力できます。

他のラインも同じ手順で変更しました。

後は　グラフのタイトルなどを変更すれば完成です。

スプレッドシートのグラフをブログに掲載する方法

googleスプレッドシートのグラフはブログなどのHPに乗せることが出来ます。手順を紹介します。

グラフの右上のメニューから[グラフを公開]を選びます。

「埋め込む」を選択するとHTMLのコードが表示されます。

これをコピーして自分のブログやHPのHTMLに貼り付けることができます。

「インタラクティブ」を「画像」変更しました。
ブログやHPに表示されるグラフは、画像になります。

「変更が加えられたときに自動的に再公開する」にチェックを入れると元のスプレッドシートの数値を変えると、ブログに載せた画像のグラフも変わります。

下のグラフは生成されたドキュメントをこのブログのHTMLに実際に貼り付けたグラフです。

生成されたHTMLのコードを貼り付けるだけでブログにスプレッドシートのグラフを埋め込む事ができました。

グラフをドラッグ・アンド・ドロップしてみると画像になってるのが、
わかると思います。

ブログに埋め込んだグラフ

元のスプレッドシートを変更すると、このブログに埋め込んでいるグラフも変わってしまうのでブログに載せるスプレッドシートのファイルは別に用意して普段使っているファイルとは分けたほうが良いでしょう。

※Googleスプレッドシートは自動保存で便利ですが、意図しないタイミングで保存されてしまうことも。

まとめ

グラフ作成からブログに埋め込むところまで紹介しました。簡単に操作できて、機能も過不足なく使い勝手も良いと思います。

googleスプレッドシートは、googleのオフィススイート、Gススイートの中の表計算ソフトです。
マイクロソフトのExcelのように使えますが、これがすべて無料で使えるのはすごいです。

googleドライブ内でのサービスでなので、googleの他のサービスとの連携も取れるので非常に便利。

ぜひ使ってみてはどうでしょうか？