Tutoriel MySQL - Highcharts

Recuperación y formateo de los datos.

Vamos a empezar creando nuestra tabla, pero ántes debemos instalar la biblioteca Highcharts . Vamos a: http://www.highcharts.com
		Haga clic en Descargar y, a continuación, haga clic Highcharts 3.x
Descomprimir el archivo en un directorio, por ejemplo highcharts3

Usted también necesitará el archivo jquery.min.js, si usted no tiene la biblioteca jQuery instalada, puede descargar el archivo aquí:ici Descomprima el archivo en la carpeta de sus scripts o, directamente en la carpeta de sus gráficos

 

Bueno , ¿ empezamos econ el famoso gráfico ? Sí; pero, primero, debe recuperar los datos que desee poner en el gráfico y además formatearlos, para que sean comprensibles para Highcharts; para ello utilizaremos el formato JSON.
Abra un nuevo archivo en el editor de texto y llámelo, por ejemplo, 48h_temperature.php
Es php , así que vamos a poner nuestro código entre estas etiquetas , escriba: <?php ?>
Ahora, nuestro archivo de conexión a la base de datos (el que hemos creado en la página anterior ). Como recordatorio: las líneas que comienzan con // verde, en este tutorial son comentarios, usted es libre de dejarlos o borrarlos. Tenga cuidado si utiliza "copiar y pegar" con el código php, ya que la línea de comentario debe comenzar, siempre, por //, ya que, de lo contrario, no funcionará el script
<?php // Llama al script de conexión require("mysql_connect.php"); ?>
y listo, ya está conectado a la base de datos; simple, ! no!; .. bién; ahora hay que ir a buscar los valores . Comenzamos con la fecha y la hora. En la tabla data seleccionamos el campo tstamp; ésta es la hora en formato Unix
<?php // Llamada al script de comandos de inicio de sesión require("mysql_connect.php"); // Se recupera la fecha y la hora del último registro $sql="select max(tstamp) from data"; $query=mysql_query($sql); $list=mysql_fetch_array($query); ?>
A modo de recordatorio, desde PhpMyadmin
Indica iniciar y detener con el intervalo de tiempo que deseamos colocar en la tabla
<?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*2);//86400=24 heures donc 86400*2=48 heures ?>
Ahora vamos a seleccionar los valores que aparecerán en nuestra gráfico. Con el comando "SELECT ", seleccionamos el tiempo de unix, la temperatura exterior, el factor viento, el punto de rocío y el humidex. Con "FROM" indicamos que esos datos provienen de la tabla "data"; y luego, "WHERE" tstamp determina el inicio y el final ( start-stop definido anteriormente) y, finalmente, clasificamos los datos con "ORDER "
<?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*2);//86400=24 heures donc 86400*2=48 heures // Recupera los datos de las últimas 48 horas en orden ascendente de fecha y hora $sql = "SELECT tstamp, outdoortemperature, windchill, dewpoint, outdoorheatindex FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1"; $query=mysql_query($sql); $i=0; ?>
Ahora vamos a hacer un bucle "while" para listar nuestros valores. Este es el final de la parte php; terminaremos cerrando con ?>
<?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*2);//86400=24 heures donc 86400*2=48 heures // Recupera los datos de las últimas 48 horas en orden ascendente de fecha y hora $sql = "SELECT tstamp, outdoortemperature, windchill, dewpoint, outdoorheatindex 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) { $time[$i]=($list['tstamp']+3600)*1000; } else { $time[$i]=($list['tstamp']+7200)*1000; } $outdoortemperature[$i]=$list['outdoortemperature']*1; $windchill[$i]=$list['windchill']*1; $dewpoint[$i]=$list['dewpoint']*1; $outdoorheatindex[$i]=$list['outdoorheatindex']*1; $i++; } ?>
Antes de atacar la parte Highcharts, todavía debemos poner los datos en formato Json.
<script type="text/javascript"> eval(<?php echo "'var time = ".json_encode($time)."'" ?>); eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>); eval(<?php echo "'var windchill = ".json_encode($windchill)."'" ?>); eval(<?php echo "'var dewpoint = ".json_encode($dewpoint)."'" ?>); eval(<?php echo "'var outdoorheatindex = ".json_encode($outdoorheatindex)."'" ?>); </script>
Lo que nos dará una tabla del tipo:
debemos comprender el proceso sexplicado anteriormente: obtenemos un campo de la base de datos aquí "outdoortemperature" hicimos una lista con estos valores y al final los transformamos en Json . Por supuesto, que si usted quiere dibujar otro campo de la base de datos, como la velocidad del viento, se reemplaza el campo "outdoortemperature" por el campo " WinSpeed ??". Dentro de la selección "SELECT" mantenga sólo los valores que desea llamar, puede poner el número que desee, no hay límite. Por supuesto, si desea dibujar 5 valores, también debe agregarlos en el "WHILE" y, abajo, en el json_encode.

 

 

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 .