カテゴリー内の他の記事

Chart.jsを使ってダッシュボードを作ってみよう!

フォローする

はじめに

(著者:Cstap 武井 琢治

こんにちは。サイボウズスタートアップスの武井です。
皆さん、グラフは使っていますか?

今回は、kintone標準機能では作れないグラフを、
Cybozu CDNの「Chart.js」というライブラリを使用して実現します。

今回、「Chart.js」ライブラリで拡張するグラフは以下の3つです。

  • 前年同月比グラフ → 製品の月次売上高と前年同月の売上高を並べた棒グラフを作成します。
  • 棒グラフ&折れ線グラフを一つにまとめたグラフ → 月次売上高と試用申込数の推移が分かるグラフを作成します。
  • ドーナツ型グラフ → 製品別の売上高とその割合が分かるグラフを作成します。

また、これらのグラフをカスタマイズビューに表示することで、
ダッシュボードを作成してみます。

完成イメージ

ダッシュボードを作る

アプリの準備

ダッシュボードを表示するためのアプリを作成します。
なお、アプリの作成方法は以下のヘルプをご覧ください。

アプリをはじめから作成する ~FAQアプリを作ってみよう~

今回ご紹介する作成例で必要なアプリは以下の4アプリになります。

  • 「ダッシュボード」アプリ
  • 「製品マスタ」アプリ
  • 「販売実績」アプリ
  • 「試用申し込み管理」アプリ

「ダッシュボード」アプリ



アプリの作成を始めたところになります。 「ダッシュボード」アプリは表示するだけのアプリですので、フォームは何も作らなくてかまいません。

一覧の作成画面です。 レコード一覧の表示形式を「カスタマイズ」にし、以下のHTMLを入力します。

また、以下の通り「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「dashboard.js」「dashboard.css)」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」(またはcss)にしてください。

■PC用のJavaScriptファイル

■PC用のCSSファイル

ここまで設定が済んだら、右上の[アプリを公開]ボタンを押せばこのアプリの設定は完了です。

「製品マスタ」アプリ

次のフォームを作成してください。

フィールドコードフィールドタイプ備考
製品名 文字列(1行) 重複禁止
単価 数値  

 

また、マスタレコードを作成します。
今回は以下のようにしました。

「販売実績」アプリ

次のフォームを作成してください。

フィールドコードフィールドタイプ備考
会社名 文字列(1行)  
日付 日付  
製品名 ルックアップ 「製品マスタ」アプリの製品名フィールドをコピー元のフィールドに指定。
「製品マスタ」アプリの単価フィールドを単価フィールドにコピー。
単価 数値  
販売数 数値  
販売額 計算 計算式に「単価*販売数」

 

また、以下のように、レコードを作成します。

「試用申し込み管理」アプリ

次のフォームを作成してください。

フィールドコードフィールドタイプ備考
会社名 文字列(1行)  
日付 日付  
製品名 ルックアップ 「製品マスタ」アプリの製品名フィールドをコピー元のフィールドに指定。

 

また、以下のように、レコードを作成します。

サンプルプログラム

dashboard.js

dashboard.css

サンプルプログラムの解説

ここからは、Chart.jsとjQRangeSlider特有のコードを中心に解説していきます。
上から見ていきましょう。

ドーナツ型グラフの背景色です。
参考までに、縁取り色のつけ方もソースコードにコメントで載せておきました。

今回は、1つ1つの製品に対してそれぞれ色指定する方法を採用していますが、
製品数が多かったり、製品が頻繁に増減する場合は、
背景色/縁取り色ともにランダムで決定する方法も、コメントに残してありますのでご参考ください。



グラフの表示に必要なcanvas要素を取得しています。
また、グラフを再描画する時は、古いグラフを削除しています。



Chart.jsの本丸です。
type: 'bar'で棒グラフを指定しています。
labelsはグラフ下部の「●月」の表記です。

datasets配列に2つのオブジェクト(当年/前年)を入れることで、
「●月」に対して2つの棒グラフを表示することができます。



scaleLabelはグラフ左右のラベルです。

ticksはグラフ左右の目盛りの指定で、
beginAtZeroはゼロから起算するか、
maxTicksLimitは目盛りの最大分割数、
またcallbackで目盛りに「万円」の単位を付加しています。



tooltipsは、グラフにカーソルを合わせた時の処理です。
当年のグラフなら当年の、前年のグラフなら前年の年月を表示し、「万円」の単位等を付加しています。



こちらはmixedグラフの書き方です。
datasets配列内にそれぞれtypeを設定することで、
「棒グラフ+折れ線グラフ」のようなグラフを描画することができます。

また「yAxisID」を設定することで、
それぞれ異なるscale(左右の目盛り)に対応させることができます。



ドーナツ型グラフを描画することは、
typeを「doughnut」に指定するだけでOKです。


