I have been able to draw bar chart, line chart using the static data in Chartjs. But when I try to use the dynamically received data through some api, there are some error message show. My code is:

//'myCanvas' is the id for the canvas, where chart has to be drawn
const CHART = document.getElementById('myCanvas').getContext('2d');
var userData = {};
var dateArray = [];
var dataArray = [];

var barChartData = {
labels: dateArray,
datasets: {
    label: "users",
    fillColor: '#382765',
    data: dataArray
    }
};

var configure = {
    type: 'bar',
    data: barChartData
//I have removed the option part from here to make this post compact
};

window.barChart = new Chart(CHART, configure);
window.barChart.render();
//fillData is called from HTML form submission
function fillData() {
    $.ajax({
        type: 'GET',
        url: '/api/v1/data',
        data: 'start=' + document.getElementById('start').value + '&end=' + document.getElementById('end').value,
        success: function dataGet(data) {
            userData = JSON.parse(data);
            dataParse();
        }
    });
    window.barChart.update();
}

function dataParse() {
    for(var i = 0; i < userData.length; i++){
        dateArray.push(new Date(userData[i].date));
        dataArray.push(userData[i].users);
         }
}

The error I am getting is like this:

Uncaught TypeError: Cannot create property '_meta' on string 'users'
getDatasetMeta @ Chart.min.js:12
(anonymous function) @ Chart.min.js:12
o.each @ Chart.min.js:12
buildOrUpdateControllers @ Chart.min.js:12
initialize @ Chart.min.js:12
t.Controller @ Chart.min.js:12
t @ Chart.min.js:13
(anonymous function) @ main.js:48

Uncaught TypeError: Cannot create property '_meta' on string 'users'
getDatasetMeta @ Chart.min.js:12
isDatasetVisible @ Chart.min.js:12
(anonymous function) @ Chart.min.js:12
o.each @ Chart.min.js:12
getElementAtEvent @ Chart.min.js:12
a @ Chart.min.js:12eventHandler @ Chart.min.js:12
(anonymous function) @ Chart.min.js:12
t.events.(anonymous function) @ Chart.min.js:12

Uncaught TypeError: Cannot read property 'initialize' of undefined

I have been able to draw bar chart, line chart using the static data in Chartjs. But when I try to use the dynamically received data through some api, there are some error message show. My code is:

//'myCanvas' is the id for the canvas, where chart has to be drawn
const CHART = document.getElementById('myCanvas').getContext('2d');
var userData = {};
var dateArray = [];
var dataArray = [];

var barChartData = {
labels: dateArray,
datasets: {
    label: "users",
    fillColor: '#382765',
    data: dataArray
    }
};

var configure = {
    type: 'bar',
    data: barChartData
//I have removed the option part from here to make this post compact
};

window.barChart = new Chart(CHART, configure);
window.barChart.render();
//fillData is called from HTML form submission
function fillData() {
    $.ajax({
        type: 'GET',
        url: '/api/v1/data',
        data: 'start=' + document.getElementById('start').value + '&end=' + document.getElementById('end').value,
        success: function dataGet(data) {
            userData = JSON.parse(data);
            dataParse();
        }
    });
    window.barChart.update();
}

function dataParse() {
    for(var i = 0; i < userData.length; i++){
        dateArray.push(new Date(userData[i].date));
        dataArray.push(userData[i].users);
         }
}

The error I am getting is like this:

Uncaught TypeError: Cannot create property '_meta' on string 'users'
getDatasetMeta @ Chart.min.js:12
(anonymous function) @ Chart.min.js:12
o.each @ Chart.min.js:12
buildOrUpdateControllers @ Chart.min.js:12
initialize @ Chart.min.js:12
t.Controller @ Chart.min.js:12
t @ Chart.min.js:13
(anonymous function) @ main.js:48

Uncaught TypeError: Cannot create property '_meta' on string 'users'
getDatasetMeta @ Chart.min.js:12
isDatasetVisible @ Chart.min.js:12
(anonymous function) @ Chart.min.js:12
o.each @ Chart.min.js:12
getElementAtEvent @ Chart.min.js:12
a @ Chart.min.js:12eventHandler @ Chart.min.js:12
(anonymous function) @ Chart.min.js:12
t.events.(anonymous function) @ Chart.min.js:12

Uncaught TypeError: Cannot read property 'initialize' of undefined

• javascript
• arrays
• json
• chart.js

1 Answer 1

The data you're passing in is inconsistent with the docs

Could you try making datasets an array?

Also, try providing static data initially to allow the chart to initialize with some mock data.