User Experience. Data Representation on Complex Graphics



Hello! What will be the best approach to represent device state values on a complex graphical object in user experience page/dashboard? For instance, something like that:
Basically, need to repeat traditional SCADA GUI approach, when equipment plus real time values are shown to an operator as one visual object.


Hi @Alexander_Kondrov,

This is definitely possible. Here is how it would work from the highest level:

In an Experience Page, you can render an image. Then, using HTML and CSS, overlay that image with the values of said device. Those values can come from the page data you send to the Experience Page, or it can be done with client-side Javascript using an Experience API Endpoint.

To make it easy for you, we are going to work on an example for you, and I’ll post here!

Just to make you aware: You can also do some complex charting using the Custom Chart Block.

This is a very flexible and powerful block we made to allow you to make some really interesting visualizations. Behind the scenes, we leverage a library called Vega Lite. Here are some examples of the kinds of visualizations you can make:

Happy to answer any questions in the meantime.


Hi Taron,
I was able to paste Vega-lite examples to my test user experience pages as well as try to copy some tables from third-party table generators available online. The last thing that seems to start working is sending pagedata from experience workflow to experience page. I was able to publish a constant value. Thank you for your post.


Here’s an example I’m working on that does something similar to what you wanted.

It uses Leaflet to handle the zooming, panning, and rendering the overlays (thanks to @anaptfox for the recommendation).

I followed this guide for rending an image instead of the typical map tiles.

I then used the DivIcon to render completely custom overlays.

The small spark graphs are built directly using Vega-Lite.

I use the External Website Block to add a custom Experience Page to the dashboard. This visual is implemented as an Experience Page. This dashboard is intended to be viewed as an Experience Dashboard Page, which means the user’s authentication details are automatically available to the embedded block as well (because they’re hosted from the same domain). This lets me have a fully secure and authenticated dashboard even when embedding an external page like this.

There’s JavaScript in the Experience Page that polls an Experience Endpoint for the updated status values for whatever device is being displayed.


To follow up on this, here’s the main page’s HTML, which provides a little insight into how I organize my resources:

    <script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

    <script type="text/javascript">
      {{component "script"}}

    <link rel="stylesheet" href="" />
      {{component "style"}}
  <body style="padding:0px; margin:0px; width:100%; height:100%; overflow:hidden;">
    <div id="map" style="width:100%; height:100%;"></div>

My JavaScript file and style sheet are implemented as Components, which I then include into the header using the {{component}} helper. I write everything using the Losant CLI. I really like the losant experience watch command, which automatically uploads all changes to any Page or Component I edit.

Almost all of the actual rendering is done client-side in my JavaScript file.