chart.jsを使ったkintoneレコードの独自グラフ生成をやってみた

kintone_chart.js

/*
chart.jsを使ったkintoneレコードのグラフ化
http://www.messiahworks.com/archives/9005

kintoneデフォルトのグラフ化機能に比べて、これを使うメリット
メリットその１、過去の年月と比較できる(デフォルトだと日付順にしかグラフ化できない）
メリットその２、データのない月(月単位はともかく、売上等など日単位だとレコードが生成されない)でも、初期値の0で表示される

公式サンプル(レーダーチャート)
https://cybozudev.zendesk.com/hc/ja/articles/202982064-Cybozu-CDN%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%AC%E3%83%BC%E3%83%80%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B

*/

(function () {
    "use strict";

   // この処理が動くタイミング(一覧表示のみ)
    var eventsDetailShow = ['app.record.index.show'];

    // 過去３年分の株価(１ヶ月単位)を格納する配列を、0で初期化。
    var stock_data = new Array();
    for(var i=0; i< 3; i++){
        stock_data[i] = new Array();
        for(var j=0; j< 12; j++){
            stock_data[i][j] = 0;
        }
    }
    
    kintone.events.on(eventsDetailShow, function(event){

        var records = event.records;
        
        // kintoneから取得したレコードの株価日付から、格納する添字を決定！
        // データ無い日付があっても、初期値０でグラフに表示する(kintoneデフォルトのグラフではコレが出来ない！)
        for (var i = 0; i < records.length; i++) {
            var date = String(records[i].日付.value);
            var year = date.substr(0, 4)
            var month = Number(date.substr(5, 2)) -1 ;
           
            if(year == "2013") year = 0;
            if(year == "2014") year = 1;
            if(year == "2015") year = 2;
            
            stock_data[year][month] = records[i].株価.value;
        }
  
        // 過去３年分の株価を、月毎に比較表示するグラフ
        var barChartData = {
            labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            datasets : [
                {
                    fillColor : "rgba(220, 220, 220, 0.5)",
                    strokeColor : "rgba(220, 220, 220, 1)",
                    data : stock_data[0] //[11138.66,11559.36,12397.91,13860.86,13774.54,13677.32,13668.32,13388.86,14455.8,14327.94,15661.87,16291.31]
                },                
                {
                    fillColor : "rgba(151, 187, 205, 0.5)",
                    strokeColor : "rgba(151, 187, 205, 1)",
                    data : stock_data[1] // [14914.53,14841.07,14827.83,14304.11,14632.38,15162.1,15620.77,15424.59,16173.52,16413.76,17459.85,17450.77]
                },
                {
                    fillColor : "rgba(100, 100, 100, 0.5)",
                    strokeColor : "rgba(100, 100, 100, 1)",
                    data : stock_data[2] //[17674.39,18797.94,19206.99,19520.01,20563.15,20235.73,20585.24,18890.48]
                }
            ]
        }

        
        // キャンバスにグラフを描写
        var elCanvas = document.getElementById("myChart");
        var myChart = new Chart(elCanvas.getContext("2d")).Bar(barChartData, {
            responsive : false
        });

         
    });
})();