Editing Dashboards

To switch the dashboard in edit mode, just click on the pencil icon present on the dashboard header. Dashboards app In edit mode dashboard will look something like below. Dashboards app In edit mode, dashboard header options also changes as shown above. User will not be able to switch to other dashboards in edit mode.

In edit mode, user can perform three actions on dashboard:

  • Add New Widget
  • Update a widget
  • Delete a widget

Add New widget

To add a widget, user can click on the New widget option present at the right section of the dashboard header. Dashboards app After clicking on the new widget action, right sidebar will be opened as shown below. Dashboards app As you can see Add New Widget consists of 3 steps:

  1. Widget: Choosing a widget
    User can choose a widget from many options and we have categorized the widgets in 4 different ways.

    • Timeseries: These type of widgets are mainly used to plot historical and realtime data. Dashboards app

    • Gauge: These type of widgets should be used to display realtime data. Dashboards app

    • Cards: Card widgets are mainly used to create cards. Dashboards app

    • Consumption Dashboards app

  2. Data: Connecting sensor parameters to above widget. After selecting a widget, user can connect different sensor parameters to the widget from the Organisation Heirarchy tree.
    This step will not be present in case of Static and Image cards, since these cards will not display any data. If you want to display sensor data in form of card, we have Dynamic card for that purpose.

    Once you select the widget, below screen will be visible. Click on Choose Data button
    Dashboards app
    Then select the desired sensors
    Dashboards app

  3. Settings: Configure widget visual and data settings.
    Once the user is done with selecting sensor parameters, they can configure few settings for better visual display of widgets.
    Visual settings are mainly used to add title, background color and for other visual settings of a widget.
    Dashboards app

Let’s take an example to create a new widget step by step.

As we discussed first step is to choose a widget, we will select a Line Timeseries and then click next.
Dashboards app

After selecting a widget user can connect different sensor parameters to a widget, so let’s suppose we want to compare between the power consumption in two Apartments, Apt Red 11 and Apt Red 12, so we will select the voltage parameter of these two asset energy meter sensors and then click next. Dashboards app

Now we are done with connecting data to our widgets, we will add visual and data settings. As shown below you can see we have different settings available to configure, for now we will just set the title, subtitle, x axis label and y axis label of the timeseries widget.

Set Title
Dashboards app

Title Text Formatting
Dashboards app

Set Background Color
Dashboards app

In case of timeseries, by default X Axis label will be Date as shown below, but user can change it.
Dashboards app

Set Y Axis label
Dashboards app

Add Range (Optional)
If we need colored bands on our charts then this option is usefull, user can plot multiple band by adding multiple ranges.

User can change the range from, and range to and also change the color of the range band.
Dashboards app

Range Error
If user accidently add to value lower then from value this kind of error will be shown to the user
Range To value is always be greather then range from value, Once user correct the range the error will be disappear.
Dashboards app

In the legend settings, we will set the color and name of two different series we have selected as shown below.
Dashboards app

As you can see, for Apt red 11 we have set blue shade color and for Apt red 12 we have set green color.

Once we are done with the settings, we can click on apply button and after that new widget will be added to the dasbhoard. Dashboards app

Power consumption widget which we have added now will have some default size, if user want to expand or collpase the size of the widget, it can be done by expanding or collapsing the icon present at the bottom right corner of the widget as shown below. Dashboards app

On expanding it will be adjusted to the size user want, I have expanded the widget to take the full width and height as shown below. Dashboards app

Once user is done with adding widgets, then user can save these changes by clicking on the Save button present at the dashboard header. Dashboards app

After saving the dashboard, it will be automatically switched to view mode. Dashboards app

Note
On saving a widget, it will be automatically added to the bottom of the other widgets as shown above in the selected tab. If you want a widget to be added in other tab, then first user has to switch to other tab and then user can add new widget in that tab.

Update a widget

To update an existing widget, first user has to switch the dashboard in edit mode. Once the dashboard is in edit mode, existing widget can be updtated by clicking on the pencil icon present at the top right corner of the widget.
Dashboards app
To Edit sensor data, Click on edit icon shown in below image
Dashboards app
Let’s add one more sensor parameter to the widget, here we are adding voltage of Apt red 11 as shown below.
Dashboards app
Also, let’s update the backround color of the widget as shown below
Dashboards app
On Saving widget will updated as per the settings we have done as below
Dashboards app

Note
User cannot update the type of an existing widget. If user wants to change this, then first delete widget and then create new widget of different type.

Delete a widget

User can remove an existing widget on the dashboard by clicking on the dustbin icon present at the top right corner of the widget. Dashboards app

User can add more widgets as per the requirements. Below are some of the examples of dashboard. Dashboards app Dashboards app

Duplicate a widget

We can duplicate widget in same dasbhoard panels as well as in different dashboard’s panels also.

  1. To duplicate widget, First switch the dashboard in edit mode, just click on the pencil icon present on the dashboard header. Dashboards app

  2. Once the dashboard switched into the eidting mode, when user hover mouse point on the widget the three icons will be shown to user
    Click on the first copy/duplicate icon
    Dashboards app

  3. The Duplicate widget modal will be appear on the screen
    Select the targated dashboard, panel (and subpanel) and click on save, widget will be duplicated on the targetd place.
    Dashboards app