Synoptic Visual for Google Data Studio

  • This Google Data Studio custom visual is the first to bring SCADA-like capabilities to the platform.

    This plugin is available for free with live updates as a rolling release (unstable version). It is hosted by us on the GCP platform.

    This is a stable version that can be hosted on the client's corporate GCP Storage Bucket.
    It is licensed per company for the price of US$ 799.00. This is a one-time pay, perpetual license, no limits on servers or users, and comes with 1-year of updates and email support.

    To create graphics it is necessary to use the Synoptic Editor for Windows 10 that has to be licensed for each user on the Microsoft Store, see below. Out-of-store version of the editor for corporate use costs US$ 129.99 per user (request license here [email protected]).
Sample Panel
Click here to open the example report.
Reference Material
Getting started

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 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

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.