Question

En primer lugar debo decir que tengo pocos conocimientos de html, javascript y jquery, dicho esto, esta es mi inquietud. Tengo un proyecto que lee el valor de unos sensores de temperatura, y me los muestra en formto json de la siguiente manera:

{"14":495,"15":427,"16":310,"17":495,"18":427,"19":310}

donde los numeros entre comillas son los pines correspondientes al sensor (estoy usando una placa arduino) y el numero al lado corresponde al valor leido en dicho sensor.

Estoy creando una aplicacion web que me muestre una grafica de la temperatura pero no he podido hacerlo. en este momento solo he podido mostrar el valor en pantalla de la temperatura, usando el siguiente codigo:

function value_update(data) {
$.each(data, function (index, value) {
        $('#P'+index).text(((5*value*100)/1024).toFixed(1)+" °C");
}); } 

la formula matematica es simplemente para realizar la conversion del dato leido a grados centigrados

y el html donde lo implemento es

<label><b>TEMPERATURA A0</b></label>
<span class="inputvalue" name="P14" id="P14">0</span>

y asi es como se ve en la pagina

realmente necesito ayuda con esto pues no tengo la mas minima idea de como tomar estos datos que me muestra y graficarlos, se que existen varias librerias para graficar en jquery pero francament no se como usarlas, agradeceria cualquier ayuda que me puedan brindar en este sentido.

Comments

Hola Ingadad,

cómo querés graficarlos? Con gráficos de barras para cada sensor? Con un reloj como si fuera un termómetro analógico? un histograma para ver la evolución de las temperaturas (este es el más complicado, porque requiere guardar los datos anteriores)?

---

Leonardo Tadei Muchas gracias por tu comentario, pues cualquier grafica de las que me comentas me sirve, agradeceria cualquier comentario de tu parte en este tema. Dejame clarificar que lo que quiero graficar es, cada elemento del JSON seria una grafica diferente, digamos que el elemento "14" tiene un valor de 495, y despues de 2 seg ese valor cambia por otro y asi sucesivamente cada 2 seg, esa es la grafica que quiero hacer. De antemano gracias por tu comentario.

---

Ok, por ahi va la respuesta de todas formas.
Ya nomás es cuestión que le des un id o una clase a cada columna que tu quieras cambiar, cada vez que recibas nuevos datos, o con mismo javascript crea una función que te genere un nuevo html con los datos y que te sobre escriba la grafica.

Si ya tienes jquery dale un append a la tabla con el nuevo codigo cada vez que se actualice. no se si me explico.
Cada vez que recibas un nuevo json guardalo en una variable javascript y actualiza la tabla.

AAAh, tu string json, no se si sepas, lo puedes convertir a javascript con la funcion var datos = eval(json). (Con jQuery también se puede, creo que es $.decode(json), no recuerdo bien algo asi).
Y listo, accedes a tu json como si fuera un arreglo.

Answer 1

Hola Ingadad,

para tu problema, podrías mostrar esta biblioteca que muestra un componente como un reloj en pantalla : https://code.google.com/p/jgauge/

Fijate que el archivo que se descarga parece no funcionar, porque el descompresor puede no poner los JS, los CSS y las imágenes en el directorio correcto.

Para usarla hay un manula y un ejemplo, pero básicamente es así:

var Gauge14 = new jGauge(); // Crea el control
Gauge14.id = 'jGaugeDemo1'; // lo asigna un DIV

Se inicializa el gauge al cargar la pagina:

$(document).ready(function() {
Gauge14.init();
}

y luego deberás ir leyendo como hasta ahora los valores del sensor y llamar a

Gauge14.setValue(value);

para ponerle cada valor leído. Supongo que harás esto adentro del mismo bucle que usás para obtener actualmente cada valor.

Tenés que poner tantos gauges como datos quieras mostrar: uno para el "14", otro para el "15" y así sucesivamente. El ejemplo de uso está solo para el sensor "14".

Hay varias bibliotecas por ahí, pero esta me parece una de las más simples de usar.
Saludos!

Answer 2

Como dices tu, hay muchísimos apis para graficar y depende de como lo quieras graficar escoges tu api. Yo he utilizado google charts y extJs pero al ya tener tu jquery ahí te va un enlace con una gráfica muy sencilla pero al final la mayoría trabajan igual:

• Llamas los datos (que ya los tienes)
• los presentas de algún modo
• Mandas ejecutar la librería

Intenta seguir los pasos de este pequeño tutorialhttp://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/

Si no te gusta ya aprendiste a graficar ;)
Recuerda que en google encuentras todo, solo hay que saber buscar y tener paciencia para leer un ratito

Answer 3

Dale una vuelta a este plugin a ver si te sirve, es muy simple de usar por que tiene un wizard que te permite crear el gráfico de manera manual, y te genera el codigo, eso lo tendrías que acoplar con la función que tienes.

http://omnipotent.net/jquery.sparkline/#s-about

Saludos

Answer 4

Solo requieres hacer una pagina que haga dump en json (Datos serializados de php) y uses esta libreria supongoq ue es lo que quieres

http://workshop.rs/jqbargraph/