[Chartjs]-Chart.js ajax pushing another dataset always "undefined"

by

1👍

✅

The issue is, you are defining your datasets (dts1 and dts2) as an array. They should be an object, like so …

var dts1 = {
    label: "Abfall gesamt",
    data: Abfall_gesamt,
};
var dts2 = {
    label: "Abfall schadstoffhaltiger",
    data: Abfall_schadstoff,
};

and then, when generating the chart, set datasets value as …

datasets: [dts1]

ᴅᴇᴍᴏ

const CHART = document.getElementById("lineChart");

var Abfall_gesamt = [1, 2, 3];
var Abfall_schadstoff = [4, 5, 6]

var dts1 = {
    label: "Abfall gesamt",
    data: Abfall_gesamt,
    backgroundColor: 'rgba(255, 0, 0, 0.2)'
};

var dts2 = {
    label: "Abfall schadstoffhaltiger",
    data: Abfall_schadstoff,
    backgroundColor: 'rgba(0, 0, 255, 0.2)'
};

var lineChart = new Chart(CHART, {
    type: 'line',
    data: {
        labels: ['Jahr', 'Mahr', 'Kadr'],
        datasets: [dts1]
    },
    options: {
        responsive: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    stepSize: 1
                }
            }]
        }
    }
});

function myFunction() {
    //lineChart.data.datasets[0].data = Abfall_schadstoff;
    lineChart.data.datasets.push(dts2);
    lineChart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button id="add" onclick="myFunction()">Add Dataset</button>
<canvas id="lineChart" height="190"></canvas>

Leave a comment