G Suiteも数多くのアップデートを重ねて、標準でできる事が増えてきました。強力なスクリプト環境のおかげで様々な自動化だけでなく、VBAでは難しいインターネットを跨いだ連携や自動化も可能です。

今回はそんな標準機能と外部ライブラリを利用したグラフの生成の1つである「ローソク足チャート」を作ってみようと思います。外部ライブラリといってもGoogle提供のVisualization APIを利用したもので、両者それぞれ用途が少々異なります。目的に応じて作ると良いでしょう。

※ローソク足チャートは、株価や外国為替などの取引データの表示では最もよく利用されている分析用のチャートです

今回使用するスプレッドシートや資料

ソースコード

GAS側コード

  • 今回、動的チャートおよび外部貼り付け用チャートでは、スプレッドシートのdataシートの全てを範囲として含めています。
  • 一方通常貼り付けチャート(makeCandleChart)はチャート範囲として20ポイント分だけを指定しています(全部を指定するともはやローソク足としてはデータが多すぎ)
  • 外部貼り付け用では、Google Sites以外でも貼り付けられるように、.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)を指定しています。
  • 外部貼り付け用および動的チャート用にデータのセットアップ項目を用意し、シートのIDをスクリプトプロパティに格納しています。
  • 通常チャートでは、setDimensionsが使えないので、高さと幅はsetOptionで指定します。
  • 通常チャートでのチャートタイプは、CANDLESTICKを選択しています。

HTML側コード

  • このコードはダイアログ用および外部公開用で共用しています。
  • おまけとして、表示されているグラフを画像としてダウンロード出来るようにダウンロード用のURLを生成して画像として保存にaddListnerしています。
  • 外部ライブラリとして、Visualization APIをロードし、testがまず実行されGAS側のdatamanrevが実行されます。
  • 返り値をOnSuccessで受け取り、移動用のダッシュボードコントロールの追加、レンジフィルターの追加、ロードするチャートオプションの指定を行っています。
  • データは変数のままではなく、dataTableを用意して格納してからChartBuilderに引き渡しています。
  • 今回はチャート移動用にダッシュボードを用意し、その上にチャートを描画している為、よりインタラクティブなグラフを利用出来ます。

実行と結果

今回のスクリプトは全部で3種類のタイプが含まれています。「スプレッドシート上にグラフを表示」「ダイアログに外部ライブラリでグラフを表示」「外部貼り付け用にグラフを表示」となっています。以下の手順でそれぞれを使えるようにしましょう。

セットアップ

スプレッドシートのメニューより「ローソク足」⇒「セットアップ」をクリックします。この実行によって、スプレッドシートのIDがスクリプトプロパティに格納されます。必ず実行するようにしてください。実行することでグラフが表示されるようになります。

ウェブアプリケーションとして導入

こちらは、グラフを外部サイトなどに貼り付ける(Google Siteや自前のブログ等)場合には、この作業が必要です。今回は特にGoogle Site以外にも貼り付けられるように、.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)をオプション追加しています。

  1. スクリプトエディタを開く
  2. メニューより「公開」⇒「ウェブアプリケーションとして導入」をクリック
  3. プロジェクトバージョンを新規作成に。コードを修正する度に新規にしないと結果が反映しないので注意!!
  4. 次のユーザとしてアプリケーションを実行では「自分」を選ぶ(各ユーザ毎にも出来るけれど、スプレッドシートへのアクセス権限も付与してあげないといけない)
  5. アプリケーションにアクセス出来るユーザでは「全員(匿名ユーザを含む)」としておく。G Suiteの設定によっては匿名実行は出来ません。
  6. 更新ボタンを押す。
  7. 現在のウェブアプリケーションのURLを控えておく。最後がexecになっているはず(devはデバッグ用なので外部に貼り付けないように)。

図:ウェブアプリケーションとして導入画面

生成したURLを開くと、doGetの内容が実行されてグラフが表示されます。外部に貼り付ける場合には、iFrameタグで貼り付ける事が可能です。iframeで貼り付ける場合のコードと貼り付けてみた結果は以下の通り。widthだけはグラフの横サイズよりちょっとだけ多めに数値を取って置きます。

図:実際に貼り付けてみたグラフ

動的チャートを表示

動的チャートは上記のグラフをスプレッドシート上のダイアログ内で表示させる為のものです。メニューより「ローソク足」⇒「動的チャートを表示」を実行するだけです。

図:ぐりぐり動くローソク足チャートが表示出来ます。

通常チャート表示

こちらは通常のGoogleスプレッドシートの機能を利用したチャートなので、動的なチャートではありません。スプレッドシートのデータが変わればグラフの内容も変化する点は同じです。メニューより「ローソク足」⇒「通常チャートの表示」で、Graphシートにグラフが生成されます。

ちなみにこのグラフも外部に貼り付ける事が可能です。

  1. 右上の「︙」をクリックして、「グラフを公開」をクリック
  2. ウェブに公開ダイアログにて、埋め込むを選択
  3. 公開ボタンを押す。iframeのタグが表示されるので、コピーしておく
  4. ブログなどにコードを貼り付ける。
  5. もちろん、スプレッドシートのデータが変わるとグラフの中身も変わる。ただし、細かい設定が出来ないので、特に横のサイズで苦労する事も(このブログのように・・・)
  6. グラフのサイズはスプレッドシート上のサイズを変更させてから公開すると、変更が可能です。

図:ウェブに公開オプション

図:実際にウェブに公開で貼り付けたインタラクティブグラフ

図:標準機能で作ったローソク足チャート

関連リンク

共有してみる: