Question regarding shading areas of control chart

plotly.js
1

Hello, I am plotting lab data stored in MSSQL. No problems there. However, I want to SHADE rectangular areas of the plot. Also, no problem there. Only issue is, I can’t seem to put the shaded green, yellow, and red areas in BACKGROUND of plot so that I can still hover over points and see values.

I tried ‘layer: below’ but it had no impact. I think there is something basic I am missing here.

I would also like to be able to zoom without moving the shaded areas ‘out of the way’ so that I can select and click on plot background to zoom.

Any help appreciated!

-Frank

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>LIMS Plotting Test</title>
  <style type="text/css">
    html, body {
        height: 95vh;
        margin: 0px;
    }
    .container {
        height: 95vh;
        background: #f0e68c;
    }
  </style>
  <meta name="description" content="LIMS Plotting Test">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
  
  <div id="plotly-chart" style="height:95vh";>   <!-- Plotly chart will be drawn inside this DIV --> </div>

  <!-- Plotly.js -->
  <!--<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>-->
  <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.min.js"></script>-->
  <script src="/lib/plotly-latest.min.js"></script>
  <script src="/lib/math.min.js"></script>
  <script>

  // for above can use either "https://cdn.plot.ly/plotly-latest.min.js" or "/plotly.js"
// From: https://www.w3schools.com/js/js_json_parse.asp
// basis: https://bl.ocks.org/enactdev/2c45cfa8456fde957898c619ec489cf7
// 	    var plotly_vars = JSON.parse( '{"data":[ {' + this.responseText + '"type": "scatter", "name":"Plot 1" } ],"layout":{ "showlegend": true, "legend": {"orientation": "h"}  } }' );
var queryString = document.location.href; // for URL parameter within iFrame
var urlParams = new URL(queryString);
var ChartType = urlParams.searchParams.get("ChartType");
var ChartTitle = urlParams.searchParams.get("ChartTitle");
var Analyte = urlParams.searchParams.get("Analyte");
var LCL1 = parseFloat(urlParams.searchParams.get("LCL1"));
var Target = urlParams.searchParams.get("Target");
var UCL1 = parseFloat(urlParams.searchParams.get("UCL1"));
var LSL = parseFloat(urlParams.searchParams.get("LSL"));
var USL = parseFloat(urlParams.searchParams.get("USL"));

