view customize pluginでグラフ表示してみる（Redmine）

// グラフ描画処理
const drawGraph = function(source) {
    const graphLabel = [];
    const graphData = []; 
    // 元データから、グラフ用のデータを作成
    Object.keys(source).forEach(function(key) {
        graphLabel.push(source[key]['name']);
        graphData.push(source[key]['count']);
    });
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var myChart = new Chart(ctx, {
        type: "bar",
        data:{
            labels:graphLabel,
            datasets:[{
                data:graphData
            }]
        },
        options: {
            legend: {
            display: false          // 凡例表示しない
            },
            scales: { 
                yAxes: [{           // y軸設定
                    ticks: {        // 最大値最小値設定
                        min: 0,     // 最小値
                        stepSize: 1 // 軸間隔
                    },
                }],
            }
        }
    });
    // canvasをdocumentに追加
    $('#content').append(canvas);
};

// DOM読み込み後の処理
$(function(){
    // Chart.js読み込み
    var script = document.createElement('script');
    script.src = 'http://[url]/Chart.min.js';
    document.body.appendChild(script);
});

// 画像、関連データ読み込み後の処理
$(window).on("load", function() {
    // プロジェクトのチケット取得
    const url = location.href;
    // グラフ生成用元データ
    const source = {};
    $.ajax({
        type: "GET",
        url: "http://[url]/projects/" + url.substr(url.lastIndexOf('/')+1) + "/issues.json",
        dataType: "json",
        success: function(resp) {
            resp.issues.forEach(function(issue) {
                // 未保持トラッカーの場合、初期データ生成
                if(source[issue['tracker']['id']] === undefined){
                    source[issue['tracker']['id']] = {
                        name: issue['tracker']['name'],
                        count: 0
                    }
                }
                // トラッカー毎のカウント加算
                source[issue['tracker']['id']]['count']++;
            });
            // グラフ描画処理実行
            drawGraph(source);
        }
    });
});