I have a line chart that uses years for data points. It all works on page load. Now I made a dropdown to select a year with an ajax call.
Everything is posted correctly and the data is also retrieved correctly. But for some reason when putting the retrieved data inside the data structure the chart shows no data. It loads but its just empty.
If I add the data hardcoded in my JS it works.
What is going wrong?
This is my data inside the success of the ajax call:
var obj = $.parseJSON(data);
var orders = obj[0].aantalarr;
If I do console.log(orders); I get 0,0,0,0,0,0,0,1,2,5,5,5.
Then in the data structure of the chart I do:
data: [orders]
Whichs shows an empty graph.
If I do data: [0,0,0,0,0,0,0,1,2,5,5,5], it works fine.
If I log the var in my console that exact data is shown, same as the one I put in hardcoded. Why is the var not showing?
2 things that seems that can be the issue in my eyes.
First one if orders is already an array you should remove the wrapping array brakcets when passing it to the data like so:
data: orders;
If what is in orders is a big string of numbers seperated by , you have to make it an array chart.js understands instead of an array with 1 big string like so:
data: orders.split(',');