1. To create custom SVG panels, obtain the SCADAvis Synoptic Editor from de Microsoft Store (Windows 10
only).
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 from Data Studio data sources.
The tags @1, @2, @3 and so on, represent the values found in order at runtime.
Specific tag 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 data source.
Tag names and data source "Dimension" filed must match exactly.
See the editor documentation for a complete reference on tagging.
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")
range.
Select the "Color" bar.
Put
@1 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
Name/Code" field.
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
material.
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.
Click "Apply".
Create another text object below the previous. Write %s as the text. In the "Get" tab put
!DCR @1. This
will show the description of the first Data Studio panel value.
This example file is available at https://scadavis.io/powerbi/powerbi-scadavis-custom-visual-example1.svg.
4. In Google Data Studio, press the Community Visualizations button, select "Explore More" and "Build your own visualization". Enter the manifest path
"gs://scadavisviz/scadavis/" and submit.
5. Open the SVG file with a text editor copy all contents and paste in the "Style | Config | SVG File" field of Google Data Studio.
6. To use custom visualizations it is necessary to enable them for the data source.
Edit your data source. In the top options bar, click COMMUNITY VISUALIZATIONS ACCESS. Select Community visualization access: ON.
7. Add the data source and drag fields with tag names to "Dimension" and values to "Metric" concepts.