<html>
<head>
<title>Estadistica</title>
<meta charset="UTF8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chartJS/Chart.min.js"></script>
</head>
<style>
.caja{
margin: auto;
max-width: 250px;
padding: 20px;
border: 1px solid #BDBDBD;
}
.caja{
width: 100%;
padding: 5px;
}
.resultado{
margin: auto;
font-size: 16px;
width: 1000px;
}
</style>
<body>
<div class="caja">
<select onChange="mostrarResultados(this.values);">
<?php
for($i=2000;$i<2020;$i++){
if($i==2015){
echo "<option value=".$i.'"selected>'.$i.'</option>';
}else{
echo "<option value=".$i.'">'.$i.'</option>';
}
}
?>
</select>
</div>
<div clss="resultados"><canvas id="grafico"></canvas></div>
</body>
<script>
$(document).ready(mostrarResultados(2015));
function mostrarResultados(año){
$.ajax({
type:'POST',
url:'controlador/procesar.php',
data:'año='+año,
success:function(data){
var valores=eval(data){
var e=valores[0];
var f=valores[1];
var m=valores[2];
var a=valores[3];
var ma=valores[4];
var j=valores[5];
var jl=valores[6];
var ag=valores[7];
var s=valores[8];
var o=valores[9];
var n=valores[10];
var d=valores[11];
var Datos={
label:['Enero', 'Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
datasets:[{
fillColor:'rgba(91,228,146,0,6)',//Color de las barras
strokeColor: 'rgba(57,194,112,0,7)',//Color del borde de las barras
highlightFill: 'rgba(73,206,180,0,6)',//Color "HOVER" de las barras
highlightStroke: 'rgba(66,196,157,0,7)',//Color "HOVER" del borde de las barras
data:[e,f,m,a,ma,jl,ag,s,o,n,d]
}]
}
}
var contexto= document.getElementById('grafico').getContext('2d');
window.Barra= new Chart(contexto).Bar(Datos,{responsive: true});
}
});
return false;
}
</script>