Tengo el siguiente inconveniente, estoy intentando graficar en HighCharts usando datos en formato json
, pero al momento de ejecutar el código no se visualiza nada, la pantalla queda en blanco, para realizar dicha acción usé php
para la lectura del archivo json
de la siguiente manera:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tráfico mensual</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#tiempoReal').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function() {
<?php
$contenido = file_get_contents("datos.json");
$contenido = $contenido;
$datos = json_decode($contenido, true);
$hay = count($datos["sensores"]);
$sensores = $datos["sensores"];
?>
// set up the updating of the chart each second
var google = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = <?php
foreach($sensores as $se){
echo "$se[valor]";
}
?>
google.addPoint([x, y], true, true);
}, 2000);
}
}
},
title: {
text: 'Distancia Actualizada segundo a segundo'
},
subtitle:{
text: 'Tiempo Real'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Distancia'
},
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: false
},
exporting: {
enabled: false
},
series: [{
name: 'Google.com',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})()
}]
});
});
});
</script>
</head>
<body>
<div style="border-top:1px solid #CDCDCD;margin:10px;padding:0;clear:both;"></div>
<!-- div que contendrá la gráfica a tiempo real -->
<div id="tiempoReal" style="height: 400px; margin: 0 auto;"></div>
dicho el código php
en un aparte si funciona yo lo probé pero no entiendo cual es la razón por la cual no me permite tomar los datos, por cierto, este el archivo datos.json:
{
"sensores": [
{
"id": "1",
"nombre": "infrarrojo",
"valor": "22.5"
},
{
"id": "2",
"nombre": "infrarrojo",
"valor": "30"
},
{
"id": "3",
"nombre": "infrarrojo",
"valor": "16.5"
},
{
"id": "4",
"nombre": "infrarrojo",
"valor": "22.5"
},
{
"id": "5",
"nombre": "infrarrojo",
"valor": "30"
},
{
"id": "6",
"nombre": "infrarrojo",
"valor": "22.5"
},
{
"id": "7",
"nombre": "infrarrojo",
"valor": "30"
}
]
}