Tutoriel MySQL - Highstock

Gráfico con varios ejes

 

Si desea trazar un gráfico con varios datos diferentes, tales como la temperatura, humedad y presión, el gráfico será más fácil de leer si ponemos varios ejes. Tal como este gráfico que vamos a crea
Usted ya conoce el principio, fíjese que hemos seleccionado 5 valores, además de la fecha
<?php // Llamada al script de comandos de inicio de sesión require("mysql_connect.php"); // Se recupera la fecha y hora del último registro $sql="select max(tstamp) from data"; $query=mysql_query($sql); $list=mysql_fetch_array($query); // Determina el stop y el start en la forma de recuperar de la próxima solicitud //de los datos de las últimas xx heures $stop=$list[0]; $start=$stop-(86400); // Recupera los datos de las últimas 48 horas en orden ascendente de fecha y hora $sql = "SELECT tstamp, outdoortemperature, dewpoint, instantrain, sealevelpressure, outdoorhumidity FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1"; $query=mysql_query($sql); $i=0; while ($list = mysql_fetch_assoc($query)) { if (date("I",time())==0) { $dtime[$i]=($list['tstamp']+3600)*1000; } else { $dtime[$i]=($list['tstamp']+7200)*1000; } $outdoortemperature[$i]=$list['outdoortemperature']*1; // temperatura exterior $outdoorhumidity[$i]=$list['outdoorhumidity']*1; // humedad externa $dewpoint[$i]=$list['dewpoint']*1; // Punto de rocío $instantrain[$i]=$list['instantrain']*1; // lluvia $sealevelpressure[$i]=$list['sealevelpressure']*1; // Presión $i++; } ?>
Codificamos los datos en Json
<script type="text/javascript"> eval(<?php echo "'var dTime = ".json_encode($dtime)."'" ?>); eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>); eval(<?php echo "'var outdoorhumidity = ".json_encode($outdoorhumidity)."'" ?>); eval(<?php echo "'var dewpoint = ".json_encode($dewpoint)."'" ?>); eval(<?php echo "'var instantrain = ".json_encode($instantrain)."'" ?>); eval(<?php echo "'var sealevelpressure = ".json_encode($sealevelpressure)."'" ?>); </script>
Llamamos a las librerías
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="../highcharts3/js/highcharts.js"></script> <script type="text/javascript" src="../highcharts3/themes/grid.js"></script> <script type="text/javascript" src="../highcharts3/js/modules/exporting.js"></script>
Comenzamos el gráfico. El fundamento es el mismo que el de los anteriores gráficos
<script type="text/javascript"> function comArr(unitsArray) { var outarr = []; for (var i = 0; i < dTime.length; i++) { outarr[i] = [dTime[i], unitsArray[i]]; } return outarr; } $(function () { var chart; $(document).ready(function() { var highchartsOptions = Highcharts.setOptions(Highcharts.theme); Highcharts.setOptions({ lang: { months: ["Enero "," Febrero "," Marzo "," Abril "," Mayo "," Junio "," Julio "," Agosto "," Septiembre "," Octubre "," Noviembre "," Diciembre"], weekdays: ["Dom "," Lun "," Mar "," Mie "," Jue "," Vie "," Sab"], shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul','Ago', 'Sept', 'Oct ', 'Nov', 'Dic'], decimalPoint: ',', resetZoom: 'Reset zoom', resetZoomTitle: 'Reset zoom à 1:1', downloadPNG: "Descargar en formato imágen PNG", downloadJPEG: "Descargar en formato imágen JPEG", downloadPDF: "Descargar en formato documento PDF", downloadSVG: "Descargar en formato vector imágen SVG", exportButtonTitle: "Exportar imágen o documento", printChart: "Imprimir el gráfico", loading: "Cargando..." } }); chart = new Highcharts.Chart({ chart: { renderTo: 'container', zoomType: 'x', alignTicks: false, }, title: { text: 'Temperatura, presión relativa, punto de rocío y humedad las últimas 24 horas', x: -0 }, credits: { text: 'Météo Villarzel', href: 'http://www.boock.ch/meteo-villarzel.php' }, xAxis: { type: 'datetime', },
Ahora vamos a definir nuestro 4 ejes Y, ¿ Porqué sólo 4, si tenemos 5 valores para trazar? Simplemente, porque la temperatura y el punto de rocío estarán en el mismo eje en ° C
Así que para el primer eje 'Temperatura y punto de rocío", tenemos:
yAxis: [{ // 1er yAxis (numero 0) gridLineWidth: 0, labels: {formatter: function() {return this.value +'°C'; }, style: { color: '#FF0000' } }, title: { text: 'Temperatura y punto de rocío', style: { color: '#FF0000' } }, },
Hemos definido para este eje, una unidad (°C) un coulor y un texto (title)
Hacemos lo mismo para el eje de la presión
{ // 2ème yaxis (numero 1) gridLineWidth: 0, min:980, title: { text: 'Presión', style: { color: '#2E8B57' } }, labels: { formatter: function() { return this.value +' hPa'; }, style: { color: '#2E8B57' } }, opposite: true },
Usted habrá notado que hay dos nuevas instrucciones, min: 980. Esto fija el mínimo de la escala a 980 hPa en este ejemplo opposite: true; ésta declaración sitúa la escala de forma opuesta a la escala por defecto, es decir, a la derecha de la gráfica
Ahora el eje de la humedad
{ // 3ème yaxis (numero 2) gridLineWidth: 0, tickInterval:10, min:0, max: 100, title: { text: humedad', style: { color: '#0000FF' } }, labels: { formatter: function() { return this.value +' %'; }, style: { color: '#0000FF' } }, opposite: true },
Hemos establecido los valores de la escala de 0 a 100% y lod hemos colocado a la derecha.
En el último eje, las lluvias
{ // 4ème yaxis (numero 3) gridLineWidth: 0, min:0, tickInterval:0.2, title: { text: 'lluvias', style: { color: '#4572A7' } }, labels: { formatter: function() { return this.value +' mm'; }, style: { color: '#4572A7' } }, }],
Usted puede haber notado que hay 4 ejes se numeran 0, 1, 2 y 3, es importante para definir en las series, que datos se asignan a qué escala. }], Cerrar bién todos los corchetes [], paréntesis (), llaves {} y nó se olvide de una coma, ya que el gráfico no se mostrará.
Al igual que con otros gráficos, definimos el tooltip (herramienta de información)
tooltip: { crosshairs:true, shared: true, borderColor: '#4b85b7', valueDecimals: 1, formatter: function() { var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M UTC', this.x) +'</b>'; $.each(this.points, function(i, point) { var unit = { 'Presión': ' mb', 'Températura': '°C', 'Humedad' : '%', 'Punto de rocío' : '°C', 'Precipitación' : 'mm' }[this.point.series.name]; s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : ' +Highcharts.numberFormat(point.y,1,","," ")+ unit; }); return s; }, },
Vamos a desactivar los marcadores en las opciones generales del gráfico, esto evitará hacerlo para cada serie. También se suma a la fiesta, un tiempo (animación): 3 segundos para trazar líneas en la gráfica; es en milisegundos.
plotOptions: { series: { marker: { enabled: false },animation: { duration: 3000 } } },
Quedan por definir las series, empezamos con la temperatura, pero el orden no importa.
series: [ { name: 'Températura', zIndex: 1, yAxis: 0, color: '#ff0000', lineWidth: 3, type: 'spline', data: comArr(outdoortemperature), },
La asociamos con el primer eje, es decir, 0, recuerde lo que dijimos antes acerca de la numeración de los ejes,
Lo mismo ocurre con la presión, el segundo eje, por lo que YAXIS : 1
{ name: 'Presión', color: '#2E8B57', yAxis: 1, type: 'spline', data: comArr(sealevelpressure) },
La serie humedad en el eje 2
{ name: 'humedad', color: '#233aff', yAxis: 2, type: 'spline', data: comArr(outdoorhumidity), },
La serie Punto de rocío en el eje 2
{ name: 'Punto de rocío', color: '#3399FF', yAxis: 0, zIndex: 2, type: 'spline', data: comArr(dewpoint), },
La precipitación en la serie del eje 3, también cambia el tipo de gráfico, no vamos a ver ésta información tipo línea, sino en forma de columna (column).
{ name: 'Precipitación', color: '#4572A7', pointPadding: -0.2, yAxis: 3, type: 'column', data: comArr(instantrain), } ]
Terminamos la parte de la gráfica, cerrando todas las instrucciones y el cierre de la etiqueta script
}); }); }); </script>
Si usted ha puesto una etiqueta head, la cerramos, llamamos al gráfico en el body con las dimensiones deseadas y cerramos la etiqueta html
</head> <body> <div id="container" style="width: 750px; height: 400px; margin: 0 auto"></div> </body> </html>
Bueno, ¡ Ya hemos terminado!.
Descargar el archivo completo.

 

 

 

página01 Carga de la base de datos. página02 Acceder a la base de datos. página03 Recuperación y formateo de los datos. página04 Highcharts, mi primer gráfico. página05 Highcharts, mi primer gráfico, recapitulación.. página06 Mi segundo gráfico, la pluviometría.. página07 Un gráfico con múltiples ejes Y página08 Personalización con la API Highcharts página09 Highstock ¿Qué es? página 10 Le forum Highcharts Ce tutoriel est disponible en français This tutorial is also available in in English ¿Le ha gustado este tutorial, le ha servido? Cuentenmelo. O ayudeme a mantener este sitio funcionando .