MDB 5 Bar Chart Update


Topic: MDB 5 Bar Chart Update

edharris4 asked 3 years 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 3 years 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'];
                console.log(result);

                console.log(chartInstance);
                chartInstance.update({
                  labels,
                  datasets: [
                    {
                      data: result['data']['datasets'][0]['data'],
                      label: result['data']['datasets'][0]['label'],
                    },
                  ],
                });
            }

enter image description here


edharris4 answered 3 years 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.


edharris4 answered 3 years ago

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


Michał Duszak staff answered 3 years 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. https://mdbootstrap.com/snippets/standard/m-duszak/3590641

edharris4 commented 3 years ago

HTML and JS logs can be seen here:

https://cc.harris-resource.com/hours_chart.php


edharris4 answered 3 years 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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Mobile; Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags