I use Highchart to generate graphs of my weather station.
However, I have several proposals to display plotBands on the Y axis => http://90.0.107.229/Graphique/graphique.php (it's in French) but I had the bad idea to use a form with a dropdown list that resets my page.
So I wanted to use this function : http://jsfiddle.net/nhng5827/pef9acLm/3/
But I don't understand why it doesn't work for me.
I try to put as little code as possible.
First of all the graph with at least the first Y axis with the temperatures.
Code: Select all
// create the chart
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
zoomType: 'x',
subtitle: {
text: '',
floating: true,
y : 200,
align: 'right'
},
events: {
<?php if(!empty($_POST["firstdate"])) { ?>
load: function() {
this.xAxis[0].setExtremes(Date.UTC(<?php echo $firstdate['annee'];?>, <?php echo ltrim($firstdate['mois'],"0")-1;?>, <?php echo ltrim($firstdate['jour'],"0");?>,<?php echo $firstdate['heure'];?>,<?php echo $firstdate['minute'];?>),Date.UTC(<?php echo $lastdate['annee'];?>,<?php echo ltrim($lastdate['mois'],"0")-1;?>,<?php echo ltrim($lastdate['jour'],"0");?>,<?php echo $lastdate['heure'];?>,<?php echo $lastdate['minute'];?>));
},
<?php } ?>
redraw: function(event) {
var extremesObject = this.xAxis[0].getExtremes(),
min = extremesObject.min,
max = extremesObject.max;
var cumul=0;
for (var j = 0; j < timearray.length; j++) {
if (timearray[j] >= min && timearray[j] <= max && pluiearray[j] > pluiearray[j-1]) cumul=cumul+pluiearray[j]-pluiearray[j-1];
}
if (this.series[2].visible || this.series[3].visible) this.setTitle(null, { text: 'Cumul pluviométrique sur la période affichée : '+ Math.round(cumul*10)/10 + ' mm', floating : true,y : 587 });
else this.setTitle(null, { text: '', floating : true });
}
}
},
exporting: { enabled: true },
rangeSelector : {
buttonTheme: {
width:70
},
buttons: [{
type: 'hour',
count: 12,
text: '12 heures'
}, {
type: 'hour',
count: 24,
text: '24 heures'
}, {
type: 'hour',
count: 48,
text: '48 heures'
}, {
type: 'hour',
count: 72,
text: '72 heures'
},{
type: 'week',
count: 1,
text: '1 semaine'
},{
type: 'week',
count: 2,
text: '2 semaines'
},{
type: 'month',
count: 1,
text: '1 mois'
}],
inputEnabled: true,
inputDateFormat: '%d-%m-%Y',
selected : 2
},
credits: {
text: 'Météo Gournay sur Aronde',
href: 'https://www.meteo-gournaysuraronde.fr'
},
legend: {
enabled: true,
align: 'center',
backgroundColor: '#FFFFFF',
borderColor: 'black',
borderWidth: 1,
layout: 'horizontal',
verticalAlign: 'top',
y: 0,
x: 20,
shadow: true
},
xAxis: {
type: 'datetime',
gridLineWidth: 0.4
},
yAxis: [{
gridLineWidth: 0.4,showLastLabel: true,
title: {text: "°C",offset:10,style:yTitles},
labels: {align: "right",x: -1,y:4,formatter: function () {
if (this.value > 0) {
return '<span style="fill: red;">' + this.value + '</span>';
} else {
return '<span style="fill: blue;">' + this.value + '</span>';
}
},style:yLabels},
plotBands: [{ // Très froid
from: 2,
to: 6,
color: 'rgba(132, 191, 234, 0.2)',
label: {
text: 'Très froid',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Gel
from: -3,
to: 2,
color: 'rgba(146, 203, 245, 0.2)',
label: {
text: 'Gel',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Frais
from: 6,
to: 11,
color: 'rgba(19, 139, 228, 0.2)',
label: {
text: 'Frais',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Grand froid
from: -12,
to: -7,
color: 'rgba(108, 37, 250 , 0.2)',
label: {
text: 'Grand froid',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
},{ // Grand froid
from: -7,
to: -3,
color: 'rgba(88, 39, 242 , 0.2)',
label: {
text: 'Grand froid',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Fraicheur
from:11,
to: 16,
color: 'rgba(39, 238, 193 , 0.2)',
label: {
text: 'Fraicheur',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Agréable
from:16,
to: 22,
color: 'rgba(35, 201, 80 , 0.2)',
label: {
text: 'Agréable',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Chaud
from:22,
to: 28,
color: 'rgba(225, 250, 12 , 0.2)',
label: {
text: 'Chaud',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Très chaud
from:28,
to: 32,
color: 'rgba(248, 194, 9 , 0.2)',
label: {
text: 'Très chaud',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}, { // Caniculaire
from:32,
to: 50,
color: 'rgba(237, 64, 13 , 0.2)',
label: {
text: 'Caniculaire',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize:'15px'
}
}
}],
Then the function that I set up like this:
Code: Select all
function (chartObj) {
$('#btn').click(function () {
var plotBand = chartObj.yAxis[0].plotBands[0];
if (plotBand.hidden) {
plotBand.hidden = false;
plotBand.svgElem.show();
} else {
plotBand.hidden = true;
plotBand.svgElem.hide();
}
});
});