Flotcharts con PHP (Gráfica de Pastel)

Hola tyros!

Ahora voy a mostrarles como hacer una gráfica de pastel con Flotcharts y PHP.

Para comenzar, necesitamos crear varias clases. Agregamos, pues, un archivo PHP llamado "FlotCharts.php" con el siguiente código:

<?php
/**
 * Description of FlotCharts
 *
 * @author gabriel.castillo
 */
class PieChart {
    public $series;
}

class LineChart{
    public $series;
}

class BarChart{
    public $categories;
    public $series;
}

class Serie{
    public $label;
    public $color;
    public $data;
}
?>

Luego, agregamos una página PHP llamada "pastel.php", con el siguiente código:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>TyroDeveloper</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>
        <style>
            body {
                font-family: Verdana;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    type: 'POST',
                    url: "flotcharts-pastel.php",
                    dataType: "json",
                    contentType: 'application/json',
                    async: false,
                    success: function (result) {
                        var options = {
                            series: {
                                pie: {
                                    show: true,
                                    radius: 1,
                                    label: {
                                        show: true,
                                        radius: 1,
                                        formatter: function (label, series) {
                                            return Math.round(series.percent) + '%';
                                        },
                                        background: {
                                            opacity: 0.5,
                                            color: '#C0C0C0'
                                        }
                                    }
                                }
                            },
                            legend: {
                                show: true
                            },
                            grid: {
                                hoverable: true
                            }
                        };
                        var data = result.series;
                        $.plot($("#pie-chart"), data, options);
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="frmFlotCharts" runat="server">
            <div id="pie-chart" style="width: 400px; height: 300px; margin: 0 auto"></div>
        </form>
    </body>
</html>

A continuación, agregamos un archivo PHP llamado "flotcharts-pastel.php", con el siguiente código:

<?php

include("FlotCharts.php");
//Crear una instancia de PieChart
$chart = new PieChart();
//Inicializar las Series
$chart->series = array();

//Agregar 20 Fresas
$serie = new Serie();
$serie->label = "Fresas";
$serie->data = 20;
$serie->color = "#FF0000";
array_push($chart->series, $serie);
//Agregar 5 Manzanas
$serie = new Serie();
$serie->label = "Manzanas";
$serie->data = 5;
$serie->color = "#00CC00";
array_push($chart->series, $serie);

//Generar Json
echo json_encode($chart);
?>

Finalmente, así queda nuestra gráfica:

No hay comentarios:

Publicar un comentario