How to make a pie chart with database?

Question

How to make a pie chart with database?

Navigation

#1 by (5 votes)

4

I have the table in my database called votes, in it I have id, name and votes, I wanted to plot those values being, name and value in a pie chart or what is the percentage of votes each name

<?
      $SQL1 = "SELECT * FROM votes";

       $result1 = mysql_query($SQL1);
       $data1 = array();
       $data2 = array();
       while ($row = mysql_fetch_array($result1)) {
           $data1[] = $row['name'];
           $data2[] = hexdec($row['votes']);
       } 
?>

<script src="js/grafico/highcharts.js"></script>
<script src="js/grafico/exporting.js"></script>

<script type="text/javascript">
 $(function () {
    $('#graficoPizza').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Grafico Plataforma SMS'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Quantidade enviados',
            data: [
                [<?php echo join("','", $data1) ?>,  <?php echo join(',',$data2) ?>]
            ]
        }]
    });
});
</script>

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

php javascript highcharts

asked by anonymous 25.04.2014 / 21:27

1 answer

Web Api Client in Windows Forms How to save path from a photo taken from the camera in Path or String

score 5 · Accepted Answer

In order for your hightcharts pizza chart to work fine you need your json is being generated correctly by the template

series: [{
    type: 'pie',
    name: 'Browser share',
    data: [
        ['Fulano',   27],
        ['Cicrano',       32],
        ['Beltrano',    25],
        ['Toinho',     12]
    ]
}]

As you can see in cane foot chart this format defines how the information will be displayed in the graphic

In this way you would have to format your data so they can fit the chart.

This should be your php

$SQL1 = "SELECT * FROM votes";

$result1 = mysql_query($SQL1);
$data = array();
while ($row = mysql_fetch_array($result1)) {
   $data[] = array($row['name'], hexdec($row['votes']));
}

$jSon = json_encode($data);

And your js should look like this:

$(function () {
    $('#graficoPizza').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Grafico Plataforma SMS'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Quantidade enviados',
            data: <?php echo $jSon;?>
        }]
    });
});

This solves your problem and you'll have a chart