View Properties
This section provides descriptions and guides on using the available properties for each view type.
Properties determine what should be displayed on a the view and how it is displayed.
Some properties are applicable to all view types, such as title-related properties. There are also some properties that are mainly used on views that are data-dependent, such as value
, group
, and aggregation. There are also some properties that are specific to only one view type. All of these would be covered in the sections below.
Setting view properties is done through the View Properties panel.
Common Properties
These properties are available on all view types. These typically are not dependent on the data and are mostly related to the how the actual view container, henceforth known as a grid, should look like.
View Type
This determines what type of view would be displayed on the grid.
Below are the view types available:
- Bar (Percent) Chart
- Box Plot
- Bubble Chart
- Bubble Overlay
- Choropleth Map
- Circular Gauge
- Download View
- Dual Axis Chart
- Gis View
- HTML View
- Heat Map
- IFrame View
- Line Chart
- Linear Table
- Page View
- Pie Chart
- Pivot Table
- Radar Chart
- Row Page View
- Sankey Diagram
- Scatter Chart
- Sunburst Chart
- Sunburst Tree Chart
Title Properties
These properties are related to the title bar on the grid. Clicking on the expand/minimize button beside the Title
label expands/minimizes the title properties.
The below properties can be set when Title
is expanded.
Title
The value entered in the Title
property gets displayed on the grid title.
Field | Mandatory | Input Type | Constraints | Default Value | Dependency |
---|---|---|---|---|---|
Title | N | Text field | Any text | Empty string | None |
Title Info Icon
If enabled, an info icon is appended to the grid’s title.
Field | Mandatory | Input Type | Constraints | Default Value | Dependency |
---|---|---|---|---|---|
Title Info Icon | Y | Checkbox | Enabled (true) or disabled (false) | Disabled | None |
Title Tooltip
The text entered is displayed upon hovering on the title and/or info icon. Note that this is dependent on whether the Title
, Info Icon
or both properties are enabled. If Title
is not set and if Title Info Icon
is disabled, the text entered for this property would not appear.
Its effect can only be seen on the Viewer as the title bar supports other features (i.e. drag to change layout) on the Designer.
Field | Mandatory | Input Type | Constraints | Default Value | Dependency |
---|---|---|---|---|---|
Title Tooltip | N | Text field | Any text | Empty string | Displayed only if Title is populated, Title Info Icon is enabled or both. |
Functional Properties
These properties are related to the actual features of the view. These properties do one or more of the following:
- link dataset/s to the view
- provide interactions on the Viewer, such as setting drill down levels
- set how the data is displayed on the Viewer
- link controls to the view
- configure look and feel of specific elements of the view, such as chart axes, legends, color schemes, and hover templates
The list of functional properties can be found here.
Margin Properties
These properties allow adjusting margins and padding between charts and the grid.
Depending on the type of view, the XAxis and YAxis may not be available.
Advanced Properties
These properties allow you to add a special CSS class, data script and/or layout overview to the view, depending on the type of view.
GridBox Class
GridBox class allows you to add a special CSS class to your view.
Example 1
In this example, create a different background colour for one of the view. To do this, it requires 2 steps. In the first step, locate the ambience.css file in the ./web/style/ folder and add a customized view border into the ambience.css file.
.my-custom-view {
border: 3px solid blue !important;
}
In the second step, edit the desired view. In the “View Properties”, expand the “Advanced” property and key in my-custom-view
in the “GridBox Class” field. Save the changes and refresh the dashboard page. A blue border will appear around the view.
Example 2
In this example, change the title of the bar chart. To do this, it requires 2 steps. In the first step, locate the _index.html file in the ./web/dashboard/ folder and add a customized css into the _index_html file under the <style>
section.
.demo .grid-box-title {
color: red;
background-color: yellow;
}
In the second step, edit the desired view. In the “View Properties”, expand the “Advanced” property and key in demo
in the “GridBox Class” field. Save the changes and refresh the dashboard page. The title will changed to red colour with a yellow background.
Data Script
Data script allows you to manipulate the data returned by the server before being shown in your view.
***Example ***
In this example, fix a colour of a value in a bar chart, regardless of the colour schema.
To do so, click on the textbox below the “Data Script” field. The “Edit Data Script” dialog box will appear.
In the dialog box, key in the desired code. Click on the “OK” button to save the changes. Click on the “Cancel” button to abort the action.
In this example, if the first data is “Monday”, it is fixed as red colour, else it will be yellow.
Layout Overwrite
This feature allows you to customise the layout of the view.
For example, customising the colours of the bar chart.
To do so, click on the textbox below the “Layout Overwrite” field. The “Edit Layout Overwrite” dialog box will appear.
In the dialog box, key in the desired code to change the layout. Click on the “OK” button to save the changes. Click on the “Cancel” button to abort the action.