Tutoriel MySQL - Highstock

Chart with multiple axes

 

To plot a graph of various different data such as the temperature, humidity and pressure, the graph will be easier to read if we put several axes. As this graph that we create
You already know the principle, note that we have selected five values, and date
<?php //Call script command to login require("mysql_connect.php"); // The date and time of the last record is retriev $sql="select max(tstamp) from data"; $query=mysql_query($sql); $list=mysql_fetch_array($query); // Determines the stop and start on the way to retrieve the next request // data last xx heures $stop=$list[0]; $start=$stop-(86400); // Retrieves data from the past 48 hours in ascending order of date and time $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; // outside temperature $outdoorhumidity[$i]=$list['outdoorhumidity']*1; // outdoor humidity $dewpoint[$i]=$list['dewpoint']*1; // Dewpoint $instantrain[$i]=$list['instantrain']*1; // Rain $sealevelpressure[$i]=$list['sealevelpressure']*1; // Pressure $i++; } ?>
We encode the data in 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>
We call libraries
<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>
We started the chart. The rationale is the same as in the previous figures
<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({ }); chart = new Highcharts.Chart({ chart: { renderTo: 'container', zoomType: 'x', alignTicks: false, }, title: { text: 'Temperature, pressure, relative humidity, dew point and the last 24 hours', x: -0 }, credits: { text: 'Météo Villarzel', href: 'http://www.boock.ch/meteo-villarzel.php' }, xAxis: { type: 'datetime', },
Now let's define our 4 axis Y, Why only 4, if we have 5 values to plot? Simply because the temperature and the dew point will be on the same axis in ° C
So for the first axis' temperature and dew point ", we have:
yAxis: [{ // 1er yAxis (numero 0) gridLineWidth: 0, labels: {formatter: function() {return this.value +'°C'; }, style: { color: '#FF0000' } }, title: { text: 'Temperature and dew point', style: { color: '#FF0000' } }, },
We defined for this axis, one unit (° C) a coulor and text (title)
Do the same for the pressure axis
{ // 2ème yaxis (numero 1) gridLineWidth: 0, min:980, title: { text: 'Pressure', style: { color: '#2E8B57' }} }, labels: { formatter: function() { return this.value +' hPa'; }, style: { color: '#2E8B57' } }, opposite: true },
You may have noticed that there are two new instructions, min: 980 This sets the minimum scale at 980 hPa in this example opposite: true; this statement places the scale as opposed to the default level, that is, to the right of the graph
Now the axis of the humidity
{ // 3ème yaxis (numero 2) gridLineWidth: 0, tickInterval:10, min:0, max: 100, title: { text': Humidity ' style: { color: '#0000FF' } }, labels: { formatter: function() { return this.value +' %'; }, style: { color: '#0000FF' } }, opposite: true },
We set the values ??of the scale from 0 to 100% and lod we have placed on the right.
In the last axis, the rains
{ // 4ème yaxis (numero 3) gridLineWidth: 0, min:0, tickInterval:0.2, title: { text:'Rain', style: { color: '#4572A7' } }, labels: { formatter: function() { return this.value +' mm'; }, style: { color: '#4572A7' } }, }],
You may have noticed that there are 4 axes are numbered 0, 1, 2 and 3, it is important to define in the series, which data is assigned to what scale. }], Close also all square brackets [], parentheses (), braces {} and NOT you forget a comma, as the graph is not display
As with other graphs, we define the tooltip (information tool)
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 = { 'Pressure': ' mb', 'Température': '°C', 'Humidity' : '%', 'Dewpoint' : '°C', 'Rainfall' : '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; }, },
Let's turn markers off in the general settings of the chart, this will prevent them for each series. It also adds to the party, a time (animation): 3 seconds to draw lines on the graph; is in milliseconds.
plotOptions: { series: { marker: { enabled: false },animation: { duration: 3000 } } },
It remains to define the series, start with the temperature, but the order does not matter.
series: [ { name: 'Température', zIndex: 1, yAxis: 0, color: '#ff0000', lineWidth: 3, type: 'spline', data: comArr(outdoortemperature), },
We associate it with the first axis, ie 0, remember what we said earlier about the numbering of the axes,a numérotation des axes,
The same applies to the pressure, the second axis, so YAXIS: 1
{ name: 'Pressure', color: '#2E8B57', yAxis: 1, type: 'spline', data: comArr(sealevelpressure) },
The humidity range in axis 2
{ name: 'Humidity', color: '#233aff', yAxis: 2, type: 'spline', data: comArr(outdoorhumidity), },
The dew point series in axis 0
{ name: 'Dew point', color: '#3399FF', yAxis: 0, zIndex: 2, type: 'spline', data: comArr(dewpoint), },
Precipitation in the series axis 3, also changes the chart type, will not see this line type information, but in a column (column)
{ name: 'Précipitations', color: '#4572A7', pointPadding: -0.2, yAxis: 3, type: 'column', data: comArr(instantrain), } ]
We finished the part of the graph, closing all instructions and closing the script tag
}); }); }); </script>
If you have placed a head tag, we close, we call the graph in the body with the desired dimensions and close the html tag
</head> <body> <div id="container" style="width: 750px; height: 400px; margin: 0 auto"></div> </body> </html>
Well, we done !
Download the full file.

 

 

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.