Re-render chart using new data

Topic: Re-render chart using new data

frederickvalone free asked 5 years ago

I cannot find any documentation on how to re-render a bar chart (any chart) when I have updated data to pass to the chart. I want to be able to render a chart with new values based on an api call that is triggered when I select an item from a list. I have already tried updating the data in the object that was used to render the chart initially but this does not re-render the chart using the new data. I looked through the documentation and api guide but found nothing on how to triger an update/render of the chart.

Is it possible to do this with the mdbvue charts? I looked at the vue-chartjs documentation and it looks like it is possible to do this using their api.

Add comment

Mafick free answered 5 years ago

0 0 Best answer

Hello, I am facing the same issue... So the example that i found here code snippet can not be used as template?

Mikołaj Smoleński staff commented 5 years ago

It's the snippet based on jQuery project, so this solution will not find use in Vue. Best regards

Add comment

Jakub Strebeyko staff answered 5 years ago

0 0 Best answer

Hi there <a href="/profile/?id=50368" target="_blank" rel="nofollow">@frederickvalone</a>,

Thanks for reaching out with it!

Since we are using <code>vue-chartjs</code> solutions to make it work, we fell prey to <a href="https://vue-chartjs.org/guide/#troubleshooting" target="_blank" rel="nofollow">vulnerabilities of the original project</a> when it comes to dynamic chart data changes. Worth to note, the wrapper's author tried to reach kudos-worth end of adding reactiveness to otherwise static chart rendering.

Unfortunately, after long hours of investigating, it turned out the feature is, as per the project's docs, not robust at least. Suggested solutions, be it using the enclosed mixins or creating custom watchers, did not work on my end (to be exact, creating a watcher for <code>chartData</code> prop object did work, but still produced errors in the console regarding possible endless loops).

The issue gets submitted as a bug to our taskboard to be resolved. As of know I am assuming there might be some work necessary, a little / a lot of which would've involve pull-requests in the original <code>vue-chartjs</code> project.

I encourage anyone interested in the issue to follow <a href="https://github.com/apertureless/vue-chartjs/issues/487" target="_blank" rel="nofollow">the issue thread</a> to see where that goes and submit their pull requests once the reasons for warnings are known.

With Best Regards,
Kuba

Please insert min. 20 characters.

Hi there @frederickvalone,

Thanks for reaching out with it!

Since we are using vue-chartjs solutions to make it work, we fell prey to vulnerabilities of the original project when it comes to dynamic chart data changes. Worth to note, the wrapper's author tried to reach kudos-worth end of adding reactiveness to otherwise static chart rendering.

Unfortunately, after long hours of investigating, it turned out the feature is, as per the project's docs, not robust at least. Suggested solutions, be it using the enclosed mixins or creating custom watchers, did not work on my end (to be exact, creating a watcher for chartData prop object did work, but still produced errors in the console regarding possible endless loops).

The issue gets submitted as a bug to our taskboard to be resolved. As of know I am assuming there might be some work necessary, a little / a lot of which would've involve pull-requests in the original vue-chartjs project.

I encourage anyone interested in the issue to follow the issue thread to see where that goes and submit their pull requests once the reasons for warnings are known.

With Best Regards, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Vue
MDB Version: 5.1.1
Device: pc
Browser: chrome/FF/Edge
OS: unix/windows7-10
Provided sample code: No
Provided link: No

frederickvalone

64Support score
7Questions 3Answers 0Snippets