期間指定スライダーを初期化しています。
なお、スライダーはjQuery UIのプラグインを使用しています。



スライダーの初期値です。
最小で本日の5年前、実績値なので、最大は本日です。
月単位での計算であることと、スライダーの挙動等の理由で、それぞれ月初になるように指定しています。



スライダーを動かした時の単位です。
これを指定することで、1ヶ月ごとにスライドできるようになります。



スライダーで常に一年間のスライド幅を保つための設定です。
今回のグラフは、常に「どこかの1年間」の表示になります。



スライダー上部の表示です。
1ヶ月単位なので、「YYYY年M月」表記にしています。



スライダーを動かした時のイベントです。
グラフを生成する関数に対し、引数でスライダーの値を渡しています。



ドーナツ型グラフの値表示です。
普通であれば、カーソルを合わせた際に値が表示されるのですが、
このコードを組み込むと、常に表示できるようになります。

注意事項

Chrome53.0.2785.101 m (64-bit)にて動作を確認しています。
kintoneモバイル版では利用することができません。
処理時間として、
総レコード件数4000件/表示レコード件数1000件(販売実績+試用申し込み)で、
読み込みに5~6秒程度を確認しています。

最後に

便利なグラフが簡単に描画できるChart.jsライブラリのご紹介となりましたが、いかがでしたでしょうか。
Chart.jsのV1とV2では大きく文法が変わってしまった上、 V2以降の日本語情報、またjQRangeSliderの日本語情報も少ないため、皆様のご参考になれば幸甚に存じます。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
せい坊主

お世話になります。
サンプルを見て、無事、3つのグラフが表示できました。
応用として、以下の2点を実現したいと思ってます。

1.販売実績に会社名がありますが、スライダー付近にドロップダウンを
表示して、簡単に会社名で絞り込みは可能でしょうか?

上記については、fetchRecords関数で直接会社名を組み込み動作する事は
できたのですが、ドロップダウンがあれば操作性が良いと思っています。

2.新規で「販売計画」アプリを作成し、会社名、日付、計画値を作成します。
それを、既存の「販売実績」アプリの販売額を比較したいのですが、可能でしょうか?

前年比較とは別に計画比較もできると大変助かります。
よろしくおねがいします。

Avatar
cybozu Development team

せい坊主 様

お世話になっております。
cybozu developer network事務局です。

恐れ入りますが、記事のシナリオと異なる質問につきましては、
cybozu developer コミュニティをご利用いただきますようご案内させていただいております。

お手数おかけしますが、よろしくお願いたします。

Avatar
せい坊主

お世話になります。

返信、ありがとうございました。

自己解決しました。

また今後はコミュニティで質問させていただきます。

 

Avatar
cybozu Development team

せい坊主 様

ご返信ありがとうございます。解決できてなによりです。
今後ともよろしくお願い致します。

Avatar
西原 佑亮

お世話になっております。
サンプル通りに4つのアプリを作ったはずなんですが、いざダッシュボードアプリを起動してみると、いつまでたっても「LOSDING」が終わらず困っております。ChromeでもIE11でも同じ現象となります。現在の環境ではこちらのサンプルは起動できないのでしょうか。どうかよろしくお願いします。

jsファイルやCSSファイルはすべてこちらのサイトで掲載されているものを使用しています。

Avatar
西原 佑亮

追記失礼します。

IE11をデバックで見ても特にエラーは発生してなかったのですが、Chromeのほうをデバックで見るとどうやらロードに失敗しているみたいです。

 

 

Avatar
cybozu Development team

西原 佑亮様

お世話になっております。
cybozu developer network 事務局です。

こちらで動作確認を行いましたが、記事通りの手順で正しく動作することを確認いたしました。

以下の設定が正しいかどうかご確認いただけますでしょうか?

1.「ダッシュボード」アプリの「アプリの設定 > JavaScript / CSSでカスタマイズ」で
 「■PC用のJavaScriptファイル」「■PC用のCSSファイル」が正しく設定されているかどうか

2.「jQDateRangeSlider-min.js」、「iThing-min.css」の正しいファイルがアップロードされているかどうか

 以下のURLの「Clone or download」ボタンをクリックし、「Download ZIP」をクリックするとzipファイルがダウンロードされます。
 https://github.com/takeitakuji/dashboard/tree/ce2448ace26481d176b7d7735f9b05f8f48880c2
 ダウンロードしたzipファイルを解凍すると、「jQDateRangeSlider-min.js」、「iThing-min.css」が入っていますので、
 そちらのファイルを「ダッシュボード」アプリの設定画面でアップロードしてください。

3.「dashboard.js」の「販売実績アプリID」「 試用申し込み管理アプリID」が書き換えられているか

また、デバックの方法は以下の記事が参考になるかと思います。
動かない?そんな時はデバッグをしてみよう!入門編 

 

ログインしてコメントを残してください。