tyrodeveloper: Highcharts con PHP (Gráfica de Barras Múltiples)

Hola tyros!

Hoy voy a mostrarles como hacer una gráfica de barras múltiples (Agrupadas) con Highcharts y PHP.

Primero nuestra clase "Highcharts.php":


<?php 
/**
 * Description of HighCharts
 *
 * @author gabriel.castillo
 */

class HighCharts{
    public $categories;
    public $data;    
}

class HighChartsPie{
    public $name;
    public $colorByPoint;
    public $data;    
}

class Serie {
    public $name;
    public $color;
    public $data;
}

class Data{
    public $name;
    public $y;
    public $sliced;
    public $selected;
}
?>

A continuación agregamos una página PHP llamada "barras-multiples.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 src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript">

            $(document).ready(function () {

                $.ajax({
                    type: 'POST',
                    url: "highcharts-barras-multiples.php",
                    dataType: "json",
                    contentType: 'application/json',
                    async: false,
                    success: function (result) {
                        var options = {
                            chart: {
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                type: 'column',
                                renderTo: 'bar-chart'
                            },
                            title: {
                                text: ''
                            },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true
                                    },
                                    showInLegend: true
                                }
                            },
                            legend: {
                                enabled: true
                            },
                            xAxis: {
                                categories: result.categories,
                                title: {
                                    text: 'Meses del Año'
                                },
                                crosshair: true
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Total'
                                }
                            },
                            series: result.data
                        };
                        var chart = new Highcharts.Chart(options);
                    }
                });

            });
        </script>
        <style>
            body {
                font-family: Verdana;
            }
        </style>
    </head>
    <body>
        <form id="frmChart" runat="server">
            <div>
                <div id="bar-chart" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
            </div>
        </form>
    </body>
</html>

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


<?php

include("HighCharts.php");
//Creamos una instancia de la clase
$chart = new HighCharts();

//inicializar
$chart->categories = array();
$chart->data = array();

//Agregar categorías
array_push($chart->categories, "Enero");
array_push($chart->categories, "Febrero");

//Serie (Fresas)
$serie = new Serie();
$serie->name = "Fresas";
$serie->color = "#FF0000";
$serie->data = array();
//Enero
$serie_data = new Data();
$serie_data->name="Enero";
$serie_data->y=20;
array_push($serie->data, $serie_data);
//Febrero
$serie_data = new Data();
$serie_data->name="Febrero";
$serie_data->y=12;
array_push($serie->data, $serie_data);
//Agregar la serie
array_push($chart->data, $serie);

//Serie (Manzanas)
$serie = new Serie();
$serie->name = "Manzanas";
$serie->color = "#00FF00";
$serie->data = array();
//Enero
$serie_data = new Data();
$serie_data->name="Enero";
$serie_data->y=5;
array_push($serie->data, $serie_data);
//Febrero
$serie_data = new Data();
$serie_data->name="Febrero";
$serie_data->y=21;
array_push($serie->data, $serie_data);
//Agregar la serie
array_push($chart->data, $serie);

//Serie (Uvas)
$serie = new Serie();
$serie->name = "Uvas";
$serie->color = "#9900CC";
$serie->data = array();
//Enero
$serie_data = new Data();
$serie_data->name="Enero";
$serie_data->y=13;
array_push($serie->data, $serie_data);
//Febrero
$serie_data = new Data();
$serie_data->name="Febrero";
$serie_data->y=12;
array_push($serie->data, $serie_data);
//Agregar la serie
array_push($chart->data, $serie);

echo json_encode($chart);
?>

Así quedará nuestra gráfica:

tyrodeveloper

Páginas

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

1 comentario: