Ver versión para ASP.Net
Para este ejemplo, vamos a necesitar una versión PHP de nuestra clase "Charts" que habíamos diseñado en C#, aquí se las muestro:
<?php
/**
* Clase para generar Json aceptable por Google Charts
*
* @author gabriel.castillo / tyrodeveloper
*/
class Charts {
//put your code here
public $cols;
public $rows;
}
class ChartColumn {
public $id;
public $label;
public $pattern;
public $type;
public $role;
}
class ChartRow {
public $c;
}
class ChartRowValue {
public $v;
public $f;
}
?>
<?php
include ("Charts.php");
//Creamos una nueva instancia de la clase Charts
$chart = new Charts();
//inicializamos las columnas y renglones
$chart->cols = array();
$chart->rows = array();
//agregar columnas
//col1
$chart_column = new ChartColumn();
$chart_column->id = "";
$chart_column->label = "Tipo";
$chart_column->pattern = "";
$chart_column->type = "string";
array_push($chart->cols, $chart_column); //col1
//col2
$chart_column = new ChartColumn();
$chart_column->id = "";
$chart_column->label = "Total";
$chart_column->pattern = "";
$chart_column->type = "number";
array_push($chart->cols, $chart_column); //col2
//Agregar datos
//Agregar 20 Fresas
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "Fresas";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 20;
array_push($chart_row->c, $chart_row_value);
array_push($chart->rows, $chart_row);
//Agregar 5 Manzanas
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "Manzanas";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 5;
array_push($chart_row->c, $chart_row_value);
array_push($chart->rows, $chart_row);
echo json_encode($chart);
?>
Luego, agregamos una página PHP, con el siguiente código:
<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.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//Pastel
$.ajax({
type: 'POST',
url: "grafica-pastel.php",
dataType: "json",
contentType: 'application/json',
async: false,
success: function (result) {
var data = new google.visualization.DataTable(result);
var options = {
title: '',
hAxis: {
title: 'Tipo'
},
vAxis: {
title: 'Total'
},
pointSize: 5,
backgroundColor: { fill: 'transparent' },
'height': 300
};
target = document.getElementById('pie-chart');
var chart = new google.visualization.PieChart(target);
chart.draw(data, options);
}
});
}
</script>
<style>
body {
font-family: Verdana;
}
</style>
</head>
<body>
<form id="frmChart" runat="server">
<div>
<div id="pie-chart"></div>
</div>
</form>
</body>
</html>
Así se vería nuestra gráfica:
No hay comentarios:
Publicar un comentario