Embedding dashboards or widgets into Report Template

• Prerequisites
• Embedding a dashboard into the report
• Embedding time-series chart
• Embedding pie chart
• Next steps
• Your feedback

ThingsBoard PE feature

Only Professional Edition supports Reporting feature.
Use ThingsBoard Cloud or install your own platform instance.

A Dashboard component allows you to embed a screenshot of the specified dashboard as an image in the report.
The most common use case is embedding a pre-configured chart widget or a group of cards displayed on a single dashboard page.

This guide provides tips and tricks to make embedded dashboards look polished in the screenshot.

Prerequisites

First, prepare a dashboard or widget — for example, a chart — that you want to embed into the report.

In this guide, we'll use a pre-configured “Time series chart template” dashboard. You can download it in JSON format and import it into your ThingsBoard instance.

Alternatively, you can use your own dashboard.

Embedding a dashboard into the report

To embed the dashboard into report template, follow these steps:

• Go to the “Templates” tab on the “Reporting” page.
• Either select an existing report template or create a new one.
• In the components library, locate the “Dashboard” component and drag it into the content area of your report.
• Configure the data source for the dashboard component:
  • In the “Datasource” section select the device whose data should be displayed in the dashboard.

    Alternatively, you can select an entity alias. If the alias includes multiple entities, the report will duplicate the dashboard for each of them.

  • In the “Target dashboard” section, specify which dashboard you want to embed into the report.
  • Save the component.
• Save the template.

To make sure your template is set up correctly and data displays as expected, click “Generate test report” (located next to the “Save” button). The system will generate a test report showing the chart.

Embedding time-series chart

We've prepared a JSON file with all the required settings for embedding a time-series chart into your report. You can import this template into your ThingsBoard instance and adjust it to fit your specific needs.

Click here to download “time_series_chart_template.json”

The applied changes include:

General dashboard settings:

• Manage layouts:
  • Default layout → Layout settings (gear icon):
    • Enable: Auto fill layout height - widget is stretched to fill all available space on the dashboard grid.
    • Set Background color to white (#FFFFFF)

Widget settings:

Datasource:

• Use an alias with the filter type “Entity from dashboard state”.
  This alias will let you select the actual entity whose data should be displayed in the report template itself.

Series:

• “temperature” key settings:
  • Line width: 6

Configure Y axes:

• Position: Left
• Units: °C
• Decimals: 0
• Settings (gear icon):
  • Label:
    • Size: 32px
    • Weight: 400
    • Color: 87% opacity (#000000DE)
  • Tick labels:
    • Size: 36px
    • Weight: 400
    • Color: 87% opacity (#000000DE)

Title:

• Size: 50px
• Line height: 60px
• Color: 87% opacity (#000000DE)

Legend:

• Label:
  • Size: 36px
  • Weight: 400
  • Line height: 40px
  • Color: 87% opacity (#000000DE)
• Value:
  • Size: 36px
  • Weight: 400
  • Line height: 40px
  • Color: 87% opacity (#000000DE)
• Column title:
  • Size: 36px
  • Weight: 400
  • Line height: 24x
  • Color: 60% opacity (#00000061)
• Position: Bottom
• Show values:
  • Min
  • Max
  • Average
• Advanced mode settings:
  • Appearance
    • Disable: Data zoom
    • Disable: Animation
  • Widget card:
    • Disable: Drop shadow
    • Add the following to the widget's advanced style (widget CSS):

1
2
3
4
5
6
7
8
9
10
11
12
.tb-time-series-chart-legend-item-label-circle {
  width: 20px!important;
  height: 20px!important;
}

.tb-time-series-chart-shape > div {
  overflow: visible!important;
}

.tb-time-series-chart-shape > div > svg {
  overflow: visible!important;
}

Embedding pie chart

We've prepared a JSON file with all the necessary settings for embedding a pie chart into your report. You can import it into your ThingsBoard instance and adjust it to your needs.

Click here to download “pie_chart_template.json”

The applied changes are very similar to the ones described in the time-series chart template example.

Next steps

• Connect your device - Learn how to connect devices based on your connectivity technology or solution.

• Data visualization - These guides contain instructions on how to configure complex ThingsBoard dashboards.

• Data processing & actions - Learn how to use ThingsBoard Rule Engine.

• IoT Data analytics - Learn how to use rule engine to perform basic analytics tasks.

• Advanced features - Learn about advanced ThingsBoard features.

Your feedback

Don't hesitate to star ThingsBoard on github to help us spread the word. If you have any questions about this sample, please contact us.