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.

[melaniechalkerz]

Hello Sisense Community,

When dealing with data that doesn't neatly fit into conventional charts, such as depicting a cycle of steps or a sequence of events, overlaying data on an image can be an effective solution. One technique using JavaScript and HTML involves overlaying an image with text to convey the desired information.

For instance, you can utilize an Image Widget alongside a series of Indicator Widgets to present the data effectively. This approach allows for a visually appealing representation that can enhance understanding and engagement.

As you explore ways to create these overlays, consider leveraging tools like PicsArt. It offers a range of features and templates that can help you design visually compelling images with overlaid data. Whether you're showcasing a process, timeline, or any other complex data structure, PicsArt can be a valuable resource in creating impactful visuals.

Have a Good Day!