Difference between revisions of "Widgets"

From Hornbill
Jump to navigation Jump to search
 
(36 intermediate revisions by 3 users not shown)
Line 1: Line 1:
__NOTOC__[[Main Page|Home]] > [[Administration]] > [[Reporting]] > Widgets
+
This document can now be found at its new location in the [https://docs.hornbill.com/esp-config/advanced-analytics/widgets/ Hornbill Document Library].
==Introduction==
+
 
 +
[[file:hornbill-document-library.png|Widgets|link=https://docs.hornbill.com/esp-config/advanced-analytics/widgets/]]
 +
 
 +
<!--
 +
 
 +
<div style="border:1px solid #90C0FF; background:#D0E0FF; width:99%; padding:4px; margin-bottom:10px;">
 +
__NOTOC__
 +
{| style="width:100%"
 +
|[[Main Page|Home]] > [[Administration]] > [[Advanced Analytics]] > Widgets
 +
|style="text-align:right;"|[[:Category:Service Manager Administration|Index]]
 +
|}
 +
</div>
 +
{|style="width: 100%"
 +
|- valign="top"
 +
|style="width:73%"|
 +
== Introduction ==
 
Widgets are provided to create plug in data that can be used to build Dashboards. Some widget types make use of existing measures and provide the ability to display them in a more appealing format. Certain widget types allow you to return and display data based on configuration carried out within the widget.
 
Widgets are provided to create plug in data that can be used to build Dashboards. Some widget types make use of existing measures and provide the ability to display them in a more appealing format. Certain widget types allow you to return and display data based on configuration carried out within the widget.
 +
 +
|style="width:5%"|
 +
|
 +
|style="width:22%; border-style: solid; border-width: 1px; border-color:#e6e6e6; background-color:#f2f2f2;"|
 +
 +
== Related Articles ==
 +
:* [[Application_Entity_Viewer|Application Entity Viewer]]
 +
:* [[Reports]]
 +
 +
|}
  
 
====Creating a new Widget====
 
====Creating a new Widget====
  
Select the '''+ Create New Widget''' button, give the new Widget a name, and choose which type of Widget you wish to create.  Configuration options and an example video for each of the Widget types is given below.
+
Select the '''+ Create New Widget''' button, give the new Widget a name, and choose which type of Widget you wish to create.  Configuration options and an '''example video''' for each of the Widget types is given below.
  
 
==Widget Types==
 
==Widget Types==
Line 17: Line 42:
 
* '''Measured Group By''' - This type allows a single measures data to be displayed and grouped by '''Saved Data Columns'''.
 
* '''Measured Group By''' - This type allows a single measures data to be displayed and grouped by '''Saved Data Columns'''.
 
* '''Measure Samples Group By''' - This type allows a single measures sampled data to be grouped and displayed by '''Saved Data Columns''' and by definable sample periods (manual or predefined date settings).
 
* '''Measure Samples Group By''' - This type allows a single measures sampled data to be grouped and displayed by '''Saved Data Columns''' and by definable sample periods (manual or predefined date settings).
* '''Sql Group By''' - This type allows you to specify a database table, which columns to group on, and count on and define filter conditions for the data.
+
* '''Sql Group By''' - This type allows you to specify a database table, which column to group on, which to count on as well as define filter conditions for the data, and the sample history duration.
  
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 +
 
====Measured Sample====
 
====Measured Sample====
<div class="mw-collapsible-content">{{#ev:youtube|TyH55xdnvuU|400|right}}
+
<div class="mw-collapsible-content">{{#ev:youtube|dDcG4r-XRZw|400|right}}
 
'''Data Source Details'''
 
'''Data Source Details'''
 
:* '''Data Type''' - Choose '''Measured Sample'''
 
:* '''Data Type''' - Choose '''Measured Sample'''
Line 30: Line 56:
 
::* Change the Series Display name, Colour and Measure to use from the available fields if required.
 
::* Change the Series Display name, Colour and Measure to use from the available fields if required.
 
:* '''Add new series''' - Add additional Series to the chart by selecting this optionand again choosing a Display name for the series and a Measure to use.
 
:* '''Add new series''' - Add additional Series to the chart by selecting this optionand again choosing a Display name for the series and a Measure to use.
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Chart Settings'''
 
'''Chart Settings'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 39: Line 65:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Axis Options'''
 
'''Axis Options'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 45: Line 71:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Grid Options'''
 
'''Grid Options'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 51: Line 77:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Legend Options'''
 
'''Legend Options'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 57: Line 83:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Target Lines'''
 
'''Target Lines'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 68: Line 94:
 
</div>
 
</div>
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 +
 
====Measured Group By====
 
====Measured Group By====
<div class="mw-collapsible-content">{{#ev:youtube|LVvlfzte2AA|400|right}}
+
<div class="mw-collapsible-content">{{#ev:youtube|Oz9Zb50Gcoc|400|right}}
 
'''Data Source Details'''
 
'''Data Source Details'''
 
:* '''Date Type''': Choose '''Measure Group By'''
 
:* '''Date Type''': Choose '''Measure Group By'''
Line 81: Line 108:
 
<br>
 
<br>
 
<br>
 
<br>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Chart Settings'''
 
'''Chart Settings'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 92: Line 119:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Axis Options - Bar Chart Only'''
 
'''Axis Options - Bar Chart Only'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 98: Line 125:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Grid Options - Bar Chart Only'''
 
'''Grid Options - Bar Chart Only'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 104: Line 131:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Target Lines - Bar Chart Only'''
 
'''Target Lines - Bar Chart Only'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 115: Line 142:
 
</div>
 
</div>
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 +
 
====Measure Sample Group By====
 
====Measure Sample Group By====
<div class="mw-collapsible-content">{{#ev:youtube|TyH55xdnvuU|400|right}}
+
<div class="mw-collapsible-content">{{#ev:youtube|-eGM_d77Z7A|400|right}}
 
'''Data Source Details'''
 
'''Data Source Details'''
 
 
:* '''Data Type''' - Choose '''Measure Sample Group By'''
 
:* '''Data Type''' - Choose '''Measure Sample Group By'''
 
:* '''Sampling Type''' - This will control the values by which you can view the sample data.  Choosing '''Use manual sample setting''' will allow you to manually specify the number of samples to display on the data chart.  If the Samplying Type is set to '''Use predefined data setting''' the '''Samples to use''' field will change to '''Sample Periods''' and a list of predefined sample periods will be available to select from
 
:* '''Sampling Type''' - This will control the values by which you can view the sample data.  Choosing '''Use manual sample setting''' will allow you to manually specify the number of samples to display on the data chart.  If the Samplying Type is set to '''Use predefined data setting''' the '''Samples to use''' field will change to '''Sample Periods''' and a list of predefined sample periods will be available to select from
Line 127: Line 154:
 
<br>
 
<br>
 
<br>
 
<br>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<br>
 +
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Chart Settings'''
 
'''Chart Settings'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 136: Line 164:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Axis Options'''
 
'''Axis Options'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 142: Line 170:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Grid Options'''
 
'''Grid Options'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
Line 148: Line 176:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
+
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 
'''Legend Options'''
 
'''Legend Options'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
 
Define if the Legend is to displayed and the position for the legend
 
Define if the Legend is to displayed and the position for the legend
 +
</div>
 +
</div>
 +
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 +
'''Target Lines'''
 +
<div class="mw-collapsible-content">
 +
If required one or multiple target lines can be added to the Chart, and be shown in the Legend.
 +
:* '''Add Target''' - Choose this option to add a target, give the Target a name, thickness of the target line, display colour and value for the Target
 +
::* Add additional targets if required, or remove targets if no longer needed.
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
'''Target Lines'''
+
 
 +
====Sql Group By====
 +
<div class="mw-collapsible-content">{{#ev:youtube|iV5NLChvnnc|400|right}}
 +
'''Data Source Details'''
 +
:* '''Data Type''' - Choose '''Sql Group By'''
 +
:* '''Show''' - Choose to order the data by the top or bottom value.
 +
:* '''Number of Records''' - If a large number of values are returned, you can choose to display the top or bottom x values.
 +
:* '''From Table''' - Choose the table from which you wish to populate the data for your chart.  For Example '''h_itsm_requests''' for the primary requests table.
 +
:* '''Group On''' - Choose the column from the defined table which you wish to group the data by.
 +
:* '''Count On''' - Choose the column from the defined table which you wish to count the data records by.  For the primary request table ('''h_itsm_requests''') this maybe the unique reference number ('''h_pk_reference''').
 +
:* '''Filter''' -  Define any conditions to filter the returned data by.  For example by type, category, status.
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1000px">
 +
'''Chart Settings'''
 +
<div class="mw-collapsible-content">
 +
:* '''Chart Type''' - Choose the display type for the Chart
 +
::* If Bar is chosen
 +
:::* '''Bar Direction''' - If Bar type is chosen the Bar direction can be set
 +
:::* Data Label, Background and Border options can be configured as required.
 +
::* If Pie is chosen
 +
:::* Data Label, Background and '''legend''' options can be configured as required.
 +
</div>
 +
</div>
 +
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 +
'''Axis Options - Bar Chart Only'''
 +
<div class="mw-collapsible-content">
 +
Define if Axis titles are required to appear on the chart.
 +
</div>
 +
</div>
 +
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 +
'''Grid Options - Bar Chart Only'''
 +
<div class="mw-collapsible-content">
 +
Define if the grid is visible and the color to use
 +
</div>
 +
</div>
 +
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:800px">
 +
'''Target Lines - Bar Chart Only'''
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
 
If required one or multiple target lines can be added to the Chart, and be shown in the Legend.
 
If required one or multiple target lines can be added to the Chart, and be shown in the Legend.
Line 170: Line 247:
 
====Scorecard====
 
====Scorecard====
 
A Scorecard widget can be used to display one or more Measures which have previously been defined.  
 
A Scorecard widget can be used to display one or more Measures which have previously been defined.  
<div class="mw-collapsible-content"> {{#ev:youtube|gYn8VgYbgGM|400|right}}
+
<div class="mw-collapsible-content"> {{#ev:youtube|hOo25gzp-vY|400|right}}
  
 
'''Data Measure / Data Formatter'''
 
'''Data Measure / Data Formatter'''
Line 191: Line 268:
 
</div>
 
</div>
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1100px">
 
<div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:1100px">
 +
 
====Target Counter====
 
====Target Counter====
 
This type of widget is used to display how a single measure is performing against it's target.
 
This type of widget is used to display how a single measure is performing against it's target.
<div class="mw-collapsible-content">{{#ev:youtube|B_qsurEg5VE|400|right}}
+
<div class="mw-collapsible-content">{{#ev:youtube|jRINnOpKgMA|400|right}}
  
 
'''Counter Data Measure'''
 
'''Counter Data Measure'''
Line 219: Line 297:
 
====List of Data====
 
====List of Data====
 
Allows you to populate a widget with a list of data based on a user defined table query.
 
Allows you to populate a widget with a list of data based on a user defined table query.
<div class="mw-collapsible-content">{{#ev:youtube|X1Ra3h37mFs|400|right}}
+
<div class="mw-collapsible-content">{{#ev:youtube|IcYA8udihs4|400|right}}
  
 
There are two options for defining the content which will appear on your datalist and these can be chosen from the '''Widget settings'''.
 
There are two options for defining the content which will appear on your datalist and these can be chosen from the '''Widget settings'''.
Line 249: Line 327:
 
====List of Counters====
 
====List of Counters====
 
This widget allows you to display one or a list of metrics that are based on an aggregate value such as count, average, max, and min.
 
This widget allows you to display one or a list of metrics that are based on an aggregate value such as count, average, max, and min.
<div class="mw-collapsible-content">{{#ev:youtube|3z-k_EO-I9U|400|right}}
+
<div class="mw-collapsible-content">{{#ev:youtube|rfwOpQ9YNXk|400|right}}
  
 
'''Widget settings'''
 
'''Widget settings'''
Line 282: Line 360:
 
====Custom====
 
====Custom====
 
The custom widget type allows you to specify a URL and display the content as an image, in an iframe or div.
 
The custom widget type allows you to specify a URL and display the content as an image, in an iframe or div.
<div class="mw-collapsible-content">{{#ev:youtube|kxQNupQmpNw|400|right}}
+
<div class="mw-collapsible-content">{{#ev:youtube|PfOMn199s9s|400|right}}
  
 
You may wish to compliment the Hornbill data which can displayed in Widgets, with that of content from external sources. The Custom widget option allows you to either add an image via a specific URL, or display the content from an external source via a URL.  
 
You may wish to compliment the Hornbill data which can displayed in Widgets, with that of content from external sources. The Custom widget option allows you to either add an image via a specific URL, or display the content from an external source via a URL.  
Line 307: Line 385:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
==Pre-Defined Date Settings==
 +
 +
When creating widgets within Hornbil Advanced Analytics, some widget types provide the ability to set the sampling type and the sampling period. The sample period when using predefined date settings consist of multiple options to provide you the flexibility to set the widget to report on a specific period in time. Some of these options relate to the beginning of a week (this week or last week), and because the week start day can be different for organisations based in different countries Hornbill have also provided a setting to enable this to be set per Hornbill instance within the System -> Settings -> Advanced section from your Hornbill admin portal. Search for '''system.regionalSettings.weekStartDay''' to set it for your instance. By default this setting is set to Sunday as the start of the week. There are also settings for the beginning of the calendar year - '''reporting.calendarYearStart''' which by default is set to 01/01, and a setting for the beginning of the financial year - '''reporting.financialYearStart''' which by default is set to 01/04.
 +
 +
The pre-defined date settings are explained here:
 +
 +
*'''Start Of This Week''' - 00:00:00 hours on the last Sunday before today
 +
*'''Start Of This Month''' - 00:00:00 hours on the first day of the current month
 +
*'''Start Of Financial Year''' - 00:00:00 hours on the first day of the current financial year
 +
*'''Start Of This Year''' - 00:00:00 hours on the first day of the current year
 +
*'''Start Of Calendar Quarter''' - 00:00:00 hours on the first day of the current quarter. A quarter can start in January, April, July or October
 +
*'''Start Of Financial Quarter''' - 00:00:00 hours on the first day of the current financial quarter. A quarter can start in January, April, July or October
 +
*'''Start Of Last Week''' - 00:00:00 hours on last week's Sunday
 +
*'''Start Of Last Month''' - 00:00:00 hours on the first day of the last month
 +
*'''Start Of Last Financial Year''' - 00:00:00 hours on the first day of the last financial year
 +
*'''Start Of Last Year''' - 00:00:00 hours on the first day of the last year
 +
*'''Start Of Last Calendar Quarter''' - 00:00:00 hours on the first day of the last quarter
 +
*'''Start Of Financial Quarter''' - 00:00:00 hours on the first day of the last financial quarter
 +
*'''Last Calendar Years Samples''' - 00:00:00 hours on the first day of the last year to 23:59:59 hours on the last day of last year
 +
*'''Last Financial Years Samples''' - 00:00:00 hours on the first day of the last financial year to 23:59:59 hours on the last day of last financial year
 +
*'''Last Calendar Quarter Samples''' - 00:00:00 hours on the first day of the last quarter to 23:59:59 hours on the last day of the last quarter. A quarter can end in March, June, September or December
 +
*'''Last Financial Quarter Samples''' - 00:00:00 hours on the first day of the last financial quarter to 23:59:59 hours on the last day of the last financial quarter. A quarter can end in March, June, September or December
 +
*'''Last Months Samples''' - 00:00:00 hours on the first day of last month to 23:59:59 hours on the last day of last month
 +
*'''Last Weeks Samples''' - 00:00:00 hours on last week's Sunday to 23:59:59 hours on last week's Saturday
 +
 +
[[Category:Administration]][[Category:Videos]][[Category:HDOC]]
 +
<!-- /esp-config/advanced-analytics/widgets -->
 +
[[Category:HDOC]]

Latest revision as of 18:12, 10 April 2024

This document can now be found at its new location in the Hornbill Document Library.

Widgets