Topic: MDB 5 Bar Chart Update

edharris4 priority asked 1 year ago

I am able to create the initial bar chart on the synchronous request generated by php but the chartInstance.update method is saying it is undefined when I try to update the chart with async data from ajax. I select the new date range in a select form and I pass the returned data (which is in the correct json format) to the chartInstance.update(result); The error is "cannot read properties of undefined: update after the ajax success. My code snippet is below:

const dataBar = $copy; console.log(dataBar); const chartEl = document.getElementById('bar-chart'); new mdb.Chart(chartEl, dataBar); const chartInstance = mdb.Chart.getInstance(chartEl); console.log(chartInstance); $(document).ready(function () { $("#dateSelect").change(function () { var dateSelect = $("#dateSelect").val(); $.ajax({ url: 'includes/ajax_pc_direct_manhours_accrued.php', type: 'post', data: { dateSelect: dateSelect }, dataType: 'json', success: function(result) { console.log(result); console.log(chartInstance); chartInstance.update(result); } }); }); });

Michał Duszak staff answered 1 year ago

Thanks to your link I was able to recreate this chart on my machine. Try rewriting your success method to:

            success: function(result) {

            const labels = result['data']['labels'];

                  datasets: [
                      data: result['data']['datasets'][0]['data'],
                      label: result['data']['datasets'][0]['label'],

enter image description here

edharris4 priority answered 1 year ago

Thank you so much! That works ;) The api documentation is kind of confusing as it doesn't say anything about having to form the update method in this way as the data retrieved from the ajax call is the same data format as the data that was used to initialize the table.

The api documentation only says chartInstance.update(result) and it makes one assume that the datasets would be the same as what was used to initialize the table.

Michał Duszak staff answered 1 year ago

Hello, could you please provide some information for further debugging proccess?

  1. What does the console.log from an ajax call return?
  2. What does the console.log from before an ajax call return?
  3. Could you try using code from the documentation in your project? Here's a snippet with use of async data which works pretty well and looks similiar to your approach.

edharris4 priority commented 1 year ago

HTML and JS logs can be seen here:

edharris4 priority answered 1 year ago

I still haven't been able to access the method to update the graph.

edharris4 priority answered 1 year ago

Upon further inspection of the chartInstance object, the first update method occurs at chartInstance._chart.update();

As a backup, I have manually set the ajax result data as: chartInstance._data = result.

However, after calling this update method, no changes are made to the chart. It just shows the old data.

Please insert min. 20 characters.


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



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Mobile; Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No