Topic: MDB 5 Bar Chart Update
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); } }); }); });
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'],
},
],
});
}
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.
Hello, could you please provide some information for further debugging proccess?
- What does the console.log from an ajax call return?
- What does the console.log from before an ajax call return?
- 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 free commented 2 years ago
HTML and JS logs can be seen here:
https://cc.harris-resource.com/hours_chart.php
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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