Appreciation
Your code perfectly works well sourcecodester team and you are the best.
-- -- Dumping data for table `tblsales` -- (1, 'Surf Powder', 1400), (2, 'Mr. Clean Powder', 800), (3, 'Tide Powder', 5052), (4, 'Ariel Powder', 8030); -- -- Indexes for dumped tables -- -- -- Indexes for table `tblsales` -- -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tblsales` --
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Graph</title> </head> <body> <div style="width:30%;hieght:20%;text-align:center"> <h2 class="page-header" >Analytics Sales Report </h2> <div>Product </div> <canvas id="chartjs_pie"></canvas> </div> </body> </html>
Chart.js
Libraries.
<script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<?php if (!$con) { # code... }else{ $sql ="SELECT * FROM tblsales"; $chart_data=""; $productname[] = $row['Product'] ; $sales[] = $row['TotalSales']; } } ?>
<script type="text/javascript"> var ctx = document.getElementById("chartjs_pie").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels:<?php echo json_encode($productname); ?>, datasets: [{ backgroundColor: [ "#5969ff", "#ff407b", "#25d5f2", "#ffc750", "#2ec551", "#7040fa", "#ff004e" ], data:<?php echo json_encode($sales); ?>, }] }, options: { legend: { display: true, position: 'bottom', labels: { fontColor: '#71748d', fontFamily: 'Circular Std Book', fontSize: 14, } }, } }); </script>
<?php if (!$con) { # code... }else{ $sql ="SELECT * FROM tblsales"; $chart_data=""; $productname[] = $row['Product'] ; $sales[] = $row['TotalSales']; } } ?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Graph</title> </head> <body> <div style="width:30%;hieght:20%;text-align:center"> <h2 class="page-header" >Analytics Reports </h2> <div>Product </div> <canvas id="chartjs_pie"></canvas> </div> </body> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <script type="text/javascript"> var ctx = document.getElementById("chartjs_pie").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { datasets: [{ backgroundColor: [ "#5969ff", "#ff407b", "#25d5f2", "#ffc750", "#2ec551", "#7040fa", "#ff004e" ], }] }, options: { legend: { display: true, position: 'bottom', labels: { fontColor: '#71748d', fontFamily: 'Circular Std Book', fontSize: 14, } }, } }); </script> </html>