Météo Villarzel Suisse

Impacts de foudre
Ephéméride - PDA Prévisions Alertes - Dangers Température Pression - Humidité Solaire et UV Rayonnement solaire Pluviométrie Vent Agriculture Chauffage Danger feux de forêt Info station Activité sismique Astronomie Divers / Liens / Explications Créations / GW / Tutoriels Evénement météo

Hors météo Broye Mon étang Consommation électrique Pompe à chaleur Panneaux solaire Serre

Livre d'Or

Forum Highcharts

Privé

Version pour mobile




Merci à nos donateurs:
M. Blanc
M. JavierMartinez
M. Viktor
M. Emanuel Roggen
M. Raphaël Chochon
M. José Luis Sanchez
M. Daniel Stuyck
M. Jean-Pierre Tonnele
M. Benoist Lerouge
M. Pierre Sabatier

M. Patrick Ollivier
M. Michel Le Viol
M. César López
M. Didier Mestric
M. Francesco Paolo Trapani
M. Charles Durand
M. Philippe Blanchard
M. Benjamin Leblic
Philippe Dupertuys
M. Jaume Mas Ferrer
M. Daniel Lavocat
M. Jean-Pierre Bernard
M.Gérard Egger
M. Jean-Claude Birade
M. Dominique Herraire
M. Eric Lemoine
M. Jean Gabriel Boulet
M. Olivier Bovel
M. Arnaud Rahier
M. Bruno Goyac
M. Jean Michel Vouillot
M. Sarah Cordeau
M. Jean-Pierre Grieu
M. Loic Roulin
M. Michel Beel
M. Dominique Gautheron
M. Hubert Verwilghen
Picardie WebMarketing
M. Patrick Puydebois
M. Thierry Hauuy
M. Francis Mirante


 

Visiteurs depuis le 07.01.2010

 

 

Visites du jour :

 

 

Service Cron Gratuit

 

Tutoriel MySQL - Highcharts

Un segundo gráfico con precipitaciones

Para entender el proceso, crearemos un segundo gráfico sobre la base del primero, pero con otros datos.
Vamos a dibujar un gráfico con una precipitación de 10 días. Te muestro sólo las diferencias entre los dos gráficos.

Comienza como el gráfico anterior, abrimos un archivo vacío y añadimos el archivo de conexión a la base de datos y los valores a representar.

<?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*10); // 86400=24 heures, donc pour 10 jours 86400*10

// Recuperación de Datos de 10 días con un orden ascendente de fecha y hora
$sql = "SELECT tstamp, instantrain, rain_hourly, last24hrrain 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;
} $instantrain[$i]=$list['instantrain']*1;
$rain_hourly[$i]=$list['rain_hourly']*1;
$last24hrrain[$i]=$list['last24hrrain']*1;
$i++;
}
?> <script type="text/javascript">
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var instantrain = ".json_encode($instantrain)."'" ?>);
eval(<?php echo "'var rain_hourly = ".json_encode($rain_hourly)."'" ?>);
eval(<?php echo "'var last24hrrain = ".json_encode($last24hrrain)."'" ?>);
</script>
Así que solo cambiamos el tiempo a trazar y los valores que se incluirán en la
base de datos.
instantrain, rain_hourly et last24hrrain
La parte html y librerías de llamadas no cambian en la zona de java Highcharts, modificaremos:
El título del gráfico
title: {
text: 'Las precipitaciones durante los últimos 10 días',
x: -20
},
El título del eje Y
yAxis: {
title: {
text: 'lluvia (mm)'
},
 
Las unidades que aparecerán en el tooltip
	    tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Pluviometría': ' mm',
'Acumulado 1h': ' mm',
'Acumulado 24h' : ' 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;
},
},
Et bien sur les séries
series: [ 
{
name: 'Pluviometría',
zIndex: 1,
color: '#1e90ff',
type: 'area',
data: comArr(instantrain)
},
{
name: 'Acumulado 1h',
color: '#ff0000',
data: comArr(rain_hourly)
},
{
name: 'Acumulado 24h',
color: '#008000',
data: comArr(last24hrrain),
}
]
El tipo de gráfico se ha cambiado para lluvia; para los otros valores
tenemos una línea de "spline" y para este valor se traza la forma de área.
Su gráfico debe ser como esto:
No pongo el fichero completo para descargar, pues para que usted continue haciendo sus propios gráficos, deberá ser capaz de realizarlo.

 

 

 

Untitled Document

  • 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 .
      Untitled Document
    Station Davis Vantage Pro 2 + station agricole - Weatherlink 6.0.0 - GraphWeather 3.0.15
    © 2010-2013, Météo Villarzel - Webmaster Aubert Pierre-André

    Attention, les données météo publiées sur ce site sont issues d'une station météo personnelle et ne sont données qu'à titre indicatif,
    elles ne peuvent en aucun cas être utilisées pour garantir la protection des personnes ou de biens quelconques.
    Stations amies

     

    MySQL - Highcharts  página n°6
    Mi segundo gráfico, la pluviometría.