Share and embed Visualizations
All interactive visualizations created with the Trendz Analytics Platform could be shared with other users and embed on ThingsBoard Dashboards or external sites. In this guide, you will learn how to do this.
Share via ThingsBoard dashboard
You can share created visualizations or even provide a self-service interface for your users by adding Trendz widgets on ThingsBoard dashboards. Follow 2 simple steps to make it:
Import Trendz widget bundle
At the beginning you need to import Trendz widgets into your ThingsBoard installation:
- For ThingsBoard version 3.x download a Trendz_widgets_bundle V3
- For ThingsBoard version 2.x download a Trendz_widgets_bundle V2
- Login as Tenant Administrator into ThingsBoard and go to Widget Library
- Press Add new widget bundle and select import widget bundle
- Import downloaded widget bundle
This bundle contains 3 widgets:
- Trendz View Static- allow adding saved Trendz visualizations into ThingsBoard dashboards
- Trendz View - with filter alias- similar to previous but also support dashboard aliases for resolving entities
- Trendz Builder - Trendz Visualization Builder for providing self-service interface to your end-users, so they can create their own analysis using ThingsBoard dashboard.
Note: If after importing Trendz Widget Bundle into ThingsBoard, widgets do not work and white screen with error displayed - double-check that correct bundle was imported. Widget API in ThingsBoard v2.x and v3.x is different. Ensure that you downloaded bundle for the correct ThingsBoard version.
Add visualization on ThingsBoard Dashboard
Once widgets bundle imported and you already have saved Trendz Visualization - follow next steps to add them on the dashboard:
- In Trendz, open required visualization
- Press Share button, sharable URL will be copied into the clipboard
- Open required ThingsBoard Dashboard and press Edit button
- Select Trendz View Static widget from Trendz Bundle and add it on the Dashboard
- Switch to Advanced tab of the widget and insert the copied URL from step 1
- Save dashboard
Use Dashboard alias in Trendz View
In this case you want to conect standard ThingsBoard widgets located on the dashboard with Trendz View. You can do this using ThingsBoard dashboard aliases and Trendz View - with filter alias from Trendz widget Bundle.
Example: we have 10 Machine devices in ThingsBoard. We want to create a dashboard that will show all Machine devices in a list and once device selected - other widget on the dashboard should show details about selected device. In total we will have 2 widgets on the dashboard:
- Entity List - will show list of devices
- Trendz view - line chart that will show temperature of selected device
On ThingsBoard side we setup a dashboard and add 2 widgets. Detailed instruction how to do this is not part of this tutorial, so here are brief steps:
- Create all_devices alias that resolves all devices with type Machine
- Create selected_device alias with type entity form dashboard state - this alias hold reference to selected device
- Add Entity List widget and use all_devices alias as a datasource
- Configure On row click action that will save selected device to selected_device alias
- Save dashboard
On Trendz View side:
- Open view in Trendz
- Add Machine field to filter section - it will allow us to filter Machines by name
- Save View
- Copy Link to this view
Return to ThingsBoard Dashboard:
- Edit dashboard
- Add Trendz View - with filter alias from Trendz widget Bundle to the dashboard
- Set selected_device as a datasource for Trendz View
- Use name as a key from alias
- Switch to Advanced tab
- Insert link to view into View URL
- Insert Machine into Filter Name - content of this field should be the same as it typed in Trendz View Filter
- Save Dashboard
Now, every time when selected_device alias updated, value if its Entity Name would be inserted into Trendz View filter.
If multiple filters configured in Trendz View - system will match required filter by name.
Use Dashboard time window
By default, all Trendz visualizations use individual time range. However you can change this behavior and configure widget to toke time from ThingsBoard Dashboard. This option available for both, Static Trendz widget and for Trendz View with aliases.
- Open Dashboard Edit Mode
- Select required Trendz Widget
- Switch to Advanced Tab
- Enable checkbox Use Dashboard Time Window
Embed visualization on external site
You can also embed Trendz visualization into your web site by adding iFrame that points to required visualization.
Add iFrame on your site with the following URL http://{TRENDZ_URL}/viewMode/{VIEW_ID}?jwt={JWT_TOKEN}. Where:
- TRENDZ_URL - url of Trendz service
- VIEW_ID - ID of saved visualization inside Trendz
- JWT_TOKEN - ThingsBoard JWT token that should be used to authenticate in the ThingsBoard
Blocked View problem
If HTTPS was not enabled for Trendz it is possible that visuals shared on 3rd party websites or on ThingsBoard Dashboard would be blank.
The problem is that most browser block mixed content requests: if ThingsBoard use HTTPS and Trendz does not - browser will block requests to Trendz. You can find detailed error in browser console.
For fixing this - you need to enable HTTPS for Trendz UI. Find details how to do this in Trendz installation guide.