Chartjs-ChartJS separate charts per JSON object, and not when hovered over

0👍

Ended up figuring it out, for those interested:

var defaultData = [];
var labels = [];


function loadDashboard() {
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function (data) {
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    console.log(data[key])
                    var val = data[key];
                    var objName = val['title']
                    labels = val.labels;
                    defaultData = val.default;
                    updateChart(labels, defaultData, objName)
                }
            }
        },
        error: function (error_data) {
            console.log("error");
            console.log(error_data)
        }
    });
}


function updateChart(label, data, elementId) {
    var newTable = document.getElementById(elementId).getContext('2d');
    var newElement = new Chart(newTable, {
        type: 'bar',
        data: {
            labels: label,
            datasets: [{
                label: 'Score',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
}


$(document).ready(function() {
    loadDashboard()
});

Leave a comment