How I create a pie chart based on COUNT(php + mysql)?

Question

I have this database. I wanted to generate pie chart based from this database. The pie chart will generate based from the COUNT function. Can you help me to solve this?

Database Structure

Here the code.The main page of my form.

<?php

mysql_connect("localhost","root","") or die("Error!");
mysql_select_db("try_pie_chart");

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIE CHART</title>
</head>

<body>

<form name="count" action="piechart_post.php" method="post">


            <select name="month">

 <option value="01">January</option>
 <option value="02">February</option>
 <option value="03">March</option>
 <option value="04">April</option>
 <option value="05">May</option>
 <option value="06">June</option>
 <option value="07">July</option>
 <option value="08">August</option>
 <option value="09">September</option>
 <option value="10">October</option>
 <option value="11">November</option>
 <option value="12">December</option>
 </select>
 <input type="text" name="year" />
 <input type="submit" name="submit" value="Send" onclick = "<?php $month=$_POST['month'] ?><?php $year=$_POST['year'] ?>"/>

 </form>


</body>
</html>

Here the code for form action. It will give output of COUNT

<?php

mysql_connect("localhost","root","") or die("Error");
mysql_select_db("try_pie_chart");

?>



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIE CHART</title>
</head>

<body>
<?php $month=$_POST['month'] ?><?php $year=$_POST['year'] ?>
<?php
 $result = mysql_query("SELECT COUNT(*) AS total FROM table_details WHERE purpose='COURSES' AND (MONTH(date) LIKE '%$month' AND YEAR(date) LIKE '%$year%')") or die ("Error!");

 $result2 = mysql_query("SELECT COUNT(*) AS total FROM table_details WHERE purpose='BRIEFING' AND (MONTH(date) LIKE '%$month' AND YEAR(date) LIKE '%$year%')") or die ("Error!");

 $result3 = mysql_query("SELECT COUNT(*) AS total FROM table_details WHERE purpose='COMPETITION' AND (MONTH(date) LIKE '%$month' AND YEAR(date) LIKE '%$year%')") or die ("Error!");

 $result4 = mysql_query("SELECT COUNT(*) AS total FROM table_details WHERE purpose='INTERVIEW' AND (MONTH(date) LIKE '%$month' AND YEAR(date) LIKE '%$year%')") or die ("Error!");

$result5 = mysql_query("SELECT COUNT(*) AS total FROM table_details WHERE purpose='OTHERS' AND (MONTH(date) LIKE '%$month' AND YEAR(date) LIKE '%$year%')") or die ("Error!");

$result6 = mysql_query("SELECT COUNT(*) AS total FROM table_details WHERE (MONTH(date) LIKE '%$month' AND YEAR(date) LIKE '%$year%')") or die ("Error!");

?>

 <?php 
 $row=mysql_fetch_array($result);
 $row2=mysql_fetch_array($result2);
  $row3=mysql_fetch_array($result3);
 $row4=mysql_fetch_array($result4);
 $row5=mysql_fetch_array($result5);
 $row6=mysql_fetch_array($result6);

 ?>

  <table width="41%" border="1">
  <tr>
  <td width="8%">BIL</td>
  <td width="42%">PURPOSE</td>
  <td width="50%">TOTAL</td>
  </tr>
  <tr>
   <td>1</td>
   <td>COURSES</td>
  <td><?php echo $row['total'];  ?></td>
  </tr>
  <tr>
   <td>2</td>
   <td>BRIEFING</td>
   <td><?php echo $row2['total'];  ?></td>
    </tr>
    <tr>
   <td>3</td>
   <td>COMPETITION</td>
   <td><?php echo $row3['total'];  ?></td>
    </tr>
    <tr>
    <td>4</td>
    <td>INTERVIEW</td>
    <td><?php echo $row4['total'];  ?></td>
    </tr>
    <tr>
    <td>5</td>
    <td>OTHERS</td>
     <td><?php echo $row5['total'];  ?></td>
    </tr>
     <tr>
    <td colspan="2" align="right">Total Overall</td>
    <td><strong><?php echo $row6['total'];  ?></strong></td>
    </tr>
    </table>



     </body>
     </html>

here is an example of using ajax to get json from php and draw a google chart using javascript — WhiteHat
– WhiteHat, Commented Oct 25, 2016 at 11:40

Jazzzzzz · Accepted Answer · 2016-10-25 08:46:37Z

1

There are plenty of framework available to create chart using php mysql jquery css

Few of them i'm listing here

http://www.chartjs.org/ 
https://developers.google.com/chart/
https://d3js.org/
https://gionkunz.github.io/chartist-js/
https://n3-charts.github.io/line-chart/#/home
http://www.highcharts.com/

You can use one of them which serve your purpose, I'm using chartJs, HighChart and Google Chart, if you want to make more complex chart then you can go for D3 also.

I'm Giving you example how to create chart using highchart.

$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Browser market shares January, 2015 to May, 2015'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33
                }, {
                    name: 'Chrome',
                    y: 24.03
                }, {
                    name: 'Firefox',
                    y: 10.38
                }, {
                    name: 'Safari',
                    y: 4.77
                }, {
                    name: 'Opera',
                    y: 0.91
                }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2
                }]
            }]
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Here i passed data as json array

[{
   name: 'Microsoft Internet Explorer',
   y: 56.33
}, {
    name: 'Chrome',
    y: 24.03
}, {
    name: 'Firefox',
    y: 10.38
}, {
    name: 'Safari',
    y: 4.77
}, {
    name: 'Opera',
    y: 0.91
}, {
    name: 'Proprietary or Undetectable',
    y: 0.2
}]

You can replace this array with your own data, you can convert php array to json using json_encode($your_php_array_goes_here) it will return json formatted array.

edited Oct 25, 2016 at 8:46

answered Oct 25, 2016 at 7:27

Jazzzzzz

1,63316 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Wilson Entering Over a year ago

but how sir? I dont have any basic of Javasript language

Jazzzzzz Over a year ago

please check above code and run it you will get idea how to generate chart, ask me if you need help.

Wilson Entering Over a year ago

sir. i cannot understand. i just understand part where to build the chart, but i dont have any idea to convert the json to php.

Wilson Entering Over a year ago

how to change to percentage to normal number?

Jazzzzzz Over a year ago

what you have tried so far after i written code snippet ?

|

Collectives™ on Stack Overflow

How I create a pie chart based on COUNT(php + mysql)?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related