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

by

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.

Leave a comment