AJAX - AJAX configurar actualizacion de Datos

   
Vista:

AJAX configurar actualizacion de Datos

Publicado por Santiago (8 intervenciones) el 22/08/2015 06:50:46
Estimados,

Estoy graficando con Highcharts, de maravilla. El JS llama al values.php que me trae la temperatura y la fecha de mi base de datos MySQL.

El problema es el siguiente. Uds me podrian ayudar a integrarlo con AJAX con el fin de poder graficar de manera automatica en tiempo real?

Cualquier link, significativo, me serviria o el consejo de los de experiencia!

GRACIAS!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
$(function() {
	//Highcharts MySQL y PHP
 
	var Tiempo = [];
	var valor = [];
	var switch1 = true;
	$.get('values.php', function(data) {
 
		data = data.split(' -/- ');
		for (var i in data) {
			if (switch1 == true) {
				Tiempo.push(data[i]);
				switch1 = false;
			} else {
				valor.push(parseFloat(data[i]));
				switch1 = true;
			}
 
		}
		Tiempo.pop();
 
		$('#chart').highcharts({
			chart : {
				type : 'spline', backgroundColor:'transparent', defaultSeriesType: 'bar'
			},
			title : {
				text : 'Tweetmotica'
			},
			subtitle : {
				text : 'Temperatura del Hogar'
			},
			xAxis : {
				title : {
					text : 'Tiempo'
				},
				categories : Tiempo
			},
			yAxis : {
				title : {
					text : 'Temperatura'
				},
				labels : {
					formatter : function() {
						return this.value + ' Temp.'
					}
				}
			},
			tooltip : {
				crosshairs : true,
				shared : true,
				valueSuffix : ''
			},
			plotOptions : {
				spline : {
					marker : {
						radius : 4,
						lineColor : '#666666',
						lineWidth : 1
					}
				}
			},
			series : [{
 
				name : 'Grados',
				data : valor
			}]
		});
	});
});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

AJAX configurar actualizacion de Datos

Publicado por Vainas (71 intervenciones) el 23/08/2015 18:35:33
Buenas:

esta pagina tendras que buscarla en la cache de google por que no esta disponible en la web de highcharts: http://www.highcharts.com/docs/working-with-data/live-data

Se trata de crear una funcion con un setTimeout para ir llamando la pagina cada segundo.

Explican que primero hay que crear una variable global en la que al principio se inicializa con:

1
chart = new Highcharts.Chart({...});


Interesante es que dentro de la inicializacion para llamar la primera vez a la funcion que realiza la llama en ajax le pasan una propiedad que se llama events y dentro de esta un metodo que se llama "load" al que se le pasa la funcion con el ajax:

1
2
3
events: {
                load: requestData // este sera el nombre de la funcion con el ajax.
            }


En este caso trata con numeros aleatorios pero tendria que hacer alguna prueba ya que me gustaria saber que sucede cuando se llama a un php y devuelve el mismo valor ya que no tiene otro, imagino que se agrega varias veces en la serie....

Sobre esto he estado pensando y no se si se puede hacer uso en php de la cabecera 304 para indicar al cliente que no han habido modificaciones actuales. Puedes investigar mas sobre esto con esta cabecera en php:

1
header("HTTP/1.1 304 Not Modified");


y tendrias que ver como se obtiene la respuesta en el ajax para no incluir datos de nuevo.

en http se puede usar If-Modified-Since o Last-Modified (hay un parametro en jQuery para enviarlo este ultimo al servidor) y se podria recibir en php para luego ya responder con un 200 OK o con un 304 Not Modified como he dicho anteriormente.

La opcion mas facil claro esta es comprobar en javascript si el ultimo valor es igual al que llega del servidor.... pero con el otro metodo solo envias la cabecera http sin contenido.


Ya para finalizar y pasando de nuevo al tema del setTimeout puedes tener problemas si quieres obtener datos que requieren enviar a la vez mucha peticiones ajax. Si es tu caso puedes usar tecnologias en js como sockets o (Esta me gusta mas pero no tiene soporte para algunos navegadores) Send Server Events. Ambas se basan en dejar abierto la conexion entre cliente y servidor y enviar datos desde el servidor cuando este tenga cambios.

por otra parte con setTimeout podrias dejar que el usuario decide el tiempo de refresco o que incluso lo detenga si asi lo quiere. ejemplo:

1
2
3
4
5
variable1 = setTimeout(requestData, 1000);
 
function myStopFunction() {
    clearTimeout(variable1);
}


