Chart doesn't refresh after updating JSON data - suggestions? #3101
Unanswered
mickey-vershbow
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
The Issue
I have a stacked bar chart that displays JSON data based on parameters selected by the user. The chart needs to update when the user selects new parameters and hits the "render" button again. The issue is that the chart doesn't refresh on the first click, and only updates if the user hits the "render" button a second time.
My code is designed so that when the user hits the 'render' button, an API call is made using Ajax to get the data, process it, and pass it to the 'generate bar chart' function. On the x-axis, I show a range of numbers, 0 to 100%. On the Y-axis, I show the list of options that the user selected (so the x-axis needs to update on refresh). The series data, displayed in the body of the chart, gives us the percentages for each option. I've included a screenshot of this below.
Here are the troubleshooting steps I've tried:
-- Using callbacks or Promises to tell the 'generate chart' function to wait until the API call is finished
-- Targeting the chart HTML element and destroying it on refresh, dynamically creating a new one each time I render the chart
-- Using the
destroy()
method per the docs, but this just produces a 'cannot read properties of undefined' error.-- Using the
updateSeries
andupdateOptions
functions per the docs, but this would require entirely refactoring my code, and I would like to work within current code design if possible, to remain consistent with the code patterns on the rest of the page.Conclusion
It seems to me that if I clear out the data being sent to the chart, repopulate the data, and then call the
generate chart
function, the chart should show the updated data. However, it just renders again based on the old data. Is the problem that the chart is basically rendering the old instance of the chart, instead of creating a new one? Is there any way I can destroy the old instance and render the new one, rather than having to refactor entirely to use the built-inupdate
methods?Beta Was this translation helpful? Give feedback.
All reactions