Scenario: I want to populate a chart using data fetched by Jquery.
$.getJSON("/dashboard/", function(data, status)
{
var test_data=data
console.log(test_data)
chart.data.datasets[0].data=test_data;
chart.update();
}
Output of console.log(test_data)
data: Array(3)
0: 500
1: 200
2: 50
length: 3
However, the chart is not updating as expected.
The chart is displaying no values and there are no errors.
https://i.sstatic.net/E8WzC.jpg
When I manually input the values as shown below, the chart updates successfully.
$.getJSON("/dashboard/", function(data, status)
{
var test_data=data
console.log(test_data)
chart.data.datasets[0].data=[500,200,50];
chart.update();
}
After setting hard-coded values https://i.sstatic.net/PhdlT.jpg What am I missing here?
Update
The issue was that I was not utilizing the Ajax response in my function. I have updated my code as follows and now it works:
$.getJSON("/dashboard/", function(response, status)
{
chart.data.datasets[0].data=response.data;
chart.update();
}
)