Overlay Data On An Image

[intapiuser]

Sometimes we have data that is not easily represented by an existing chart, such as presenting steps in a cycle or a sequence of events. One JavaScript +HTML technique that we can use for this is to overlay an image with text.  

In this example, we have an Image Widget and a series of Indicator Widgets with the data we want to present.

In each of the Indicator Widgets' scripts, we can capture the main and secondary values after they are processed.

// intercept the value as it is processed and pass it to the overlay
widget.on('processresult',function(s,e){
 
 // feed our value to the Overlay script
 OverlayValues.push({key:"build", value:e.result.value.data});
 OverlayValues.push({key:"request", value:e.result.secondary.data});
});

In our Dashboard's Script we define the OverlayValues array when the page loads and overlay the image with the text after each widget refreshes (because we do not know the order in which they will be ready).  

// Create a global array to hold our indicator values
OverlayValues = [];

var imgHTML="";

dashboard.on('initialized',function(s,e){
 // reset our widget values
 OverlayValues=[];
});


// as each indicator widget runs they will append a value to the array

dashboard.on('widgetrefreshed',function(s,e){
 
 // Gather values from our indicators
 console.log(OverlayValues);
 
 var v1=0;
 var v2=0;
 var v3=0;
 var v4=0;
 var v5=0;
 
 for (i = 0; i < OverlayValues.length; i++) {
  switch (OverlayValues[i].key) {
    case "request": v1= OverlayValues[i].value; break;
    case "build": v2= OverlayValues[i].value; break;
    case "test": v3= OverlayValues[i].value; break;
    case "deploy": v4= OverlayValues[i].value; break;
    case "bugfix": v5= OverlayValues[i].value; break; 
  }
 }
 
 // get the Image Widget Details
 var c = document.getElementsByClassName("image-container");
 
 
 if (imgHTML.length==0) { imgHTML=c[0].innerHTML; console.log(imgHTML); }
 
 
 // Overlay our values on the image
 c[0].innerHTML=`<div class="OverlaidImage" style="position: relative; ">`+imgHTML+`
   <div class="hover" style="position:absolute; font-size: 125%; top: 20%; left:50%">`+v1+`</div>
   <div class="hover" style="position:absolute; font-size: 125%; top: 45%; left:82%">`+v2+`</div>
   <div class="hover" style="position:absolute; font-size: 125%; top: 85%; left:69%">`+v3+`</div>
   <div class="hover" style="position:absolute; font-size: 125%; top: 85%; left:29%">`+v4+`</div>
   <div class="hover" style="position:absolute; font-size: 125%; top: 45%; left:18%">`+v5+`</div>
 </div>`
 
});

We create a div tag for each value we want to place on the image, and we use a combination of relative and absolute positioning to float each value over the image. (Note which div is relative and which are absolute.)  

Some Notes on this approach:

• It assumes one Image Widget on the dashboard.
• There are arguably more elegant ways to reference the data in the dashboard script.  The style here was used for proof of concept and clarity.
• Likewise for the CSS. In-line styles were used for clarity of the example.
• The positioning scales reasonably well as the window size changes.  Dynamic font scaling would be a nice addition.
• Positioning is relative to the widget size, not the image size, so if the image does not fill the widget, adjust the percentages accordingly.