Widget: Time Chart

Navigation:  Managing a Site > Business Analytics > Widgets > Available Widgets >

Widget: Time Chart

Previous pageReturn to chapter overviewNext page

 

Overview

 

The Time Chart widget provides data that is organized as a time chart and displayed with the use of up to 4 different chart styles (bars, lines, area, or points) that can be used individually or in the same chart.

 

The Time Chart widget allows you to view the intended data and how those values have progressed in time. The values of a Time Chart can be represented as bars, lines, areas and/or points. You can create a Time Chart with only one type of value representation or use more or all value representations in the same Time Chart (each series has its own value representation).

 

Bar Value Representation

Line Value Representation

Area Value Representation

Point Value Representation

Time Chart Widget3

Time Chart Widget1

Time Chart Widget2

Time Chart Widget4

 

 

The Dashboard's Details Page

 

To access a widget's settings you must open the details page of the dashboard that includes the widget.

 

Since you must check the intended dashboard in the "Dashboard Management" page and click Edit Button_Header to open it, the details page is, automatically, set to edit mode.

 

To add a Time Chart widget to a dashboard, open the intended dashboard, click Add Widget Header Button_2 and select the "Time Chart" widget from the listed widgets in the pop-up window. See To Add a Widget to a Dashboard.

 

The editing of a widget's settings is, automatically, viewed in the dashboard's Preview Section (to the right).

 

 

The following step-by-step focuses on a dashboard details page with an added Time Chart widget whose settings you can view and edit.

 

To View/Edit the Time Chart Widget's Settings

 

 

Note

If the selected dashboard has been created at account level, you will NOT be able to edit any of its settings - the details page will open in view mode without the possibility to set it to edit mode.

 

 

NoteIf you access a widget, edit its settings but do NOT save those changes before exiting, the next time you open that dashboard, the page will display a message warning you that there are unsaved changes.

Click "Save" to ensure that the previous changes are not lost or "Cancel" to discard those previously unsaved changes and start fresh.

 

Dashboard Message_Unsaved Changes_SD

 

 

Step-by-step

 

1. Open the details page of the dashboard that contains a Time Chart widget.

 

Widget Time Chart_Details Page_1_SD

 

A dashboard details page includes 2 main tabs:

The "Dashboard Properties" tab that relates to the settings of the dashboard itself. See Dashboard Details.

The "Widget" tab which, once you select a widget in the Preview Section, displays the settings of that selected widget.

 

When you open a dashboard's details page, the "Dashboard Properties" tab is open by default.

 

2. Select the Time Chart widget.

 

Widget Time Chart_Details Page_2_SD

 

Selecting the Time Chart widget, automatically, opens the "Widget" tab with the corresponding settings.

