learnlytics-go/assets/js/chartUtils.js

function barChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
    const canvas = document.getElementById('bar_chart'+id)
    const ctx = canvas.getContext("2d");

    data = data.map((item) => DecimalPrecision.round(item, 2));
    
    // Gradient 
    var gradient = ctx.createLinearGradient(0, 0, 0, 500);
        gradient.addColorStop(0, '#f4a260');
        gradient.addColorStop(1, '#2ec4b6');

    // Data
    var displayData = {
        labels: labels,
        datasets: [
            {
                label: tooltip,
                data: data,
                backgroundColor: gradient,
            }
        ]
    };

    // Options
    var options = {
        responsive: true,
        
        scales: {
            x: {
                display: true,
                text: scale_label_x,
            },
            y: {
                display: true,
                text: scale_label_y,
                beginAtZero: true
            }
        },

        plugins: {
            title: {
                display: true,
                text: title,
                font: {
                    size: 20,
                }
            }  
        },

    };
    
    var config = {
        type: 'bar',
        data: displayData,
        options: options
    };

    new Chart(ctx, config);
}

function barLineChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
    const canvas = document.getElementById('bar_line_chart'+id)
    const ctx = canvas.getContext("2d");

    // Gradient 
    const gradient = ctx.createLinearGradient(0, 0, 0, 500);
        gradient.addColorStop(0, '#f4a260');
        gradient.addColorStop(1, '#2ec4b6');

    const sum = data.reduce((partialSum, a) => partialSum + a, 0);
    const percentage = data.map((item) => DecimalPrecision.round(item/sum*100, 2));
    var percentageTick = 100;
    var percentageTickSize = 20;
    
    // Data
    const displayData = {
        labels: labels,
        datasets: [
            {
                label: "Percentage",
                data: percentage,
                borderColor: '#E0E1DD',
                backgroundColor: '#2ec4b6',
                yAxisID: 'y1',
                type: 'line',
            },
            {
                label: tooltip,
                data: data,
                backgroundColor: gradient,
                yAxisID: 'y',
            },
            
        ]
    };

    // Options
    const options = {
        responsive: true,
        
        scales: {
            x: {
                display: true,
                text: scale_label_x,
            },
            y: {
                display: true,
                text: scale_label_y,
                beginAtZero: true,
                max: Math.max.apply(null, data) + 1,
            },

            y1: {
                display: true,
                position: 'right',
                beginAtZero: true,
                max: percentageTick,
                ticks: {
                    stepSize: percentageTickSize,
                },
            },
        },

        plugins: {
            title: {
                display: true,
                text: title,
                font: {
                    size: 20,
                }
            }  
        },

    };
    
    const config = {
        type: 'bar',
        data: displayData,
        options: options
    };

    let barlinechart = new Chart(ctx, config);
    
    // Actions
    const actions = [
        {
            name: "Toggle Tick",
            handler(chart) {
                if (percentageTick == 100 ) {
                    percentageTick = Math.trunc(Math.max.apply(null, percentage) + 1);
                    percentageTickSize = Math.trunc(percentageTick / 5);
                }
                else {
                    percentageTick = 100;
                    percentageTickSize = 20;
                }
                barlinechart.options.scales.y1.max = percentageTick;
                barlinechart.options.scales.y1.ticks.stepSize = percentageTickSize;
                chart.update();
            }
        }
    ];

    actions.forEach((a, i) => {
        let button = document.createElement("button");
        button.id = "button"+i;
        button.innerText = a.name;
        button.onclick = () => a.handler(barlinechart);
        document.querySelector(".button_row").appendChild(button);
    });
}

function pieChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
    const canvas = document.getElementById('pie_chart'+id)
    const ctx = canvas.getContext("2d");

    // Data
    var displayData = {
        labels: labels,
        datasets: [
            {
                label: tooltip,
                data: data,
                backgroundColor: [
                    '#f4a260',
                    '#e77f7a',
                    '#be6d8e',
                    '#856490',
                    '#4f597b',
                    '#2f4858',
                ],
            }
        ]
    };

    // Options
    var options = {
        responsive: true,
    };
    
    var config = {
        type: 'pie',
        data: displayData,
        options: options
    };

    new Chart(ctx, config);
}

function doughnutChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
    const canvas = document.getElementById('doughnut_chart'+id)
    const ctx = canvas.getContext("2d");

    // Data
    var displayData = {
        labels: labels,
        datasets: [
            {
                label: tooltip,
                data: data,
                backgroundColor: [
                    '#f4a260',
                    '#e77f7a',
                    '#be6d8e',
                    '#856490',
                    '#4f597b',
                    '#2f4858',
                ],
            }
        ]
    };

    // Options
    var options = {
        responsive: true,
    };
    
    var config = {
        type: 'doughnut',
        data: displayData,
        options: options
    };

    new Chart(ctx, config);
}

function polarChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
    const canvas = document.getElementById('polar_chart'+id)
    const ctx = canvas.getContext("2d");

    // Data
    var displayData = {
        labels: labels,
        datasets: [
            {
                label: tooltip,
                data: data,
                backgroundColor: [
                    '#f4a260',
                    '#e77f7a',
                    '#be6d8e',
                    '#856490',
                    '#4f597b',
                    '#2f4858',
                ],
            }
        ]
    };

    // Options
    var options = {
        responsive: true,

        scales: {
            x: {
                border: { display: true },
                grid: {
                    display: false,
                    drawOnChartArea: true,
                    drawTicks: false,
                },
            },
        },
    };
    
    var config = {
        type: 'polarArea',
        data: displayData,
        options: config,
    };

    new Chart(ctx, config);
}