1. To create custom SVG panels, obtain the SCADAvis Synoptic Editor from de Microsoft Store (Windows 10
2. Open the editor and resize the page to the reference size of 1000 x 1000 pixels. Access menu File |
Document Properties | Page | Custom Size.
On the same dialog, "Scale" section change "Viewbox" width and height to 1000.
Other sizes can be used but 1000 x 1000 pixels will show the full page when the custom visual has the Zoom Level
adjustment equal to 1. Save the file somewhere locally.
Download and use the SCADAvis.io Display Development Helper free tool to accelerate creation and test of displays.
This tool contains a local webserver and can update displays automatically with tagged data while the SVG file is edited.
3. The editor allows linking runtime values to graphics properties. For this, use the "Object Properties"
menu, that can be accessed right-clicking a graphical object.
Tags are used to identify runtime values created by the custom visual with Power BI data.
The tags @1, @2, @3 and so on, represent the highest hierarchical level values.
The lowest hierarchical values are represented by @@1, @@2, @@3, etc.
Power BI specific measurement names can be also used to tag objects. Be aware that when you employ specific
names, the SVG file will only work when those specific measurements are selected into the Power BI data panel.
See the editor documentation for a complete reference.
Let's create a simple bar graph and some descriptive text.
Create a rectangle using the Rectangle Tool (F4). Right-click the rectangle and select "Object Properties".
Select the "Bar" tab.
Put the @1
in the "Tag" field. Put 0 in the field "Min" and 1000 in the field "Max".
This will create a bar graph, the height of the rectangle will vary proportionally to the ("Max" - "Min")
Select the "Color" bar.
in the "Tag" field, 0 in the "Limit" and "green" in the "Color Name/Code" field.
Click "Add" in the second line put @1
in the "Tag" field, 500 in the "Limit" and "red" in the "Color
This will make the color of the bar change to red when the value is 500 or more.
Do not forget to Click "Apply" or the modifications will be lost.
There are much more possibilities (rotate, slide, opacity, SMIL animations, etc.), see the editor reference
Now let's put a text below the bar to show the value. Use the Text Tool (F8). Write %.2f
as the text,
this will format the value with 2 decimals.
Right-click the text object and select "Object Properties", select "Get" tab. Put @1
in the "Tag" field.
Create another text object below the previous. Write %s as the text. In the "Get" tab put !DCR @1
will show the description of the first Power BI value.
This example file is available at https://scadavis.io/powerbi/powerbi-scadavis-custom-visual-example1.svg.
4. In Power BI Desktop or Power BI Online Service add the SCADAvis.io custom visual to your project.
5. Add the custom visual to a panel, select some data and click the button to load the SVG file.