Overview
This page contains information about responsive dashboards, such as its features and how to use them.
On this page:
Introduction to Dashboards
Dashboards quickly convey volumes of data in a compact and easily accessible format.
Responsive layouts allow your dashboard to intelligently resize based on your viewing device.
- Easily drag & drop panels to display Grids, Trend Charts, Pie Charts, Bar Charts, Gauges, and more.
- Add any Symbol Library object – built-in or one of your own creation.
- Create groups to control responsive behavior for the entire group of items separate from the overall page.
- Create dashboards for both .NET and HTML5 clients from the same engineering environment.
- Supports our new Project Themes for quick styling!
Configuration
A dashboard is a type of graphical user interface which provides an at-a-glance view of key performance indicators (KPIs) relevant to a particular objective.
A data dashboard is the most efficient way to track multiple data sources since it provides a central location for businesses to monitor and analyze performance. The data is displayed in the form of tables, line charts, bar charts, and gauges.
Responsive dashboard displays have the ability to respond dynamically to any display size, which means the display will rearrange to format content based on the size and shape of the user's display.
Creating a Display
To create a dashboard display, you need to go to the Draw Editor, and click the Create a New Document button.
In the New Display Dialog, select the BasicDashboard template.
Dashboards are available for both .NET and HTML5.
Available Elements
The following elements are available in Dashboard displays:
Symbols
Components (including Alarms, Trend and DataGrid)
Group: You can combine different elements into a single Group.
Display Editor
When the dashboard option is enabled, the Draw Editor's layout is configured in blocks.
To insert an element, select it and drag it into the page. You should see a highlighted rectangle in the location where it will be placed.
Elements can easily be deleted by selecting the element and hitting delete on your keyboard, or moved by selecting the element and dragging it to the desired location.
Dashboard elements have a property called Title that can be accessed through the panel on the left-side of the Draw Editor.
Dashboard Features
CodeBehind Callback (Only for Advanced Customization)
The properties of dashboard items can be modified through the callback added to the CodeBehind using the syntax below:
* .NET:
public void OnDashboardCustomItem(TDashboardBorder item)
{
item.TitleElement.TextAlignment = TextAlignment.Center; item.TitleElement.FontStyle = FontStyles.Italic; item.TitleElement.FontSize = 20; item.TitleElement.Foreground = Brushes.Black;
}
* HTML5:
this.OnDashboardCustomItem = function(item)
{
//item.TitleElement.FontStyle = 1;
//item.TitleElement.HorizontalAlignment = 1;
//item.TitleElement.FontSize = 18;
};
Using the .NET callback described above, our titles look something like this picture in runtime.
The Title also supports Tags and Project Objects by placing them between curly brackets. Curly brackets are used so runtime can handle the element as a project variable, instead of as text. See some examples below.
Title: {Client.DateTime}
Title: {Tag.MyTextTag}
Title: {Server.ComputerName}
In runtime, the elements can be maximized by clicking the button indicated by the (1) below or resized by dragging the button indicated by the (2) below.
In this section...