Primero, nuestra clase "Charts.php":
<?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;
}
?>
<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() {
//Lineas
$.ajax({
type: 'POST',
url: "grafica-lineas.php",
dataType: "json",
contentType: 'application/json',
async: false,
success: function (result) {
var data = new google.visualization.DataTable(result);
var options = {
title: '',
hAxis: {
title: 'Fecha'
},
vAxis: {
title: 'Total'
},
pointSize: 5,
backgroundColor: { fill: 'transparent' },
'height': 300
};
target = document.getElementById('line-chart');
var chart = new google.visualization.LineChart(target);
chart.draw(data, options);
}
});
}
</script>
<style>
body {
font-family: Verdana;
}
</style>
</head>
<body>
<form id="frmChart" runat="server">
<div>
<div id="line-chart"></div>
</div>
</form>
</body>
</html>
<?php
include ("Charts.php");
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
$chart = new Charts();
//Inicilaizar Columnas
$chart->cols = array();
//Inicializar Filas
$chart->rows = array();
//Agregar columnas
//col1
$chart_column = new ChartColumn();
$chart_column->label = "Fecha";
$chart_column->type = "string";
array_push($chart->cols, $chart_column);
//col2
$chart_column = new ChartColumn();
$chart_column->label = "Abarrotes";
$chart_column->type = "number";
array_push($chart->cols, $chart_column);
//col3 - anotación
$chart_column = new ChartColumn();
$chart_column->role="annotation";
$chart_column->type = "string";
array_push($chart->cols, $chart_column);
//Agregar datos
//01/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "01/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2300.85;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2300.85;
array_push($chart_row->c, $chart_row_value);
array_push($chart->rows, $chart_row);
//02/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "02/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2500;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2500;
array_push($chart_row->c, $chart_row_value);
array_push($chart->rows, $chart_row);
//03/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "03/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 800;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 800;
array_push($chart_row->c, $chart_row_value);
array_push($chart->rows, $chart_row);
//04/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "04/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 0;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 0;
array_push($chart_row->c, $chart_row_value);
array_push($chart->rows, $chart_row);
//05/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "05/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 700;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 700;
array_push($chart_row->c, $chart_row_value);
array_push($chart->rows, $chart_row);
echo json_encode($chart);
?>
Así se ve nuestra gráfica:
No hay comentarios:
Publicar un comentario