How To Retrieve Data From Mysql To Chart.js

I want to create a pie chart with chart.js, but it can't display the chart. I spent a day trying to solve this problem, but there was no good result. I hope someone can help me. My

Solution 1:

1- get the company name and SUM of total_of_gp_fee group by company.

include_once("connection.php");

//get the company name and total_of_gp_fee of that company.$results_sum = "SELECT cshortcut,SUM(total_of_gp_fee) AS Total FROM gp GROUP BY cshortcut";
$result_sum = mysqli_query($conn, $results_sum) ordie("error to fetch data");
if ($result_sum->num_rows > 0) {
    // output data of each row$labels = $data = '';
    while($row = $result_sum->fetch_assoc()) {

        //get the company name separated by comma for chart labels$labels.= '"' .$row["cshortcut"]. '",';

        //get the total separated by comma for chart data$data.= $row["Total"].',';
    }
}

2- Update the value of labels and data in chart.

labels: [<?phpecho trim($labels);?>],
            datasets: [{
                    label: '# of Votes',
                    data: [<?phpecho trim($data);?>],

3- Add the tooltips for bar chart.

options: {
            scales: {
                yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
            },

            //Add the tooltips
            tooltips: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return "€" + Number(tooltipItem.yLabel);
                        }
                    }
            },
        }

4- Add tooltips for pie chart.

tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var allData = data.datasets[tooltipItem.datasetIndex].data;
                        var tooltipData = allData[tooltipItem.index];
                        var total = 0;
                        for (var i in allData) {
                            total += allData[i];
                        }
                        var tooltipPercentage = Math.round((tooltipData / total) * 100);
                        return"€" + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
                    }
                }
            },

Solution 2:

I think cshortcut holds the name of the comany, so you can do it all with one query:

$results_sum = "SELECT cshortcut,SUM(total_of_gp_fee) AS Total FROM gp GROUP BY cshortcut";

And you will get an array with to elements (cshortcut and Total) for each element in the array

Anyway, you have an error in your JS, you are using a name that doesn 't exist in your data (total_of_gp_fee) because you are using an alias (Total), you should change:

        labels: [<?phpwhile ($b = mysqli_fetch_array($result_cut)) { echo'"' . $b['cshortcut'] . '",';}?>],
        datasets: [{
                label: '# of Votes',
                data: [<?phpwhile ($p = mysqli_fetch_array($sum)) { echo'"' . $p['Total'] . '",';}?>],