busco ayuda con unas graficas en tiempo real con highcharts. Son mas de dos graficas en la misma pagina. El error es que me salen ambos puntos en la misma grafica.
<!-- 1grafico -->
<div class="container" id="container" name="1" style="min-width: 400px; height: 250px; margin: 0 auto">
<div class="row">
<div class="col-sm-4">
<script>
$(function (){
$(document).ready(function () {
var ultimox;
var ultimoy;
$.ajax({
url: "conexion/conexion_temp.php",
type: 'get',
success: function(DatosRecuperados) {
$.each(DatosRecuperados, function(i,o){
if (o.x) {DatosRecuperados[i].x = parseInt(o.x);}
if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
});
setx(DatosRecuperados[(DatosRecuperados.length)-1].x);
sety(DatosRecuperados[(DatosRecuperados.length)-1].y);
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
}
}
},
title: {
text: 'TEMPERATURA EN TIEMPO REAL'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 200
},
yAxis: {
title: {
text: 'ESCALA'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
spline: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
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: 'Datos En VIVO', data: DatosRecuperados}]
});
}});
});
setInterval(function () {
$.get( "conexion/conexion_temp.php?Consultar=1", function( UltimosDatos ) {
var varlocalx=parseFloat(UltimosDatos[0].x);
var varlocaly=parseFloat(UltimosDatos[0].y);
if((getx()!=varlocalx)&&(gety()==varlocaly)){
series.addPoint([varlocalx, varlocaly], true, true);
setx(varlocalx);
sety(varlocaly);
}
});}, 1000); //delay
function getx(){return ultimox;}
function gety(){return ultimoy;}
function setx(x){ultimox=x;}
function sety(y){ultimoy=y;}
});
</script>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
</div>
<!-- 2grafico -->
<div class="container" id="container1" name="2" style="min-width: 400px; height: 250px; margin: 0 auto">
<div class="row">
<div class="col-sm-4">
<script>
$(function (){
$(document).ready(function () {
var ultimox1;
var ultimoy1;
$.ajax({
url: "conexion/conexion_hum.php",
type: 'get',
success: function(DatosRecuperados) {
$.each(DatosRecuperados, function(i,o){
if (o.x) {DatosRecuperados[i].x = parseInt(o.x);}
if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
});
setx(DatosRecuperados[(DatosRecuperados.length)-1].x);
sety(DatosRecuperados[(DatosRecuperados.length)-1].y);
Highcharts.chart('container1', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
}
}
},
title: {
text: 'HUMEDAD EN TIEMPO REAL'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 200
},
yAxis: {
title: {
text: 'ESCALA'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
spline: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
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: 'Datos En VIVO', data: DatosRecuperados}]
});
}});
});
setInterval(function () {
$.get( "conexion/conexion_hum.php?Consultar=1", function( UltimosDatos ) {
var varlocalx1=parseFloat(UltimosDatos[0].x);
var varlocaly1=parseFloat(UltimosDatos[0].y);
if((getx()!=varlocalx1)&&(gety()==varlocaly1)){
series.addPoint([varlocalx1, varlocaly1], true, true);
setx(varlocalx1);
sety(varlocaly1);
}
});}, 1000); //delay
function getx(){return ultimox1;}
function gety(){return ultimoy1;}
function setx(x){ultimox1=x;}
function sety(y){ultimoy1=y;}
});
</script>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
</div>