BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Hide plotBands

Fri Dec 03, 2021 10:47 am

Hello,

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();
              }
          });
      });
	
Then there is the button as you will see below the graphic.

mateusz.b
Posts: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Hide plotBands

Fri Dec 03, 2021 2:05 pm

Hello BenjiG,

Welcome to our forum and thanks for contacting us with your question!

I appreciate sharing that piece of code but I need you to provide me with simplified working demo. Data can be hardcoded. You can start here:
https://jsfiddle.net/BlackLabel/g96kt8jo/

Regards!
Mateusz Bernacik
Highcharts Developer

BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Re: Hide plotBands

Sun Dec 05, 2021 11:01 am

Hello !
Sorry for the delay;

In the meantime, I have managed to solve my problem.

I am using a button system to display the PlotBands.
It works quite well with the brown buttons: https://raspigournayaronde.sytes.net/Gr ... phique.php

I have just one more thing to do.
If the user uses a very large range of data in the bottom navigator, the loading times of the buttons are very long (sometimes more than 10 seconds).
Is it possible to put a waiting message thanks to a "div" in the code below :

Code: Select all

document.getElementById('btnpress').addEventListener('click', e => {
	 if (!hasPlotBand) {
		
		seriespress.show();
		seriespluie.hide();
		seriestemp.hide();
		serieshum.hide();
		seriesuv.hide();
		seriessol.hide();
		seriessoltheo.hide();
		seriesvent.hide();
		seriesraf.hide();
		seriesdir.hide();
		document.getElementById('btntemp').style.visibility = 'hidden';
		document.getElementById('btnbeauf').style.visibility = 'hidden';
		document.getElementById('btnrosevent').style.visibility = 'hidden';
		
        chart.yAxis[2].addPlotBand(
		{
		// Depression
            from: 989,
            to: 1010,
			id:'Depression',
            color: 'rgba(26, 92, 233, 0.2)',
            label: {
                text: 'Depression',
                style: {
                    color: '#000000',
					fontWeight: 'bold',
					fontSize:'15px'
                }
            }
        });
		chart.yAxis[2].addPlotBand(
		{
		// Pression moyenne
            from: 1010,
            to: 1018,
			id:'Pression moyenne',
            color: 'rgba(26, 196, 233, 0.2)',
            label: {
                text: 'Pression moyenne',
                style: {
                    color: '#000000',
					fontWeight: 'bold',
					fontSize:'15px'
                }
            }
        });
		chart.yAxis[2].addPlotBand(
		{
		// Anticyclone
            from: 1018,
            to: 1040,
			id:'Anticyclone',
            color: 'rgba(248, 201, 41, 0.2)',
            label: {
                text: 'Anticyclone',
                style: {
                    color: '#000000',
					fontWeight: 'bold',
					fontSize:'15px'
                }
            }
        });
		chart.yAxis[2].addPlotBand(
		{
		// Tempête
            from: 965,
            to: 989,
			id:'Tempête',
            color: 'rgba(108, 37, 250, 0.2)',
            label: {
                text: 'Depression creuse / Tempête',
                style: {
                    color: '#000000',
					fontWeight: 'bold',
					fontSize:'15px'
                }
            }
        });
		  e.target.innerHTML = 'Enlever seuils de pression';


    } else {
        chart.yAxis[2].removePlotBand('Tempête');
		chart.yAxis[2].removePlotBand('Anticyclone');
		chart.yAxis[2].removePlotBand('Pression moyenne');
		chart.yAxis[2].removePlotBand('Depression');
		document.getElementById('btntemp').style.visibility = 'visible';
		document.getElementById('btnbeauf').style.visibility = 'visible';
		document.getElementById('btnrosevent').style.visibility = 'visible';

        e.target.innerHTML = 'Afficher seuils de pression';
    }
    hasPlotBand = !hasPlotBand;
});
Thanks

BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Re: Hide plotBands

Mon Dec 06, 2021 12:08 pm

Hello,

I bring the solution to my last message,
For the waiting message, it is enough to put between if (!hasPlotBand) { },
this : setTimeout( function () { }, 100); with the code in the middle.


And just before all that : waitmess.style.display = "block";

Just remembering before you close setTimeout : waitmess.style.display = "none";

it only remains to add the div where you want with the content of the waiting message.

mateusz.b
Posts: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Hide plotBands

Tue Dec 07, 2021 10:53 am

Hi BenjiG,

Really glad to hear you solved it all on your own. Very impressive and thanks a lot for sharing solution for waiting message, similar questions are being frequently asked by forum users!

If there is anything I can help you with let me know.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”