chartjs & asp.net: Cannot read property 'labels' of undefined

Question

I have been through all the posts regarding this issue yet I can not fix it.

My chartjs line chart gets created fine. I am trying to test updating it (adding data) but i'm stuck on the chart.data.labels.push(labels) as it states the object is undefined in the console. Yet on the console, the line before, I write the id of the object and it is correct so it has the ref.

Any thoughts?

Chart is created fine

$(function () {
    LoadChart();
});

function LoadChart() {
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['9:30', '9:31', '9:32', '9:33', '9:34', '9:35'],
            datasets: [{
                label: 'RSI',
                data: [12, 19, 3, 5, 2, 3],
                borderWidth: 1
            }]
        },
        options: {
           title: {
                display: true,
                text: 'Custom Chart Title'
            }
        }
    });
}

Error When trying to update the chart

$.connection.redisHub.client.addData = function (chartID, labels, data) {
    var chart = document.getElementById(chartID);
    console.log("chart: " + chart.id);
    chart.data.labels.push(labels);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

Console Output You can see it correctly writes 'chart: myChart' to the console showing we have the object ref. correct.

asp code calling the js function (all works well here)

string[] labels = { "9:36", "9:37" };
int[] data = { 9, 10 };
Clients.All.addData("myChart", labels, data);

html : all is well here

<div class="col-sm-8">
    <canvas id="myChart" width="400" height="200"></canvas>
</div>

Thank you in advance

Check this out https://stackoverflow.com/questions/31706577/cannot-read-property-labels-of-undefined — LinkedListT, Mar 03 '20 at 21:11
yes i was through that post, his error was regarding the order in which he creates his initial chart. This is different as I already have my initial chart created correctly, and am now trying to 'add' data to it, and i have the object ref on the line before. I did my diligence in searching prior posts, thanks though — MX313, Mar 03 '20 at 21:15
ok, can you add a console.log(labels) in var chart = document.getElementById(chartID); console.log("chart: " + chart.id); chart.data.labels.push(labels); — LinkedListT, Mar 03 '20 at 21:16
yes will try that and report thank u... labels is my v of data passed, do you mean chart.data.labels — MX313, Mar 03 '20 at 21:18
console.log(labels) outputs my data passed correctly: Array(2) 0: "9:36" 1: "9:37" length: 2 & same error for console.log(chart.data.labels); — MX313, Mar 03 '20 at 21:21

score 1 · Accepted Answer · answered Mar 04 '20 at 11:29

var chart = document.getElementById(chartID); will return the canvas element, which is not an instance of Chart.js, so all of the subsequent code is invalid.

You need to use myChart from the LoadChart() function as this is a Chart.js instance (returned at instantiation). The simplest way to do this is to move the variable definition to a higher scope so that it is available to your update function.

Without knowing how your code is structured it's difficult to give a working example, but here's a simplistic example of what I mean:

var myChart;

$(function () {
    LoadChart();
});

function LoadChart() {
    var ctx = document.getElementById('myChart');
    myChart = new Chart(ctx, {
        type: 'line',
    ...
}

$.connection.redisHub.client.addData = function (chartID, labels, data) {
    myChart.data.labels.push(labels);
    ...
}

This did it! However if I have multiple charts, say myChart1, myChart2... how can I pass the chartID to select the chart I want in addData function? Thank you! — MX313, Mar 04 '20 at 13:25
@MX313 Assuming that `chartID` is already being passed as the `id` attribute of the `canvas` element (based on your code) then you could perhaps store the chart references in an array, e.g. `var charts = [];` and then `charts["myChart"] = new Chart...`. Then access the correct chart via `charts[chartID].data...`. — timclutton, Mar 04 '20 at 13:31

chartjs & asp.net: Cannot read property 'labels' of undefined

1 Answers1