Flotcharts con PHP (Gráfica de Barras Múltiples)

Hola tyros!

Ahora les mostraré como crear una gráfica de barras múltiples Flotcharts y PHP.

Primero, agregamos una clase PHP llamada "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;
}
?>

Ahora, agregamos una página PHP llamada "barras-multiples.php"

<!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="http://www.jqueryflottutorial.com/js/flot/jquery.flot.axislabels.js"></script>
        <script type="text/javascript" src="http://www.pikemere.co.uk/blog/js/jquery.flot.orderBars.js"></script>
        <style>
            body {
                font-family: Verdana;
            }
            #tooltip {
                position: absolute;
                display: none;
                border: 1px solid #fdd;
                padding: 2px;
                background-color: #fee;
                opacity: 0.80;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    type: 'POST',
                    url: "flotcharts-barras-multiples.php",
                    dataType: "json",
                    contentType: 'application/json',
                    async: false,
                    success: function (result) {
                        var options = {
                            series: {
                                bars: {
                                    show: true,
                                    align: "center",
                                    barWidth: 0.1,
                                    order: 1
                                }
                            },
                            xaxis: {
                                ticks: result.categories,
                                autoscaleMargin: .10,
                                axisLabel: 'Meses del año'
                            },
                            yaxis: {
                                axisLabel: "Total"
                            },
                            legend: {
                                show: true
                            },
                            grid: {
                                hoverable: true,
                                clickable: true
                            }
                        };
                        var data = result.series;
                        $.plot($("#bar-chart"), data, options);
                        //Configurar tooltip
                        $("#bar-chart").bind("plothover", function (event, pos, item) {
                            if (item) {
                                var x = item.datapoint[0].toFixed(2),
                                        y = item.datapoint[1].toFixed(2);
                                //Obtener fecha
                                $("#tooltip").html("<b>" + item.series.label + "</b> = " + y)
                                        .css({top: item.pageY + 5, left: item.pageX + 5})
                                        .fadeIn(200);
                            } else {
                                $("#tooltip").hide();
                            }

                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="frmFlotCharts" runat="server">
            <div id="bar-chart" style="width: 650px; height: 400px; margin: 0 auto"></div>
            <div id="tooltip"></div>
        </form>
    </body>
</html>

Para finalizar, agregamos un archivo PHP llamado "flotcharts-barras-multiples.php", con el siguiente código:

<?php

include("FlotCharts.php");

$chart = new BarChart();
//Inicializar categorías
$chart->categories = array();
array_push($chart->categories, array(0, "Enero"));
array_push($chart->categories, array(1, "Febrero"));

//Inicializar Series
$chart->series = array();

//Agregar Serie
$serie = new Serie();
$serie->label = "Fresas";
$serie->color = "#FF0000";
$serie->data = array();
array_push($serie->data, array(0, 20));
array_push($serie->data, array(1, 12));
array_push($chart->series, $serie);

//Agregar Serie
$serie = new Serie();
$serie->label = "Manzanas";
$serie->color = "#00CC00";
$serie->data = array();
array_push($serie->data, array(0, 5));
array_push($serie->data, array(1, 21));
array_push($chart->series, $serie);

//Agregar Serie
$serie = new Serie();
$serie->label = "Uvas";
$serie->color = "#9900CC";
$serie->data = array();
array_push($serie->data, array(0, 13));
array_push($serie->data, array(1, 12));
array_push($chart->series, $serie);

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

Así queda nuestra gráfica:

No hay comentarios:

Publicar un comentario