CODEWITHSUNDEEP
javascriptarraysjsonchart.js
rkcx
rkcx

Reputation: 73

Uncaught TypeError: Cannot create property '_meta' on string

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

Upvotes: 7

Views: 26678

Answers (1)

Patrick Pei
Patrick Pei

Reputation: 447

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.

Upvotes: 19

Related Questions