<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawChart(gtitle,glabel,gwidth,gheight,gtype,gstart,gend,gid) {
$.ajax({
url: "http://localhost/reporte/response.php",
type: "GET",
dataType: "JSON",
cache: false,
async: false,
data: {start:gstart,end:gend,id:gid},
success: function(data) {
var len = 0;
if (data.length)
{
len = data.length;
}
if(len > 0)
{
dataarray = [[gtitle,glabel]];
for (var i = 0; i< len; i++) {
dataarray.push([data[i].label,data[i].value]);
}
}
else if(len==0)
{
}
},
error:function(data)
{
}
});
var values = new google.visualization.arrayToDataTable(dataarray);
var options = {title: gtitle,width:gwidth,height:gheight};
switch(gtype){
case 'PieChart':
var chart = new google.visualization.PieChart(document.getElementById('chart'));
break;
case 'LineChart':
var chart = new google.visualization.LineChart(document.getElementById('chart'));
break;
case 'ColumnChart':
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
break;
case 'AreaChart':
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
break;
}
chart.draw(values, options);
}
$(document).ready(function(){
//drawChart('Titulo del Grafico','Tickets',800,800,'PieChart',20141001,20141010,'procedure1');
//drawChart('Titulo del Grafico','Tickets',400,400,'ColumnChart',20141001,20141010,'procedure2');
//drawChart('Titulo del Grafico','Tickets',400,400,'LineChart',20141001,20141010,'procedure3');
drawChart('Titulo del Grafico','Tickets',600,400,'AreaChart',20141001,20141010,'procedure4');
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>