Chartjs-How can I put queried data (via post) on my jquery chart?

by

2👍

✅

Since $ajax requests are sent asynchronously, unless you set async:false , I think you need to drawChart once you get an response.

Something like :

function drawChart(chartData){
    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {

        type: 'doughnut',
        data: {
            labels:['Pending', 'Approved', 'Paid', 'Blocked', 'Cancelled'],
            datasets: [
                {
                    data: chartData,
                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }
            ]
        },
        options: {
            responsive: true
        }
    });
}
$(document).ready(function(){

    $.ajax({
    url: '../fetch/ft-invoice-breakdown.php',
    type: 'POST',
    success: function(msg){
        drawChart(msg);  //Call this method on successful data retrieval with msg as parameter 
    }
    });


});

Leave a comment