Pushing data from json to Chart.js labels and data

Question

I am using the Chart.js lib to make charts.

I have a json array that I am getting from a database.

Here is the console log of it: Data

I need to get the address, speed, and speed limit for every element in the list and use it in a chart.

My current code is as follows:

function ShowChart() {
   var popCanvas = document.getElementById("speedLimitsChart");
   console.dir(speeddata);

   var labels = speeddata.map(function (e) {
       return e.Adress;
   });
   var speed = speeddata.map(function (e) {
       return e.Speed;
   });

   var speedlimits = speeddata.map(function (e) {
       return e.SpeedLimits;
   });

   console.dir(labels);
    var barChart = new Chart(popCanvas, {
        type: 'bar',

        data: {
            datasets: [{
                label: 'Speed',
                data: speed,
                backgroundColor: '#1E90FF'
            }, {
                label: 'Speed Limits',
                data: speedlimits,
                backgroundColor: '#B22222',
                type: 'line'
            }],

        },
        labels: labels 
    });
}

But in the result I only have the first element in my chart, and there are no labels.

Here is the output screen: Chart

I checked speed , speedlimits and labels and all of them have 2 elements. Can you please advise where my problem might be?

Answer 1

I found where is my problem

I need to write labels inside of data

Like this

var barChart = new Chart(popCanvas, {
    type: 'bar',

    data: {
        labels: labels ,
        datasets: [{
            label: 'Speed',
            data: speed,
            backgroundColor: '#1E90FF'
        }, {
            label: 'Speed Limits',
            data: speedlimits,
            backgroundColor: '#B22222',
            type: 'line'
        }],

    },

});