Claris FileMaker でグラフを表示する
Claris FileMaker にはグラフは標準機能で搭載されています。
しかし、ニョキッとアニメーションで伸びる棒グラフや、
マウスカーソールを動かすと出てくるポップオーバーなどの
インタラクティブなグラフは表示できません。
このようなとき以前から JavaScript を使ったグラフを Webビューア 上で表示する手法が使われていました。
そして Claris FileMaker バージョン19からは Webビューア と簡単に連動できるようになりましたので、
FileMaker Pro の Windows / Mac 、FileMaker Go 、そして FileMaker WebDirect でグラフを表示させることも非常に簡単になりました。
Chart.js とは
JavaScript で動作する MITライセンス のグラフライブラリです。
「Samples」をクリックするとたくさんのサンプルを確認することができます。
しかもいろんな種類のグラフがサポートされながらも、設定は非常にシンプルです。
世の中には Chart.js だけでなく他にも同様なライブラリがあり、
下記サイトに比較表がまとめられています。
Chart.js好きの一人がドキュメントを非公式に翻訳したもの
FileMaker ユーザーに Chart.js をおすすめする決定的なポイント
上記の比較表をご覧いただいておわかりの通り、
Chart.js は Canvas を使って表示している点です。
Canvas はとてもかんたんに表示内容を画像化できます。
FileMaker Webビューア を使う際に印刷やPDF出力の問題があります。
Webビューアに表示される状態をそのまま印刷やPDF出力できません。
そこで、Chart.js の Canvas からかんたんに画像を FileMaker に渡します。
FileMaker で印刷やPDF出力する際は Webビューア を含んだレイアウトではなく、
Canvasから渡された画像を含んだレイアウトを使用することで解決できます。
Canvas を使用しないライブラリでは SVG を使うものがほとんどのようです。
高度にインタラクティブなグラフを表示するには SVG の方が有利です。
ですがこれらを勘案すると、FileMaker ユーザーには Canvas を使用する Chart.js がおすすめだと考えています。
Chart.js のセットアップ
Chart.js を使用するには次のかんたんな３つの準備が必要です。
- Chart.js の読み込み
- canvas の設置
- new Chart() の実行
またこれを Claris FileMaker で使用するにはおおまかに次の３つの準備が必要です。
- 最低限のHTMLの作成
- Webビューア にオブジェクト名をつけて設置
- Web ビューアで JavaScript を実行 スクリプトステップ
サンプルファイルの解説
セットアップについては解説が長くなりそうなので、
下記よりサンプルファイルをダウンロードしてください。
サンプルファイルはこちらからダウンロードできます
レイアウト
- 左に Webビューアを設置しています。このWebビューア のオブジェクトの名前に「web」を設定していることが確認できます。スクリプトからこのWebビューアを操作するとき必ずこの名前が必要になります。
- 中央にボタンが２つあります。１つはグラフを新規に表示するもの、もう１つは表示中のグラフの値だけを変更するものです。
- 赤、青、、、橙のフィールドは、グラフに表示する値を入力する数字フィールドです。
- 右のボタンはChart.jsで表示中のグラフの内容をそっくりそのまま画像として、オブジェクトフィールドに格納するものです。
スクリプト
- ８行目は Chart.js で表示データを渡すための汎用的なJSONデータです。これはグラフのタイプが変わってもJSONの形式はほとんど変わらないので、いつも私は標準JSONフォーマットとして使っています。
- １０行目は実際にグラフに表示させたい FileMaker の数字フィールドの値をJSONに反映させています。
- １２〜１５行目はグラフのタイプをJSONに反映させています。いろいろテストするために１つを有効にし、その他を無効化させています。このグラフのタイプは line / radar / polarArea / pie / doughnut / bubble などが使用できるようです。
- ２０行目で chart.js を読み込んでいます。事前に chartJsテーブルに格納してある JavaScript をWebビューアで実行しています。
- ２２行目で 動作開始させるための JavaScript を変数に格納しています。可変するグラフ数値に関してハードコードせずに __FM_JSON_PLACEHOLDER__ とあとで置換しやすい文字を入れています。
- ２３行目では、実際のグラフ数値のJSONを置換しています。
- ２４行目で実行
- 「グラフ表示」スクリプトで書き直す方法だけでなく、グラフの設定値のみを変更することで、変更箇所のみがアニメーションで変化するので見やすいです。
- ８行目で上書きするデータのJSONを作成しています。
- １０行目で作成済みのデータを上書きして、更新をするような JavaScript を実行しています。
- 画像化するスクリプトはかんたんで、chart.js の機能ではなく、JavaScript 標準の機能を使っています。
- ７行目で実行する JavaScript を書いています。
FileMaker.PerformScript を実行し、第２引数には canvas のbase64Encode の結果を設定しています。 - ８行目でJavaScript を実行しています。結果の受け取りは別の「returnPng」スクリプトになりますので、このスクリプトはこれが最後の行になります。
- 「getPng」スクリプトを実行し、その中のFileMaker.PerformScript()がWebビューア内で実行されたことにより、 JavaScript から呼び戻されるスクリプトがこの「returnPng」スクリプトです。
- ７行目では、引数に入っている toDataURL の結果から base64Encode 部分のみを取り出し、FileMaker の Base64Decode 関数で png ファイルを生成しています。
詳細な設定を確認する
複数のグラフを重ね合わせたり、グラフの細かい設定オプションが Chart.js にはたくさんあります。
下記サイトやググってみてもたくさんでてくると思います。
Chart.js 公式ドキュメント
https://www.chartjs.org/docs/latest/
日本語話者へのChart.jsの普及を目的として、Chart.js好きの一人がドキュメントを非公式に翻訳したもの
https://misc.0o0o.org/chartjs-doc-ja/