entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Hacer grafica jquery json

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
enter image description here

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.

1voto

Leonardo-Tadei comentado

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)?

1voto

ingadad_adading comentado

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.

2votos

a_kanin comentado

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.

4 Respuestas

2votos

Leonardo-Tadei Puntos227320

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!

0voto

ingadad_adading comentado

Leonardo Tadei Muchas gracias por tu comentario, realmente este componente era el que estaba buscando, facil y sencillo de comprender, ahora me encuentro probandolo. muchas gracias.

1voto

a_kanin Puntos170

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

1voto

ingadad_adading comentado

a_kanin gracias por tu respuesta, pero creo que no me has comprendido, El hecho es que si tengo los datos que se requieren para graficar, que se encuentran comprendidos en el string JSON que mostré arriba, pero ese string es momentaneo, pues despues de unos 2 segundos cambian sus valores (porque asi se requiere). La finalidad de la grafica es que sea de un solo elemento, que quiero decir con eso, si miras el JSON te daras cuenta que ahi un elemento "14", cuyo valor es 495, despues de dos segundos ese valor va a tener otro valor, digamos 505, y asi sucesivamente, lo que quiero graficar es solo los valores correspondientes al elemento "14", que cambian cada 2 segundos, no todo el string JSON, no se si me hago entender. de cualquier manera agradesco tu atencion

1voto

elias_leyton Puntos2260

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

0voto

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/

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta