Hoy les voy a mostrar como crear una gráfica de barras con PHP y Flotcharts.
Para comenzar, agregaremos una clase 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;
}
?>
<!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>
<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-simples.php",
dataType: "json",
contentType: 'application/json',
async: false,
success: function (result) {
var options = {
series: {
bars: {show: true}
},
bars: {
align: "center",
barWidth: 0.5
},
xaxis: {
ticks: result.categories,
axisLabel: 'Productos'
},
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>
<?php
include("FlotCharts.php");
$chart = new BarChart();
//Inicializar categorías
$chart->categories = array();
array_push($chart->categories, array(0, "Fresas"));
array_push($chart->categories, array(1, "Manzanas"));
array_push($chart->categories, array(2, "Uvas"));
//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($chart->series, $serie);
//Agregar Serie
$serie = new Serie();
$serie->label = "Manzanas";
$serie->color = "#00CC00";
$serie->data = array();
array_push($serie->data, array(1, 5));
array_push($chart->series, $serie);
//Agregar Serie
$serie = new Serie();
$serie->label = "Uvas";
$serie->color = "#9900CC";
$serie->data = array();
array_push($serie->data, array(2, 13));
array_push($chart->series, $serie);
//Generar Json
echo json_encode($chart);
?>
No hay comentarios:
Publicar un comentario