Esta funcion la llamas desde un boton.

Espero que te sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

AJAX configurar actualizacion de Datos

Publicado por Santiago (8 intervenciones) el 23/08/2015 21:00:38
Antes que nada agradecer la respuesta! Lo solucione de esta maneara. Resta mejorarlo. Por ejemplo, ahora me esta cargando los datos, por detrás. Pero me gustaría que no se "recargue toda la linea que gráfico, si no que sea el ultimo punto..." Vere si puedo solucionarlo. Pero ahora cada 3 segundos, se recarga SOLO el gráfico!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
$(function(){
	graficarChart();
	setTimeout("graficarChart()",3000);
});
 
function graficarChart() {
	//Highcharts MySQL y PHP
 
	var Tiempo = [];
	var valor = [];
	var switch1 = true;
	$.get('values.php', function(data) {
 
		data = data.split(' -/- ');
		for (var i in data) {
			if (switch1 == true) {
				Tiempo.push(data[i]);
				switch1 = false;
			} else {
				valor.push(parseFloat(data[i]));
				switch1 = true;
			}
 
		}
		Tiempo.pop();
 
		$('#chart').highcharts({
			chart : {
				type : 'spline', backgroundColor:'transparent', defaultSeriesType: 'bar'
			},
			title : {
				text : 'Temperatura del Hogar Cada 30 Minutos'
			},
			subtitle : {
				text : 'Tweetmotica'
			},
			xAxis : {
				title : {
					text : 'Tiempo'
				},
				categories : Tiempo
			},
			yAxis : {
				title : {
					text : 'Temperatura'
				},
				labels : {
					formatter : function() {
						return this.value + ' Temp.'
					}
				}
			},
			tooltip : {
				crosshairs : true,
				shared : true,
				valueSuffix : ''
			},
			plotOptions : {
				spline : {
					marker : {
						radius : 4,
						lineColor : '#666666',
						lineWidth : 1
					}
				}
			},
			series : [{
 
				name : 'Grados',
				data : valor
			}]
		});
	});
};

Espero poder hacerlo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

AJAX configurar actualizacion de Datos

Publicado por Vainas (71 intervenciones) el 24/08/2015 18:17:38
Buenas de nuevo:

mmm la forma que me dices me da la impresion que recargas todo el grafico de nuevo y con la que aparece en el enlace solo hay que dejar que la propia libreria haga un refresh o repaint de lo que ella crea. fijate que tu haces algo asi:

1
2
3
4
5
6
7
8
function graficarChart() {
...
	$.get('values.php', function(data) {
 ....
		$('#chart').highcharts({
...}); //cierro highcharts
}); // cierro el get
} // cierro la funcion

Aqui llamas a los parametros y luego recargas entero el highcharts

Sin embargo con el link que te paso:

1
2
3
4
5
6
7
8
9
function requestData() {
    $.ajax({
...
        success: function(point) {
...
           chart.series[0].addPoint(point, true, shift);
        }
});
}

el requestData es una funcion que solo carga puntos en la serie y no recarga el highcharts. trae los valores por get y ya esta.

En el document ready solo creo el grafico la primera vez:

