Cambiar datos según la fecha en Grafica HighChart Hola a todos,tengo una gráfica en php que muestra los datos de mi base de datos,pero el problema es que mi objetivo es poder clickar en un botón y que puedas seleccionar por ejemplo última hora y que la gráfica cambie y se adecue a ese objetivo.
La gráfica la creo con HifhCharts :
<script type='text/javascript'>
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container33').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
}
}
},
title: {
text: 'Temperaturas'
},
xAxis: {
title: {
text: 'Fecha'
},
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Valor'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false //para permitir exportar la grafica
},
series: [{
name: 'incajones',
data: (function() {
var data = [];
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
data.push([<?php echo $rawdata[$i]["fecha"];?>,<?php echo $rawdata[$i]["acf"];?>]);
<?php } ?>
return data;
})()
},{
name: 'Sala',
data: (function() {
var data = [];
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
data.push([<?php echo $rawdata[$i]["fecha"];?>,<?php echo $rawdata[$i]["Sala"];?>]);
<?php } ?>
return data;
})()
},{
name: 'acc',
data: (function() {
var data = [];
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
data.push([<?php echo $rawdata[$i]["fecha"];?>,<?php echo $rawdata[$i]["acc"];?>]);
<?php } ?>
return data;
})()
},{
name: 'rlf',
data: (function() {
var data = [];
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
data.push([<?php echo $rawdata[$i]["fecha"];?>,<?php echo $rawdata[$i]["rlf"];?>]);
<?php } ?>
return data;
})()
},{
name: 'rlc',
data: (function() {
var data = [];
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
data.push([<?php echo $rawdata[$i]["fecha"];?>,<?php echo $rawdata[$i]["rlc"];?>]);
<?php } ?>
return data;
})()
}]
});
});
});
</script>
Y para mostrar los datos de la base de datos utilizo la siguientes funciones:
function getArraySQL($sql){
//Creamos la conexión
$conexion = AbreBD();
//generamos la consulta
if(!$result = mysqli_query($conexion, $sql)) die();
$rawdata = array();
//guardamos en un array multidimensional todos los datos de la consulta
$i=0;
while($row = mysqli_fetch_array($result))
{
//guardamos en rawdata todos los vectores/filas que nos devuelve la consulta
$rawdata[$i] = $row;
$i++;
}
//Cerramos la base de datos
CierraBD($conexion);
//devolvemos rawdata
return $rawdata;
}
//Sentencia SQL
$sql = "SELECT acf,acc,rlf,rlc,Sala,fecha from tempciti ORDER BY `tempciti`.`fecha`";
//Array Multidimensional
$rawdata = getArraySQL($sql);
//Adaptar el tiempo
for($i=0;$i<count($rawdata);$i++){
$time = $rawdata[$i]["fecha"];
$date = new DateTime($time);
$rawdata[$i]["fecha"]=$date->getTimestamp()*1000;
}
No se si he explicado correctamente mi problema,espero que alguien pueda ayudarme un poco.
Muchas gracias y un saludo a todos.
