Hacer gráfica 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 formato JSON de la siguiente manera
{"14":495,"15":427,"16":310,"17":495,"18":427,"19":310}donde los números entre comillas son los pines correspondientes al sensor (estoy usando una placa arduino) y el numero al lado corresponde al valor leído en dicho sensor.
Estoy creando una aplicación web que me muestre una gráfica 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 código:
function value_update(data) {
$.each(data, function (index, value) {
$('#P'+index).text(((5*value*100)/1024).toFixed(1)+" °C");
});
} la formula matemática es simplemente para realizar la conversión del dato leído a grados centígrados
y el html donde lo implemento es
<label><b>TEMPERATURA A0</b></label> <span class="inputvalue" name="P14" id="P14">0</span>
y así es como se ve en la pagina
Realmente necesito ayuda con esto pues no tengo la mas mínima idea de como tomar estos datos que me muestra y graficarlos, se que existen varias librerías para graficar en jquery pero francamente no se como usarlas, agradecería cualquier ayuda que me puedan brindar en este sentido.
1 Respuesta
Me encantan los arduino!
Yo llevo ya tiempo cacharreando con un Raspberry Pi.
A lo que vamos, gráficos en Javascript.
Hace algunos años era una tarea tediosa y daba problemas con los distintos navegadores, hoy en día, gracias a Dios, esto ha cambiado, tienes muchas alternativas, pero la que yo te recomiendo por si adaptabilidad, simpleza y potencia es un producto de Google, como no... se llama Google Charts (que original).
https://developers.google.com/chart/
En concreto supongo que necesitarás el linear, para mostrar la variación de temperaturas en función del tiempo.
https://developers.google.com/chart/interactive/docs/gallery/linechart
Éste es el código de ejemplo que ponen los de Google para este gráfico:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>Es bastante sencillo, lo único que debes hacer es reemplazar los valores del array, amén de incluir el archivo jsapi como bien indica el ejemplo: https://www.google.com/jsapi
He implementado esta función en bastantes sitios Web por lo que si te surgiera alguna duda al respecto supongo que podríamos mirarlo en detenimiento.