console.log('ChartType: ' + ChartType);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
 
	   	var xydata_text =  '{"data":[ {' + this.responseText + '"mode": "lines+markers","type": "scatter", "name":"Plot 1" } ] }';
        var xydata = JSON.parse(xydata_text); // Extract [x,y] data into JavaScript arrays
		num_pts = xydata.data["0"].x.length; // Number of points in [x,y] dataset
		mean = math.round ( math.mean(xydata.data["0"].y), 2); // Compute mean across y-value array using math.js https://mathjs.org/docs/reference/functions.html
		sigma = math.round ( math.std(xydata.data["0"].y), 2); // Compute standard deviation across y-value array using math.js https://mathjs.org/docs/reference/functions.html
		//Target=25.7;
		//LCL1 = 25.7;
		LCL2 = LCL1 - sigma;
		LCL3 = LCL2 - sigma;
		// LCL3 = math.min( xydata.data["0"].y ); // Find minimum data value across array using math.js https://mathjs.org/docs/reference/functions.html
		//UCL1 = 26.0;
		UCL2 = UCL1 + sigma;
		UCL3 = UCL2 + sigma;
		// UCL3 = math.max( xydata.data["0"].y ); // Find maximum data value across array using math.js https://mathjs.org/docs/reference/functions.html
		
		console.log(xydata.data["0"].x);
	    console.log('zNumber of points in x-values array: ' + num_pts);
	    console.log('Mean: ' + mean);
		console.log('Sigma: ' + sigma);
		console.log('First pt x-value:' + xydata.data["0"].x[1]);
		console.log('Last pt x-value:' + xydata.data["0"].x[num_pts-1]); // Array elements start at zero, hence the need to subtract 1 in indice reference
		console.log('LCL1:' + LCL1);
		console.log('LCL2:' + LCL2);
		console.log('LCL3:' + LCL3);
		console.log('UCL1:' + UCL1);
		console.log('UCL2:' + UCL2);
		console.log('UCL3:' + UCL3);
		

        var plotly_vars_text =  '{"data":[ {' + this.responseText + '"mode": "lines+markers","type": "scatter", "name":"Plot 1" } ],';
	   //mode: 'lines+markers'
		plotly_vars_text = plotly_vars_text + '"layout":{ "showlegend": true, "legend": {"orientation": "h"}   ' ;

	//	plotly_vars_text = plotly_vars_text + ',"title":"VTX6 Base Oil Viscosity at 40 deg C"' ; // Chart title -- see https://plot.ly/javascript/figure-labels/
		plotly_vars_text = plotly_vars_text + ',"title":"' + ChartTitle + '"' ; // Chart title -- see https://plot.ly/javascript/figure-labels/
		plotly_vars_text = plotly_vars_text + ',"xaxis": {"title": {"text": "x Axis"}}'; // X-Axis label
	  	plotly_vars_text = plotly_vars_text + ',"yaxis": {"title": {"text": "y Axis"}}'; // Y-Axis label
        //Below based upon highlighting time series: https://plot.ly/javascript/shapes/ 
		
		plotly_vars_text = plotly_vars_text + ',"shapes": [ { "type": "rect",'; // Render a transparent, filled green-shaded rectangle between LCL1 and UCL1
        plotly_vars_text = plotly_vars_text + '"xref": "paper",'; // normalized paper coordinates on x-axis: 0=left edge of plotting area, 1=right edge of plotting area
        plotly_vars_text = plotly_vars_text + '"yref": "y",'; // Engineering-unit/data unit coordinates on y-axis, e.g. cSt, etc
        plotly_vars_text = plotly_vars_text + '"x0": "0",'; // x0=0 in normalized paper coordinates = left edge of plot
		plotly_vars_text = plotly_vars_text + '"y0": "' + LCL1 + '",';
        plotly_vars_text = plotly_vars_text + '"x1": "1",'; // x1=1 in normalized paper coordinates = right edge of plot
		plotly_vars_text = plotly_vars_text + '"y1": "' + UCL1 + '",';
        plotly_vars_text = plotly_vars_text + '"fillcolor": "#61ff00",'; // HTML RGB color value for green
        plotly_vars_text = plotly_vars_text + '"opacity": "0.2",';
		plotly_vars_text = plotly_vars_text + '"layer": "below",';
        plotly_vars_text = plotly_vars_text + '"line": { "width": "0" } }';
		//document.write (plotly_vars_text); Uncomment this line for troubleshooting; it will dump entire parameter list which is passed to plot.ly when invoked
 

		plotly_vars_text = plotly_vars_text + ', { "type": "rect",'; // Render a transparent, filled yellow-shaded rectangle between UCL1 and UCL2, where UCL2=UCL1+sigma
        plotly_vars_text = plotly_vars_text + '"xref": "paper",'; // normalized paper coordinates on x-axis: 0=left edge of plotting area, 1=right edge of plotting area
        plotly_vars_text = plotly_vars_text + '"yref": "y",'; // Engineering-unit/data unit coordinates on y-axis, e.g. cSt, etc
        plotly_vars_text = plotly_vars_text + '"x0": "0",'; // x0=0 in normalized paper coordinates = left edge of plot
		plotly_vars_text = plotly_vars_text + '"y0": "' + UCL1 + '",';
        plotly_vars_text = plotly_vars_text + '"x1": "1",'; // x1=1 in normalized paper coordinates = right edge of plot
		plotly_vars_text = plotly_vars_text + '"y1": "' + UCL2 + '",';
        plotly_vars_text = plotly_vars_text + '"fillcolor": "#ebf442",'; // HTML RGB color value for yellow
        plotly_vars_text = plotly_vars_text + '"opacity": "0.2",';
		plotly_vars_text = plotly_vars_text + '"layer": "below",';
        plotly_vars_text = plotly_vars_text + '"line": { "width": "0" } }';
		
		plotly_vars_text = plotly_vars_text + ', { "type": "rect",'; // Render a transparent, filled yellow-shaded rectangle between LCL1 and LCL2, where LCL2=LCL1-sigma
        plotly_vars_text = plotly_vars_text + '"xref": "paper",'; // normalized paper coordinates on x-axis: 0=left edge of plotting area, 1=right edge of plotting area
        plotly_vars_text = plotly_vars_text + '"yref": "y",'; // Engineering-unit/data unit coordinates on y-axis, e.g. cSt, etc
        plotly_vars_text = plotly_vars_text + '"x0": "0",'; // x0=0 in normalized paper coordinates = left edge of plot
		plotly_vars_text = plotly_vars_text + '"y0": "' + LCL2 + '",';
        plotly_vars_text = plotly_vars_text + '"x1": "1",'; // x1=1 in normalized paper coordinates = right edge of plot
		plotly_vars_text = plotly_vars_text + '"y1": "' + LCL1 + '",';
        plotly_vars_text = plotly_vars_text + '"fillcolor": "#ebf442",'; // HTML RGB color value for yellow
        plotly_vars_text = plotly_vars_text + '"opacity": "0.2",';
		plotly_vars_text = plotly_vars_text + '"layer": "below",';
        plotly_vars_text = plotly_vars_text + '"line": { "width": "0" } }';
		
		plotly_vars_text = plotly_vars_text + ', { "type": "rect",'; // Render a transparent, filled red-shaded rectangle between LCL3 and LCL2, where LCL3=minimum data value
        plotly_vars_text = plotly_vars_text + '"xref": "paper",'; // normalized paper coordinates on x-axis: 0=left edge of plotting area, 1=right edge of plotting area
        plotly_vars_text = plotly_vars_text + '"yref": "y",'; // Engineering-unit/data unit coordinates on y-axis, e.g. cSt, etc
        plotly_vars_text = plotly_vars_text + '"x0": "0",'; // x0=0 in normalized paper coordinates = left edge of plot
		plotly_vars_text = plotly_vars_text + '"y0": "' + LCL3 + '",';
        plotly_vars_text = plotly_vars_text + '"x1": "1",'; // x1=1 in normalized paper coordinates = right edge of plot
		plotly_vars_text = plotly_vars_text + '"y1": "' + LCL2 + '",';
        plotly_vars_text = plotly_vars_text + '"fillcolor": "#ff0000",'; // HTML RGB color value for red
        plotly_vars_text = plotly_vars_text + '"opacity": "0.2",';
		plotly_vars_text = plotly_vars_text + '"layer": "below",';		
        plotly_vars_text = plotly_vars_text + '"line": { "width": "0" } }';

		plotly_vars_text = plotly_vars_text + ', { "type": "rect",'; // Render a transparent, filled red-shaded rectangle between LCL3 and LCL2, where LCL3=minimum data value
        plotly_vars_text = plotly_vars_text + '"xref": "paper",'; // normalized paper coordinates on x-axis: 0=left edge of plotting area, 1=right edge of plotting area
        plotly_vars_text = plotly_vars_text + '"yref": "y",'; // Engineering-unit/data unit coordinates on y-axis, e.g. cSt, etc
        plotly_vars_text = plotly_vars_text + '"x0": "0",'; // x0=0 in normalized paper coordinates = left edge of plot
		plotly_vars_text = plotly_vars_text + '"y0": "' + UCL2 + '",';
        plotly_vars_text = plotly_vars_text + '"x1": "1",'; // x1=1 in normalized paper coordinates = right edge of plot
		plotly_vars_text = plotly_vars_text + '"y1": "' + UCL3 + '",';
        plotly_vars_text = plotly_vars_text + '"fillcolor": "#ff0000",'; // HTML RGB color value for red
        plotly_vars_text = plotly_vars_text + '"opacity": "0.2",';
		plotly_vars_text = plotly_vars_text + '"layer": "below",';		
        plotly_vars_text = plotly_vars_text + '"line": { "width": "0" } }';
		
		
		plotly_vars_text = plotly_vars_text + ',{ "type": "line",' // Render a horizontal line across plot at y=target value
        plotly_vars_text = plotly_vars_text + '"xref": "paper",'; // normalized paper coordinates on x-axis: 0=left edge of plotting area, 1=right edge of plotting area
        plotly_vars_text = plotly_vars_text + '"yref": "y",'; // Engineering-unit/data unit coordinates on y-axis, e.g. cSt, etc
        plotly_vars_text = plotly_vars_text + '"x0": "0",'; // x0=0 in normalized paper coordinates = left edge of plot
		plotly_vars_text = plotly_vars_text + '"y0": "' + Target + '",';
        plotly_vars_text = plotly_vars_text + '"x1": "1",'; // x1=1 in normalized paper coordinates = right edge of plot
		plotly_vars_text = plotly_vars_text + '"y1": "' + Target + '",';
		//plotly_vars_text = plotly_vars_text + '"line": { "color": "red","width": "4", },}';
		plotly_vars_text = plotly_vars_text + '"line": { "color": "red","width": "4" }}';	
			
		plotly_vars_text = plotly_vars_text + ']'; // End shapes: definition
		//console.log(plotly_vars_text);
		
		
		
	    plotly_vars_text = plotly_vars_text + ',"annotations": [';
        plotly_vars_text = plotly_vars_text + '{ "x": "0.0",';
        plotly_vars_text = plotly_vars_text + '"y": "1.08",';
        plotly_vars_text = plotly_vars_text + '"xref": "paper",';
        plotly_vars_text = plotly_vars_text + '"yref": "paper",';

		plotly_vars_text = plotly_vars_text + '"text": "Mean: x̄ = ' + mean + '<br>Sigma σ = ' + sigma + '<br>Target = ' + Target + '",';

        plotly_vars_text = plotly_vars_text + '"showarrow": false } ]'; // Note boolean parameters are not to be enclosed in double quotes
		
        plotly_vars_text = plotly_vars_text + ' } '	; // End layout block
		plotly_vars_text = plotly_vars_text + ' } '	; // end entire data block
	    var plotly_vars = JSON.parse( plotly_vars_text ); // Parse the [x,y] data and layout specifications, into JavaScript arrays that can be passed to the D3-based plot.ly library
		
		
		
		// Invoke plot.ly to render the plot.  ShowLink modifier: Allows full plot editing.  Responsive modifier: Re-draws plot if window resized.  Editable modifier: Allows title, axis label, etc to be edited by user
        Plotly.newPlot('plotly-chart', plotly_vars['data'], plotly_vars['layout'], {showLink: true,responsive: true,editable: true} );
    }
};
//xmlhttp.open("GET", "/loadLIMSdata2.asp", true);
		var utcSeconds = new Date().getTime()/1000;
        var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
        d.setUTCSeconds(utcSeconds);
        var nowdatestr = (d.getFullYear() + "-" + (((d.getMonth()+1) < 10)?"0":"") + (d.getMonth()+1) + "-" + ((d.getDate() < 10)?"0":"") + d.getDate()   );
        var nowtimestr = (   ((d.getHours() < 10)?"0":"") + d.getHours() +":"+ ((d.getMinutes() < 10)?"0":"") + d.getMinutes() +":"+ ((d.getSeconds() < 10)?"0":"") + d.getSeconds()   );
        utcSeconds = utcSeconds - 14*24*60*60; // This example calculates time/date 14 days ago -- 14 days x 24 hours per day x 60 min per hour x 60 seconds per minute
        var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
        d.setUTCSeconds(utcSeconds);
        var startdatestr = (d.getFullYear() + "-" + (((d.getMonth()+1) < 10)?"0":"") + (d.getMonth()+1) + "-" + ((d.getDate() < 10)?"0":"") + d.getDate()   );
        var starttimestr = (   ((d.getHours() < 10)?"0":"") + d.getHours() +":"+ ((d.getMinutes() < 10)?"0":"") + d.getMinutes() +":"+ ((d.getSeconds() < 10)?"0":"") + d.getSeconds()   );
        console.log('startdatestr' + startdatestr+ ' starttimestr: ' + starttimestr);
        console.log('nowdatestr' + nowdatestr + 'nowtimestr: ' + nowtimestr);
        var theURL = "/loadLIMSdata2.asp?r=" + encodeURIComponent(  new Date() ) + "&Project=" + encodeURIComponent("Base Oil") + "&Location=" + encodeURIComponent("Any") + "&Analyte=" + encodeURIComponent(Analyte);
        theURL = theURL + "&StartDateStr=" + encodeURIComponent(startdatestr) + "&EndTimeDateStamp=" + encodeURIComponent(nowdatestr + " " + nowtimestr);
		console.log('URL to retrieve: ' + theURL);

xmlhttp.open("GET", theURL, true);
xmlhttp.send(); 
  
  </script>
  
</body>
</html>
LIMS Plotting Test html, body { height: 95vh; margin: 0px; } .container { height: 95vh; background: #f0e68c; }
2

Please ignore my previous post; the invocation of plot.ly was calling for

{showLink: true,responsive: true,editable: true}

This was my error; setting this combination allows the rectangle shapes (shaded areas of plot) to be edited and puts them in foreground. Removing this fixed it–hovering mouse above points now shows (x,y) pairs AND I can zoom without moving shaded rectangles around. I still had an issue with iFrames caching, but fixed that too. I wanted to note this in case it helps anyone else.

BTW, this library is fantastic for plotting industrial data!

1 Like