Chartjs-Undefined labels in chart.js

by

1👍

✅

The simplest fix is to change these lines of code from this:

hours_date.push(settings.aoData[count]._aData[0]);
hour.push(parseFloat(settings.aoData[count]._aData[1]));

…to this:

hours_date.push(settings.aoData[count]._aData.project_name);
hour.push(parseFloat(settings.aoData[count]._aData.total));

Then you will (or should) get this:

enter image description here

Explanation

Your JSON data source has row data as an array of objects – for example:

[ { "project_name": "AUDI", "total": 118 },
{ "project_name": "BMW", "total": 60 },
{ "project_name": "FALLON", "total": 40 },
{ "project_name": "TOG", "total": 217 } ]

That is why you need to refer to that data using the item names such as _aData.project_name.

The example (you maybe copied from somewhere) was almost certainly using an array of arrays:

[ ["AUDI", 118 ],
[ "BMW", 60 ],
[ "FALLON", 40 ],
[ "TOG", 217 ] ]

So that is why the code in your question uses array indexes [0] and [1].

Final Thought

It’s probably better to avoid using the settings values aoData and _aData as these are internal variable names – and they are a bit cryptic. As a refactoring exercise, you could change this to use the DataTables API – for example rows().data().

That is a bit more work, but results in clearer code, at the end.

Leave a comment