The "Widget" tab includes a common section (related to the Time Chart's name) and 2 child tabs - "Properties" and "Data".

 

The first available option in the "Widget" tab is "Widget Name". This name identifies the widget in the MCL-Mobility Platform but it is NOT displayed by the widget itself.

The system always suggests a name for an added widget - it is a combination of the widget type and a number (ex: "Time Chart 1" for the first Time Chart widget you add to the dashboard, "Time Chart 2" for the second one and so on).

 

Widget Time Chart Name_Default

 

3. If required, enter/edit the name of the Time Chart widget.

 

TIPWe recommend you rename the widget when you add it, in the "Widget Name" field, in a way that relates to the data it is meant to display.

 

Widget Time Chart Name_Picking Edit

 

 

4. Open each child tab ("Properties" and "Data") and view/fill in the available options as necessary.

 

"Properties" tab

 

The "Properties" tab is used to define the style of the widget.

It includes several sections that are organized as accordions - click the corresponding arrow (to the right) to expand/collapse the content, as needed.

 

Widget Time Chart_Properties Tab_Edit Mode

 

This tab provides the following information:

 

Title

This option relates to the title that is displayed in the widget's upper left corner. This does NOT identify the widget (that is defined in the "Widget Name" field).

There is a default suggestion ("My title") but we recommend a widget title related to the displayed data/values.

 

Widget Time Chart_Title1

 

Define/edit the widget's title.

Y Axis

Title

Refers to the title for the values displayed vertically ("Y Axis").

 

Enter a title - it will be displayed vertically.

 

Widget Time Chart_YAxis_Title

Scale

The scale's minimum and maximum values in the "Y Axis".

 

Define minimum and maximum values for the Time Chart's "Y Axis".

When no value is defined, "<Auto>" is set and the widget, automatically, defines the "Max" scale value as being the highest received value and "Min" as the lowest received value.

 

Widget Time Chart_YAxis_Scale

X Axis

Time Scale

The time scale for the data that is displayed in the selected widget which can be aggregated/grouped by "Hour", "Day (UTC)", "Day (Local)", "Week (Day (UTC))", "Week (Day (Local))" or "Month".

Selecting the "Auto" option ensures that the widget's content is aggregated/grouped according to the resolution applied to the dashboard (which is set using the related resolution drop-drown in the upper right corner).

 

In addition to these default time frames, the drop-down may also include time periods from a Time Period profile (= a profile you can create with specific time periods representing specific working hours/shifts so the data sent by your devices can be aggregated according to those working hours/shifts). See Profiles.

 

TIP

If you have a Time Period profile in mind and its time periods are NOT listed here, go to the "Site Details" sub-module, open the "Time Period" tab and check which profile is defined for the site and edit it, if necessary.

 

Selecting certain time periods activates fields that define the beginning and end of that time period.

 

Ex: Selecting "Day (Local)" activates 2 boxes representing the day's start/end hours.

 

Widget Time Chart_XAxis_TimeScale_Day

 

Ex: If "Week (Day (Local))" is selected, you will also have fields to define the day the week begins and ends with.

 

Widget Time Chart_XAxis_TimeScale_Week

 

Define the intended time period from the drop-down (and start/end hours, when necessary) OR  select "Auto".

 

 

Note

The defining of a specific time scale for the widget means the displayed values will NOT be affected by the dashboard's resolution. For instance, if your widget has a "Day (Local)" time scale and you set the dashboard's resolution, in the related drop-drown (in the upper right corner) to "Month", that widget will NOT change its values and time scale, it will continue to show values aggregated/grouped by "Day (Local)". ONLY the widgets with an "Auto" defined period will group their values/adopt the newly defined resolution.

Styles

Legend

This option relates to the position of the widget's caption/legend - it can be placed at the bottom ("Bottom") or to the right ("Right") of the Time Chart or have no legend ("None").

 

"Legend: Right" example

"Legend: Bottom" example

Widget Time Chart_Legend_Right

Widget Time Chart_Legend_Bottom

 

Select a position for the widget's caption from the drop-down.

Grid

The Time Chart's guiding lines - this widget can have "Horizontal" or"Vertical" lines or both, forming a grid, to help read the Time Chart.

 

"Grid: Horizontal" example

"Grid: Vertical" example

"Grid: Vertical & Horizontal" example

Widget Time Chart_Grid_Horizontal

Widget Time Chart_Grid_Vertical

Widget Time Chart_Grid_Both

 

Check/uncheck the "Horizontal" and "Vertical" options to enable/disable the corresponding guiding lines.

Colors

Widget Background

The color defined for the widget's background.

 

Widget Time Chart_Color Background

 

Maintain or choose a different color by clicking the corresponding box to open a "Colors" pop-up window and defining a new color. See Details on the Widget's "Colors" pop-up window

Widget Title

The color defined for the widget's title, meaning, the text you defined in the "Title" field and is displayed in the upper left corner.

 

Widget Time Chart_Color Title

 

To change the color, click the corresponding box to open a "Colors" pop-up window and define a new one. See Details on the Widget's "Colors" pop-up window

Chart Area

The color defined for the widget's chart area (= the title of the Y axis plus the chart grid lines in the "Y" and "X" axes).

 

Widget Time Chart_Color Chart Area

 

Maintain or choose a different color - click the corresponding box to open a "Colors" pop-up window and define the new color. See Details on the Widget's "Colors" pop-up window.

Chart Legend

The color defined for the widget's captions.

 

Widget Time Chart_Color Chart Legend

 

Maintain the color or select another one by clicking the corresponding box to open a "Colors" pop-up window and defining a new color. See Details on the Widget's "Colors" pop-up window

 

 

"Data" tab

 

The "Data" tab handles the widget's multiple series (a series = a set of data represented in a widget's chart/table). This tab allows you to create the necessary series, select the value each one should display and its source as well as define its style (ex: customize a series' color).

 

Certain sections are displayed as accordions - click the corresponding arrow to the right to expand/collapse the content, as needed.

 

Widget Time Chart_Data Tab_Edit Mode

 

This tab provides the following information:

 

Series

The data to display in this widget is grouped into series - each bar, line, area or point represents a series.

The corresponding internal reference for each series is "#S <number>" (ex: "#S4") - it is attributed by the system and CANNOT be edited. It can be used, for instance, in formulas, when you want to identify a series. Ex: A formula defined in a series with a "Static/Formula" data source - "=#S7-100".

A Time Chart can accommodate up to 20 series.

 

Use the attached Series_Associated Operations Signs  buttons to add, duplicate or delete existing series:

 

Click Plus Sign to add more series.

The default name suggestion for each series is "My Series <number>" (ex: "My Series 1") but we recommend renaming the new series according to the value it will represent.

Fill in the related options to define its properties (data source, color, etc.).

If you add another series, the newly added one comes to focus in this box.

 

Click Duplicate Sign to duplicate the selected series.

The duplicate's name will be the name of the original plus "_copy" - the duplicate becomes the selected series in this box.

Rename the duplicate so it illustrates the value it will represent and fill in/review the related options to define its properties (data source, color, etc.).

 

TIP

Do NOT forget that you can only add/duplicate up to 20 series.

 

 

Click Delete Sign to delete the selected series.

This option is ONLY enabled once you have more than one series (it is NOT possible to delete all the series of a widget).

 

If required, use the Widget Hide Series Button button to hide the selected series and corresponding caption:

 

Click Widget Hide Series Button to make the series' caption invisible in the widget's display - this button will be replaced with Widget Hidden Series Button;

 

Click Widget Hidden Series Button to turn the caption visible in the widget's display again - this button will return to Widget Hide Series Button.

 

Maintain or select a different source for the current series' data.

Changing the data source affects the related available options below - there is an immediate refresh to show the options that relate to the newly defined data source.

 

TIPIf you want to edit a series, make sure it is selected. The remaining options/values in the "Data" child tab always relate to the selected series in this drop-down.

 

Legend

The caption for the series - it represents the name of the series to be displayed in the widget.

 

Enter/edit the selected series' caption, as required.

Keeping this field empty means the widget will display the series' name (defined in the "Series" option).

Series Value

Data Source

This field refers to the source of the data to be represented by the currently selected series (in the "Series" option).

The Time Chart widget allows for 3 data source types:

 

"Counter"

A counter is an entity in our MCL-Mobility Platform account that aggregates specific data (statistic results of processed metric values that have been sent by MCL applications/paired devices). See Counters. Having this data source means the series presents a specific value, from a specific counter. This data source type enables these options:

 

Widget_Counter Data Source_Edit Content

For details on how to fill in/edit the related fields, see Data Source: Counter.

 

"Static/Formula"

The necessary value to feed the series is provided by you - the series displays the static value OR  the result of the formula you have entered.

Selecting this data source type activates the following option:

 

Widget_Static_Formula Data Source_Edit Content

For details on how to fill in/edit the related field, see Data Source: Static/Formula.

 

"Configurable Value"

A value that is configured for a specific purpose, as a sort of KPI (Key Performance Indicator). For instance, it can be used to measure the level of performance success/failure based on a given threshold/operational goal.

The following option becomes available when you select this source type:

 

Widget_Config Value Data Source_Edit Content

To fill in/edit this field, see Data Source: Configurable Value.

 

The "Value" drop-down is ONLY available if there are already configured values for the current dashboard. If you have a Widget Config Value_Define for Dashboard Button button, instead, it means you must create "configurable values" so you can apply them to this widget series.

 

TIPAs an alternative, access the "Dashboard's Configurable Values" pop-up window by clicking the Widget Configurable Value Button button, available in the header of the dashboard's details page.

 

Styles

Display Data

If "Accumulate" is checked, it means the time chart will display the current value combined with previously received values.

If unchecked, the widget's display will ONLY include the current value.

 

Examples:

 

The "Display Data: Accumulate" option is unchecked for the "Requested Items" series:

The "Display Data: Accumulate" option is checked for the "Requested Items" series:

Time Chart_Display Data1

Time Chart_Display Data2

 

Check/uncheck the "Accumulate" option as required.

Draw as

Refers to the value representation that is defined for the selected series - "Line", "Area", "Bar" or "Point". Each representation has its own options:

 

Time Chart_Line Options

The color box represents the color of the series' line.

Click the color box to open the "Colors" pop-up window and define the line's color. See Details on the Widget's "Colors" pop-up window.

 

The first drop-down relates to the type of line (straight, dotted, etc.). Select the intended type of line from the drop down.

 

The second drop-down informs you of the line's thickness. Choose the intended line thickness.

 

Time Chart_Area Options

The color box refers the color of the area representing the series' value.

 

The first drop-down relates to the type of margins for the area (a straight line, a dotted line, etc.). Select the intended type of line.

 

The second drop-down defines that margin's thickness. Choose the intended thickness.

 

Time Chart_Bar Options

The color box refers the color of the series' bar. Click it to open the "Colors" pop-up window and define the bar's color.

See Details on the Widget's "Colors" pop-up window.

 

 

Time Chart_Point Options

The color box defines the color of the series' points. Click it to open the "Colors" pop-up window and define the color of the points.

See Details on the Widget's "Colors" pop-up window.

 

Example of "Line":

 

Widget Time Chart_Styles_Draw_Line_ex1

Example of "Area"

 

Widget Time Chart_Styles_Draw_Area_ex1

 

Example of "Bar"

 

Widget Time Chart_Styles_Draw_Bar_ex1

 

Example of "Bar"

 

Widget Time Chart_Styles_Draw_Point_ex1

 

5. Once you are done editing, click Save Header Button_2 to ensure that your changes are applied.

 

NoteIf you exit this page (the dashboard's details page) without saving your edition, the "Auto-Save" mechanism keeps these changes for some time. You can save them the next time you access the dashboard - there is a message to remind you that there are unsaved changes. See The Dashboard's "Save" Feature.