Chart.js - parsing Object Array

Question

Chart.js version - 3.8.0 (latest)

Hi all

Losing my mind with this at the moment. I have been able to successfully display the chart once. Since then it is failing to render and I have no idea why.

I have built an object array prior (counts lines in multiple csv files) to declaring the chart options and then passed this array in according to the examples on the chart js website.

I have output to console to ensure that the data is being loaded correctly and everything looks ok. Could someone please cast an eye over the code below and point out anything obvious?

const data = YTDTable; 

var ctx1 = document.getElementById('YTD').getContext('2d');

var myChart1 = new Chart(ctx1, {
type: 'bar',
data: {
    datasets: [{
        data: data,
        label: "Tickets to Date"
    }]
},
options: {
    parsing: {
        xAxisKey: 'month',
        yAxisKey: 'count'
    }
},
    });

This is the dataset output of console.log(myChart1.data) which is executed after the above codeblock:

{
    "datasets": [
        {
            "data": [
                {
                    "month": "January",
                    "count": 1629
                },
                {
                    "month": "February",
                    "count": 1832
                },
                {
                    "month": "April",
                    "count": 1626
                },
                {
                    "month": "May",
                    "count": 2034
                },
                {
                    "month": "March",
                    "count": 1802
                },
                {
                    "month": "June",
                    "count": 1585
                }
            ],
            "label": "Test"
        }
    ],
    "labels": []
}

I just don't understand why the above code isn't working. Any help is much appreciated

The chart output on screen: chart image - can't embed images yet...

I'd say you have too many properties in your data. Other examples suggest it should look like data: [40, 47, 44, 38, 27, 31, 25], or in your case data: [1629, 1832, 1626...] — K Scandrett
– K Scandrett, Commented Jul 21, 2022 at 9:04
According to the examples on chartjs.org this should be fine: type: 'bar', data: {datasets: [{ data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}] }] }, options: {parsing: {xAxisKey: 'id',yAxisKey: 'nested.value'} } — Leighton James
– Leighton James, Commented Jul 21, 2022 at 9:06
I'm suspicious of whether that's the case for two reasons: 1, it's not working for you and 2) how would the library know which data point to graph - month or count? Maybe that should work but I've never seen it done that way. Perhaps an example to reference stackoverflow.com/a/73054451/1544886 — K Scandrett
– K Scandrett, Commented Jul 21, 2022 at 9:09
That's what is confusing me, all the data did display properly but for some reason it has since stopped — Leighton James
– Leighton James, Commented Jul 21, 2022 at 9:10

Leighton James · Accepted Answer · 2022-07-22 08:43:48Z

1

OK, SO

I figured out what the problem was. The code does work. It just isn't rendering it straight away for some reason. If I resize the window it draws it to screen....

Oh well. Can fix that. Thanks for looking

UPDATE

I have identified the cause for the delay in the drawing of the chart and decide to update the answer in case anyone has a similar problem.

My chart code appeared to be executing before the data collected in YTDTable had finished. II have now removed the code block responsible for the data collection from the javascript file and placed it in a script block in the index page instead.

This causes the data collection to execute long before the chart code executes.

edited Jul 22, 2022 at 8:43

answered Jul 21, 2022 at 12:19

Leighton James

234 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Chart.js - parsing Object Array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related