HOW TO: manage a calendar Widget


Warning message

You can't delete this newsletter because it has not been sent to all its subscribers.

Calendar widget can showing: Sum, Average or Median value of a variable as a colored calendar. This kind of visualization can be performed for HLT such as: Sensors, MyKPI, without any action of precomputation. 

They can be set work in the MoreOption Specific setting for the Calendar

  • Year 
    • thus showing 1 Year with the resolution of 12 Months, weeks, up to the single day value
    • you can set from the menu on the widget the Time Range: 1D, 7D, 1M, 6M, 1Y, thus obtaining different combinations
    • you can scrool in the history on the widget
  • Month
    • Thus showing: 30 days with a resolution of hours
    • you can set from the menu on the widget the Time Range: 1D, 7D, 1M, 6M, 1Y, thus obtaining different combinations
    • you can scrool in the history on the widget

Calendar widget can work on HLT: Sensors, MyKPI.

Calendar widget can be produced by IOT App by indicating the above HLT as well as by sending a vector of data as Dynamic Widget, similarly at the multiseries. 


1. Widget Calendar

The Widget Calendar can be used to show data in the form of a calendar with colored cells. The color of each cell is calculated based on the result of data processing operation, which is done by adding or by calculating the average of the values of the cell. This data processing operation can be selected in the more options feature.

There are two types of view available:

  1. yearly view- data is grouped by year and on the calendar you can see weekly variations over the months. Each column is a week and every cell represent a day.

By placing the cursor over the cells, you can view associated details such as date and value.

  1. monthly view - data is grouped by month and on the calendar you can see hourly variations over the days.

In the monthly view, for each cell, in the details there is an additional information: the reference time slot of the value. Like the annual view, to view the data you should simply place the cursor on the cell of interest.

2. How to add a Widget Calendar in a dashboard

To add the widget you can do that via:

  1. Wizard Tool
  2. IoTApp 

2.1 Wizard Tool

Once your dashboard is created, by entering the edit view and by clicking on WIZARD  the following window will appear:

Select from the single data widgets the calendar icon one

Afterwards select a data source of choice among those available and confirm the selection by confirming via the Next button

A window with a summary of the choices made will appear. If everything is correct, complete the operation by clicking on the instantiation button.


 Now a new Widget Calendar will appear on your dashboard .


2.2 IoTApp

On node-red, select the calendar node from the palette of snap4city nodes and link to that an input node inject.












Enter the inject node settings by double clicking it, a window like the one in the image below will appear: Insert in the payload field the JSON of the sensor or of the MyKPI you want to use

For example


In the calendar node settings, select the dashboard where you want to put the widget and lastly click on the Deploy + Inject buttons to get the Widget Calendar on the dashboard selected.

3. Time range

It is possible to set the quantity of data shown on the calendar chart.

In edit view you should just open the drop-down menu positioned on the top right of the widget and click on the Time range item to select the desired time interval.

The options available for both monthly/yearly view are :

  • 1 Day
  • 7 Days
  • 6 Months
  • 1 Year


4. More options

The widget provides the possibility to modify, in addition to the generic and basic ones, the following options:

  • data operation : sum/mean of the data for each cell
  • calendar view: monthly/yearly
  • color: to customize the color scale of the cells

To do this, you need to access the edit view, open the drop-down menu at the top right of the widget and click on the More Options item.

Once everything is set up, just click on the Confirm button to apply the changes made.