Tutoriel MySQL - Highcharts

A second graph with rainfall

To understand the process, we create a second graph on the basis of the first, but with other data. Let's draw a graph with a rainfall of 10 days. I show only the differences between the two graphs. It begins as the chart above, open an empty file and add the file to connect to the database and the values ??represent.

<?php // Call script command to login require("mysql_connect.php"); // The date and time of the last record is retrieved $sql="select max(tstamp) from data"; $query=mysql_query($sql); $list=mysql_fetch_array($query); //Determines the stop and start on how to retrieve the next request //for the data from the last xx heuresx heures $stop=$list[0]; $start=$stop-(86400*10); // 86400=24 hours, so for 10 days 86400*10 // Data Recovery 10 days with an ascending order of date and time $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>

So just change the time trace and the values ??to be included in the database. instantrain, rain_hourly andlast24hrrain

The html part and library calls do not change in the area of java Highcharts, modify:

The chart title

title: { text: 'The rainfall during the last 10 days', x: -20 },

Le titre de l'axe y

yAxis: { title: { text: 'rain (mm)' },

Les unités dans le 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 = { 'Rainfall': ' mm', 'Accumulated 1h': ' mm', 'Accumulated 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: 'Rainfall', zIndex: 1, color: '#1e90ff', type: 'area', data: comArr(instantrain) }, { name: 'Accumulated 1h', color: '#ff0000', data: comArr(rain_hourly) }, { name: 'Accumulated 24h', color: '#008000', data: comArr(last24hrrain), } ]

The chart type has been changed to rain; for the other values have a line of "spline" and how this value is plotted area.

Your graph should look like this:

I do not put the entire file to download, then for you to continue doing. Your own graphics, you should be able to do it.

 

 

 

page 01 Load database. page 02 Access database. page 03 Recovery and formatting the data. page 04 Highcharts, my first graph. page 05 Highcharts, my first graphic, wrap ... page 06 My second graph, rainfall. page 07 A chart with multiple axes page 08 Personalization with Highcharts API page 09 Highstock What is it? page 10 Le forum Highcharts is available Este tutorial también está disponible en español Ce tutoriel est disponible en français Did you enjoy this tutorial, worked? Give me your opinion Or help me keep this site running.