Adding weekend banding to FLOT charts

[wile1411]

I'm looking to add weekend vertical banding to the 'Week' and 'Month' chart views for my gateway (I've not updated to 9.1 yet)
I can see it can be done. I just don't have the solution now.

I checked out as few examples and see the process is straight forward in that is just needs an array of xaxis 'markings' added to the grid object.
I found the below code that gave a rough example, but it using a moment js library that I need to test. For the most part, I'll need to do some adjustments so it doesn't change the starting point of of the chart. I'll also need to work out how to add it into the gateway code.

So this will be my 'starting point' and it's certainly not just copy paste yet, but I'll be poking at this for a bit to see what I can get to work.


Before I get too far into looking into this, has anyone done something like this already?

Rough Code Source Link

Code: [Select]

function color_weekends (axes) {

	var ax = axes
	  // shade weekends on grid layout
	  , markings = []
	  
	  // start xaxis on the Saturday prior to 1st observation in our data
	  , xmin = moment(ax.xaxis.min).day(-7)
	  , xmax = moment(ax.xaxis.max)
	  , one_week = moment.duration(7, 'days').asMilliseconds()
	  , weekend = moment.duration(2, 'days').asMilliseconds();

	for (i = xmin._i; i < xmax._i; i += one_week) {
	  var week = {
		  xaxis: {
			  from: i ,
			  to: i + weekend
		  }
	  }
	  markings.push(week)
	}
	return markings
}

Edit: Not as easy as I first thought, but I'll keep thinking on it.
I can 'manually force' it by just stuffing something like the below code into the chart options for the metric. This will produce want I want it to show. This attached example image shows weekends for a motion Moteino that I set up in my shed. I've been in there most weekends, but I can see I've been out there a few times during the week in late June.

While it would be nice to have the code that generates range of weekend markings to be be in the Metrics section. There's a catch...  It needs to know the chart dataset range and that's only known when the JS code in index.html page runs.

Code: [Select]

grid: { 
	markings: [
	// July Weekends example
	{ xaxis: { from:  1593784800000, to: 1593957599000 }, color: "#808080" }, 
	{ xaxis: { from:  1594389600000, to: 1594562399000 }, color: "#808080" }, 
	{ xaxis: { from:  1594994400000, to: 1595167199000 }, color: "#808080" }, 
	{ xaxis: { from:  1595599200000, to: 1595771999000 }, color: "#808080" }
	]
}

[Felix]

This is very cool actually. I have to find some time to look at the code and all.
Could be turned ON by a setting perhaps (global? node?).
Also, just a thought - to ensure contrast with the background, maybe color can me made as some offset from any background colors.