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;
}
?>
<!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>
<?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);
?>
No hay comentarios:
Publicar un comentario