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