1
2
$(document).ready(function() {
    chart = new Highcharts.Chart({...});

Otra cosa mas, de la forma que ejecutas setTimeout solo se ejecuta una vez. Si lo vas a hacer de ese modo mejor usa setInterval.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

AJAX configurar actualizacion de Datos

Publicado por Santiago Fernandez (8 intervenciones) el 24/08/2015 21:37:43
Vainas! Como estas?

Tenes 100% razon...voy a leer sobre requestData a ver si encuentro algun ejemplo contra MYSQL...Yo un autodidacta! Lejos de comprender al 100% todo el berenjenal Web!

Abrazo desde Argentina! Y Gracias por todos los TIPS que me estas dando!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

AJAX configurar actualizacion de Datos

Publicado por Vainas (71 intervenciones) el 25/08/2015 00:38:04
Autodidacta todos amigo. Algunos algo hemos estudiado pero al final en esta selva de codigos te las arreglas como puedes...

Te doy mas datos a medida que voy viendo cosas que pueden servirte. Fijate en el ejemplo que te pase que en vez de como tu cargas el highcharts:

1
$('#chart').highcharts({...});


lo hace asi:

1
2
3
chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart',

Lo que quiero decir es que en vez de usar jquery para obtener el div o el elemento donde se va a colocar el grafico lo que hay es una variable dentro que se llama renderTo para decir cual es el id del elemento. Espero explicarme.

Tu siempre que tengas dudas pregunta sin miedo.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

AJAX configurar actualizacion de Datos

Publicado por Santiago Fernandez (8 intervenciones) el 25/08/2015 03:24:31
Vainas, te explicaste perfecto.

Ahora me estoy peleando, pero creo que voy a llegar a buen puerto.

Realice los cambios, pero en algo estoy errando. Seguramente un dato de mas o un código mal indentado.

datos.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
$(document).ready(function() {
	chart = new Highcharts.Chart({
	chart: {
	   renderTo: 'chart',
	        defaultSeriesType: 'spline'
	        events: {
	            load: requestData //Cargo los Datos
	        }
	    },
	    	title : {
			text : 'Temperatura del Hogar Cada 30 Minutos'
		},
			subtitle : {
			text : 'Tweetmotica'
		},
	    xAxis : {
			title : {
				text : 'Tiempo'
			},
			categories : Tiempo
		},
		yAxis : {
			title : {
				text : 'Temperatura'
			},
			labels : {
				formatter : function() {
					return this.value + ' Temp.'
				}
			}
		},
		tooltip : {
			crosshairs : true,
			shared : true,
			valueSuffix : ''
		},
		plotOptions : {
			spline : {
				marker : {
					radius : 4,
					lineColor : '#666666',
					lineWidth : 1
				}
			}
		},
		series : [{
			name : 'Grados',
			data : valor
		}]
	});
});
//Funcion para la Carga
function requestData() {
	$.ajax({
	    url: 'values.php',  // Llamo el PHP
	    success: function(data) {
	      	data = data.split(' -/- ');
			for (var i in data) {
				if (switch1 == true) {
					tiempo.push(data[i]);
					switch1 = false;
				} else {
					valor.push(parseFloat(data[i]));
					switch1 = true;
				}
			}
			Tiempo.pop();
 
	        // Vuelvo a Llamar despues de 1 Segundo
	        setTimeout(requestData, 1000);
	    },
	    cache: false
	});
}

values.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
$con = mysql_connect("localhost","root","root");
 
if (!$con) {
die('No se ha podido Conectar a: ' . mysql_error());
}
 
mysql_select_db("tweetmotica", $con);
 
//Solo las ultimas 8 lecturas del Sensor
$result = mysql_query("SELECT * from (select * from temperaturas order by id desc limit 10) sub order by id ASC") or die ("Error");
 
while($row = mysql_fetch_array($result)) {
	echo $row['tiempo'] . " -/- " . $row['valor']. " -/- " ;
}
 
mysql_close($con);
?>

Me entrega esta cadena

2015-08-23 15:09:56 -/- 25 -/- 2015-08-23 15:36:29 -/- 19 -/- 2015-08-23 15:36:58 -/- 25 -/- 2015-08-23 15:37:13 -/- 27 -/- 2015-08-23 15:37:17 -/- 27 -/- 2015-08-23 15:37:17 -/- 27 -/- 2015-08-23 15:37:38 -/- 30 -/- 2015-08-23 15:39:05 -/- 19 -/- 2015-08-23 16:01:57 -/- 19 -/- 2015-08-23 16:02:21 -/- 22 -/-

Voy a seguir revisando el datos.js

No me esta cargando, por algo en especial!

Veremos veremos! Pero el load:requestData() es la clave para que cargue verdaderamente realtime!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

AJAX configurar actualizacion de Datos

Publicado por Vainas (71 intervenciones) el 25/08/2015 13:00:48
Buenas:

Te he preparado un ejemplo de como yo lo haria a ver si te sirve:

El values.php lo he tenido que hacer asi por que yo no puedo acceder a la bbdd:

1
2
3
4
5
6
<?php
header('Content-Type: application/json');
$data = Array(Array("tiempo" => "2015-08-23 15:09:56", "valor" => "25"), Array("tiempo" => "2015-08-23 15:36:29", "valor"=> "19"), Array("tiempo" => "2015-08-23 15:36:58", "valor" => "25"), Array("tiempo" => "2015-08-23 15:37:13", "valor"=> "27"), Array("tiempo" => "2015-08-23 15:37:17", "valor" => "27"), Array("tiempo" => "2015-08-23 15:37:17", "valor"=> "27"), Array("tiempo" => "2015-08-23 15:37:38", "valor" => "30"), Array("tiempo" => "2015-08-23 15:39:05", "valor"=> "19"), Array("tiempo" => "2015-08-23 16:01:57", "valor" => "19"), Array("tiempo" => "2015-08-23 16:02:21", "valor" => "22"));
 
echo json_encode($data);
?>

Te he remarcado que como quiero seguir un poco un standar que se lleva ahora pues envio los datos en formato json, primero le digo al php que agrege una cabecera para que el javascript sepa que son json y al final codifico el array en formato json.

Tu values.php deberia quedar algo asi (puede tener errores):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
 header('Content-Type: application/json');
$con = mysql_connect("localhost","root","root");
 
if (!$con) {
die('No se ha podido Conectar a: ' . mysql_error());
}
 
mysql_select_db("tweetmotica", $con);
 
//Solo las ultimas 8 lecturas del Sensor
$result = mysql_query("SELECT * from (select * from temperaturas order by id desc limit 10) sub order by id ASC") or die ("Error");
 
$data = Array();
 
while($row = mysql_fetch_array($result)) {
	$data[] = $row;
// o podria ser asi para que lo entiendas mejor:
//$data[] = Array("tiempo" => $row['tiempo'], "valor" => $row['valor']);
 
}
 
mysql_close($con);
 
echo json_encode($data);
 
?>

con esto envio algo asi:

[{"tiempo":"2015-08-23 15:09:56","valor":"25"},{"tiempo":"2015-08-23 15:36:29","valor":"19"},{"tiempo":"2015-08-23 15:36:58","valor":"25"},{"tiempo":"2015-08-23 15:37:13","valor":"27"},{"tiempo":"2015-08-23 15:37:17","valor":"27"},{"tiempo":"2015-08-23 15:37:17","valor":"27"},{"tiempo":"2015-08-23 15:37:38","valor":"30"},{"tiempo":"2015-08-23 15:39:05","valor":"19"},{"tiempo":"2015-08-23 16:01:57","valor":"19"},{"tiempo":"2015-08-23 16:02:21","valor":"22"}]

Es un array con objetos dentro con los nombres.

Ahora el html con el javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="chart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script>
var chart;
 
function requestData() {
	$.ajax({
	    url: 'values.php',  // Llamo el PHP
	    dataType: 'json',
		success: function(data) {
		var tiempo = [];
			for (var obj in data) {
			tiempo[0] = data[obj].tiempo;
			tiempo[1] = parseInt(data[obj].valor);
			chart.series[0].addPoint(tiempo, true, false);
			console.log(tiempo);
			}
	        // Vuelvo a Llamar despues de 1 Segundo
	        setTimeout(requestData, 3000);
	    },
	    cache: false
	});
}
 
$(document).ready(function() {
	chart = new Highcharts.Chart({
	chart: {
	   renderTo: 'chart',
	        defaultSeriesType: 'spline',
	        events: {
	            load: requestData
	        }
	    },
	    	title : {
			text : 'Temperatura del Hogar Cada 30 Minutos'
		},
			subtitle : {
			text : 'Tweetmotica'
		},
	    xAxis : {
			title : {
				text : 'Tiempo'
			}//,
			//categories : Tiempo
		},
		yAxis : {
			title : {
				text : 'Temperatura'
			},
			labels : {
				formatter : function() {
					return this.value + ' Temp.'
				}
			}
		},
		tooltip : {
			crosshairs : true,
			shared : true,
			valueSuffix : ''
		},
		plotOptions : {
			spline : {
				marker : {
					radius : 4,
					lineColor : '#666666',
					lineWidth : 1
				}
			}
		},
		series : [{
			name : 'Grados',
			data : []
		}]
	});
});
</script>
</body>
</html>

Aqui el problema es que estamos enviando todos los datos y la primera vez esta bien pero las segundas lo que hace es repetir de nuevo los datos una y otra vez....

Lo suyo es crear un php que envie todos los valores al principio (values.php) y otro que solo envie el ultimo valor y cambiamos el parametro ruta en el ajax.

Tengo una duda con los valores de addPoint... el ultimo he tenido que colocarlo a false por que sino no me mostraba nada.

Tengo otro error y es que el parametro que le paso como tiempo en el eje de las equis tiene que ser un valor entero y no una cadena ya que sino lo toma como nombre del eje o algo asi.

Siempre repito lo mismo pero aqui va de nuevo: usa la consola de chrome para comprobar si tienes errores, es mas facil saber que pasa. En el lado de el servidor puedes usar herramientas como Advance REST client o Postman - REST Client que son plugins del chrome para saber si lo que regresa del servidor es lo que necesitas.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

AJAX configurar actualizacion de Datos

Publicado por Santiago (8 intervenciones) el 25/08/2015 13:48:13
Vainas, gracias por los datos.

En el eje x, puedes poner un datetime. Así estaba, sin problemas.

Es muy raro, el addpoint. Lo que hace es realizar el SELECT y concatenar con la consulta anterior que seria el mismo SELECT.

thump_2326315captura-de-pantalla

Entiendo que es, por que debo referenciar a otro PHP (Ejemplo: last_values.php) donde solo me traiga el ultimo registro. Que sera agregado con addpoint.

Los plugins, geniales!

Voy a leer sobre Addpoints, creo que esta la clave ahí.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

AJAX configurar actualizacion de Datos

Publicado por Vainas (71 intervenciones) el 25/08/2015 14:39:25
Vale ya lo he entendido.

chart.series[0].addPoint(tiempo, true, false);

si el ultimo valor lo pones a true lo que hace es algo asi. chart.series[0].data es un array con x valores (x e y). un ejemplo

chart.series[0].data [[23,25], [24,19], [x, y]...];

Lo que hace el valor a true es poner el nuevo valor al final y eliminar el primero. Si metes dos valores elimina el primero y el segundo y mete los 2 nuevos valores al final... y si metes 3 ..... etc.

Por eso si lo pones a true y metes x valores luego lo que hace es que los mete primero y despues los borra por que son el mismo numero de valores.

Entiendo que es, por que debo referenciar a otro PHP (Ejemplo: last_values.php) donde solo me traiga el ultimo registro. Que sera agregado con addpoint.
BINGO!!!! a eso me referia. has contestado con esto a lo que he dicho de: Lo suyo es crear un php que envie todos los valores al principio (values.php) y otro que solo envie el ultimo valor y cambiamos el parametro ruta en el ajax.

Una cosa mas que he probado ya en ultimo momento. El valor fecha es un valor unix. Puedes enviarlo desde el servidor como tal (buscar alguna funcion que lo pase a un valor UTC o bien hacer el paso con javascript:

1
2
3
4
....
tiempo[0] = new Date(data[obj].tiempo);
tiempo[0] = Date.UTC(tiempo[0].getUTCFullYear(), tiempo[0].getUTCMonth(), tiempo[0].getUTCDate(),  tiempo[0].getUTCHours(), tiempo[0].getUTCMinutes(), tiempo[0].getUTCSeconds());
...

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

AJAX configurar actualizacion de Datos

Publicado por santiago (8 intervenciones) el 25/08/2015 22:36:12
Vaina, querido...

He copiado y pegado, tratando de comprender...Pero es mas fuerte que yo...No deberia haber estudiado Ingenieria Electronica...jaja!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

AJAX configurar actualizacion de Datos

Publicado por Vainas (71 intervenciones) el 25/08/2015 23:17:08
Ya me enseñaras tu algun dia como hacer algun circuito para conectar a un arduino o asi a cambio de esto jaja.

Dime que no has entendido que intento explicar con otras palabras a ver.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

AJAX configurar actualizacion de Datos

Publicado por santiago (8 intervenciones) el 25/08/2015 23:32:37
Ya lo creo! Esto es parte del proyecto que hice con Arduino...Todo manejado desde Twitter. Solo que no puedo hacer algunas representaciones, como la que estoy molestándote!

Creo que el gran problema es el PARSEO...Entiendo que en addpoints. debería ir... (valor, tiempo, true, true)

Estuve viendo algunos ejemplos, donde el setValue es mas sencillo...pero si no aprendo a manejar los datos despues de haberlos traido desde el AJAX, estoy muerto....

...

Estoy leyendo y leyendo...Pero nada....sigo sin dar pie con bola.....

Este es el proyecto....Las luces de casa, vía Tweets y termino con esto, para que el sensor de temperatura me prenda le aire acondicinado o la calefacción hermano....

thump_2326480captura-de-pantalla

<a href='http://www.subirimagenes.com/privadas-capturadepantalla-2326480.html'><img src='http://s2.subirimagenes.com/privadas/previo/thump_2326480captura-de-pantalla.png' alt='subir imagenes' border='0'></a>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

AJAX configurar actualizacion de Datos

Publicado por Vainas (71 intervenciones) el 26/08/2015 08:49:16
Es lo que te comente anteriormente:

chart.series[0].addPoint(array, true, true);

chart.series[0].data es un array con n-arrays con valores x e y (un array dentro de un array). un ejemplo:

chart.series[0].data = [ [23,25], [24,19], [x, y]...];

addPoint es una funcion que solamente acepta como primer valor un array con los valores x e y se los tienes que meter asi:

chart.series[0].addPoint([hora, temp], true, true);

hora tiene que ser un valor numerico o lo que se conoce como la hora en formato unix (Al menos yo lo aprendi asi). Es decir no es un string "Sabado 23 de agosto....." sino algo asi 14293842.

La temperatura lo mismo tiene que ser un valor numerico. Lo mejor es usar parseInt para pasarlo o traerlo del servidor como tal si es que lo mandas como un string (que es lo que he hecho yo, podia haberlo enviado como un entero).

Yo hago lo siguiente. En el servidor hice que los datos me llegaran asi con el codigo que te mostre en php:

[{"tiempo":"2015-08-23 15:09:56","valor":"25"}, {...}, {}, ...]

Esto se llama formato json. Es un array y dentro de el hay objetos en cada posicion. en el array anterior solamente el objeto 0 podriamos decir que tiene valores.

cuando llegan al servidor por ajax (fijate que para saber que son en formato json le digo al ajax dataType: 'json' para que sepa que van a llegar asi):

success: function(data) {
....

llegan como una variable que se llama data en esa funcion anterior, pero como los traje en json ya no son un string (una cadena) sino que son un array con objetos asi que puedo acceder a el de esta forma por ejemplo

data[0] me devuelve un objeto con los primeros valores. dentro de el puedo acceder a tiempo y valor de la siguiente manera:

data[0].tiempo me desvolvera 2015-08-23 15:09:56
y
data[0].valor me desvuelve 25

data[1].tiempo ....
data[1].valor ....
etc

addPoint me pide un array con dos valores [x,y] el problema es que no puedo pasarselo como llega ya que yo tengo un array de objetos [{},{}] y addPoint quiere un array de numeros [int, int] asi que hago un for pasando por cada valor de mi array y dejandolo en uno nuevo que se llama tiempo (igual tenia que haberse llamado la variable "valorXY" por ejemplo:

1
2
3
4
var valorXY = []; //inicializo
			for (var i in data) { // recorremos el objeto que llega del ajax. cambio el nombre de obj por i para que entiendas que es un inidice
			valorXY[0] = data[i].tiempo;
			valorXY[1] = parseInt(data[i].valor);

con esto ahora tengo un array que se llama valorXY asi ["2015-08-23 15:09:56",25] (la primera vez que pasa por el for)

asi que ya lo tengo para pasarselo a addPoint

chart.series[0].addPoint(valorXY, true, true);

y como el for comienza de nuevo. Se vuelve a rellenar el array valorXY pero esta vez con data[1] y asi hasta el final.

Para finalizar, como el primer valor del array valorXY tiene una cadena y no es una fecha de tipo unix tengo que convertilo asi que puedo hacerlo asi:

var fecha = new Date(data[i].tiempo);
Esto es un poco raro lo que viene pero es la forma que tiene javascript de pasarlo al formato unix:
valorXY[0] = Date.UTC(fecha.getUTCFullYear(), fecha.getUTCMonth(), fecha.getUTCDate(), fecha.getUTCHours(), fecha.getUTCMinutes(), fecha.getUTCSeconds());

esto quedara asi dentro del codigo:

1
2
3
4
5
6
7
... for ...
var valorXY = []; //inicializo
			for (var i in data) { // recorremos el objeto que llega del ajax. cambio el nombre de obj por i para que entiendas que es un inidice
			var fecha = new Date(data[i].tiempo);
                        valorXY[0] = Date.UTC(fecha.getUTCFullYear(), fecha.getUTCMonth(), fecha.getUTCDate(),  fecha.getUTCHours(), fecha.getUTCMinutes(), fecha.getUTCSeconds());
			valorXY[1] = parseInt(data[i].valor);
                        chart.series[0].addPoint(valorXY, true, true);

piensa que valorXY[0] y valorXY[1] se rellenan con los nuevos valores cada vez que pases por el for.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

AJAX configurar actualizacion de Datos

Publicado por Santiago (8 intervenciones) el 28/08/2015 03:00:46
Vainas querido!

No me he olvidado de ti! Agradezco todo lo que haces por mi codigo! Pero no he tenido tiempo. Apenas pueda codear, no tengas dudas que te mantendre al tanto!

Eso te lo aseguro hermano!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar