In the table field, I have 3 categories: "not yet, currently, done".
https://i.sstatic.net/bPXRz.png
My goal is to create a pie chart.
This is the model code snippet:
public function select_by_status() {
$sql = "SELECT COUNT(status_laporan) AS jml FROM tp4d GROUP BY status_laporan ORDER BY jml";
$data = $this->db->query($sql);
return $data->row();
}
Below is my controller code for generating the pie chart,
//statistic of reports
$reports = $this->M_reports->select_all();
$index = 0;
foreach ($reports as $value) {
$color = '#' .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)];
$report_status = $this->M_reports->select_by_status();
$data_reports[$index]['value'] = $report_status->jml;
$data_reports[$index]['color'] = $color;
$data_reports[$index]['highlight'] = $color;
$data_reports[$index]['label'] = $value->status_laporan;
$index++;
}
$data['data_reports'] = json_encode($data_reports);
Here is my view code:
<div class="col-lg-6 col-xs-12">
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-briefcase"></i>
<h3 class="box-title">Statistics <small>Report Status Data</small></h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<canvas id="data-reports" style="height:250px"></canvas>
</div>
</div>
</div>
</div>
And this is the script for generating the pie chart:
var pieChartCanvas = $("#data-reports").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = <?php echo $data_reports; ?>;
var pieOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 50,
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
responsive: true,
maintainAspectRatio: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
pieChart.Doughnut(PieData, pieOptions);
The issue I'm facing is that despite having different statuses in the database, the pie chart displays the same content. For example:
https://i.sstatic.net/xE337.png
https://i.sstatic.net/ZAxky.png
How can I ensure that the statistics on the pie chart accurately reflect the data from the database?