Build Custom Component Status Diagram for Power BI using Synoptic

One common visualisation requirements of IoT analytics is to display the current status of machine components using status diagram of the machine in an interactive reporting tool such as Power BI. The task to build custom machines diagram can be very time-consuming for report authors.

Fortunately, I found we can actually build machine diagrams for Power BI very easily and quickly based on Synoptic panel which is a Power BI visual originally designed for spatial visualisation purpose. This blog post gives a demo on how to build machine diagrams using Synoptic.

Firstly, we need to make a static image of the machine with all components we want to monitor. In this example, I create an simple abstract image (using PowerPivot) with four components, power, heater, motor and pump. If we want, we can make some much nicer, high fidelity image for the machine.


We then open the web-based Synoptic Designer tool located at: This tool is used to draw custom areas over any component and export it as SVG file. When you draw an area on a component, an area tag will be created (on left side panel), you need to name the area tag with the label match the data attribute in the Power BI dataset. For example, if you want to use the ComponentName column to map area tags, you need to name the area tags using the exact component name stored in the ComponentName column.


In Power BI, you need to add the Synoptic panel on to the canvas and loads the SVG file and into the panel.  Then, you need to map the component name data field to Synoptic panel. In addition, you need to map the component status value field (in numeric format) to the Measure field of the Synoptic Panel.

Next, you need to open the format panel of the Synoptic panel visual and set the States attribute. In this example, we set State A (normal) as 0 and State B (error) as 1 that is matched with the status value in dataset.


After all set up, we can have our machine diagram to show the status of each component based on the dataset.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s