Highcharts con PHP (Gráfica de Barras)

Hola tyros!

Este día quiero mostrarles como se hace una gráfica de barras con Highcharts y PHP.

Como ya es costumbre, 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;
}
?>

Ahora, agregamos una página PHP llamada "barras-simples.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-simples.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: {
                                pointFormat: '{series.name}: <b>{point.y}</b>'
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true
                                    },
                                    showInLegend: true
                                }
                            },
                            legend: {
                                enabled: false
                            },
                            xAxis: {
                                categories: result.categories,
                                title: {
                                    text: 'Frutas'
                                }
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Total'
                                }
                            },
                            series: [result]
                        };
                        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>

Despues, agregamos un archivo PHP llamado "highcharts-barras-simples.php", con el siguiente código:

<?php

include("HighCharts.php");

$chart = new HighCharts();

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

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

//Agregar 20 Fresas
$chart_column = new Data();
$chart_column->name = "Fresas";
$chart_column->y = 20;
$chart_column->color = "#FF0000";
array_push($chart->data, $chart_column);
//Agregar 5 Manzanas
$chart_column = new Data();
$chart_column->name = "Manzanas";
$chart_column->y = 5;
$chart_column->color = "#00FF00";
array_push($chart->data, $chart_column);


echo json_encode($chart);

?>

Así se ve nuestra gráfica:

No hay comentarios:

Publicar un comentario