Bar Graph

Bar Graph is used for visualizing and comparing different data points at a glance.  

For details about the Use Case, refer to the graphics below:

Configure the Bar Graph widget

This section contains the list of steps using which Application Designer can add the widget in the Service Portal screen.

1. Navigate to Design Service Portal > Widgets > Bar Graph.
    Figure: Adding Widgets
    
   
2. Customize the Service Portal by dragging the widget from the widget list screen.Figure: Bar graph
    
   
3. Click the Settings icon for this field to view the Properties pop-up.
   Figure: Modify the properties
    
   

You can view the following tabs on the Settings for this field:

• Properties
• Data Source
• Appearance

Properties

This section contains the list of properties using which the Application Designer can configure the respective widget feature. To know more about the fields that are available under the Properties section, see the Field Description given below.

Figure: Properties

The table below contains the list of fields and their descriptions that are available under the Properties section:

Field Description

Widget Type	Select Graphical Widget from the drop-down list.
Widget header	Type a name to the widget according to the Data to be configured in the widget title textbox. For example: Let us create a Graphical Widget to show the incidents assigned to me, so the widget can be titled: Resolution SLA Compliance By Priority. Figure: Widget Header
Chart Type	Select the Chart Type as Bar from the drop-down list. Figure: Chart type
Position	Select the Position of the graph by selecting from the position tabs.Figure: Position When the position of the Bar Graph is selected as Vertical or Horizontal, the fields for X-axis and Y-axis will appear as shown in the screenshots below. Figure: Vertical position Figure: Horizontal position
Bar Mode	Select Stacked or Grouped depending based on your preferred visual presentation from the drop-down list.Figure: Stacked Bar Mode
Legend	Select the Legend position on the bar graph from the Legend drop-down list. See the screenshot for more details.Figure: Legend For more details, see legend description under Graphical widget (Line Chart).

Data Source 

 Application Designer can configure internal or external widgets by selecting source type under the Data Source tab. The screenshot appears as shown below.
Figure: Data Source type
If you select Internal as Source type, then you need to select Source, Application, Module, Table, Form, X-Axis, Y-Axis and Series.

Figure: Data Source tab

The table below contains the list of fields and their descriptions that are available under the Data Source (Internal) for configuring Internal widgets:
 
Field Description 

Data Source
Internal	Select the Date Source as Internal.
Application	Select the Application from which the data has to be fetched. The screen is shown with Service Management selected under the Application from the drop-down list.Figure:Service Management
Module	Select the Module from which the data has to be fetched. The drop-down list populates based on application selection. Here Incident is selected from the Module.Figure: Incident
Table	Specify the Table from the drop-down list and it populates based on module selection. Here Manage Incident is selected from the Table.Figure: Table selection
Form	Define the Form using which it should open when you click on the data widget.Figure: Form Here Form named My Incidents is selected under value. This field will appear only after the Application is selected.
Condition	Define the conditions based on which the data should be fetched. Set the filter for the field, operator and values. Figure: Add Filter Set If you want to add more conditions, click the + icon. Refer to the section for more details about Dynamic operators in Service Portal.
X-Axis
X-Axis	Specify the display name for X-axis for Bar Graph representation by selecting the field from X - Axis drop-down list. Figure: X-axis variable
X-Axis Label	Specify the label to the X-Axis variable in the X-Axis Label box. The display name for X axis of the bar graph is based on the table selection. Figure: X - axis label
Label Slant	Select the angle to incline the label of X-Axis by choosing the angle in the Label Slant drop-down list.Figure: Label Slant The screenshot shows the Label Slant selected as 600 for the Resolved Incidents Trend bar graph. Figure: Label slant
Y-Axis
Aggregate	Define the aggregate function to summarize the data fetched for the Y-Axis variable. Figure: Aggregate function Here's a breakdown of each operation for a Tabular widget: Count unique records: This operation involves counting the number of distinct records or entries in the tabular data.  Count records: This operation counts the total number of records or entries in the tabular data.  Sum values: This operation involves adding up the values of a specific column in the tabular data to calculate their total sum. Average values: This operation calculates the average (mean) value of a specific column in the tabular data.  Min values: This operation finds the minimum value in a specific column of the tabular data. Max values: This operation finds the maximum value in a specific column of the tabular data.
Of	Select the Column name (table selected) from the drop-down list.Figure: Column name
Y - Axis Label	Specify the label to the Y-Axis variable in the label box.  Figure: Select the Label
Label Slant	Specify the inclination for the label of Y-Axis using the Label Slant drop-down list. Figure: Label Slant value data
Data Boundary	Select the boundary value for the Data Boundary from the field value.The boundary value for the data boundary specifies the range of values that should be populated on the bar graph.Figure: Data Boundary
Scale	Select the desired Scale value from the drop-down list. The scale defines the interval range along the y-axis. It determines how the values are distributed and displayed vertically on the graph. For example, if the scale is set to intervals of 10, then the y-axis would be divided into segments of 10 units each.Figure: Scale
Series	Type the Series name in the text box. With the Series option, you can add another layer of information to the graph. You can create different series within each workgroup bar, each representing a different information level. For example, within the bar you can have four sections representing incidents categorized as P1,P2,P3,and P4.Figure: Priority Here the Series is titled Priority under the text box, showcasing a bar representing P4 incidents with a count of 281. Figure: Series

Data Source (External)

This section contains the list of features using which the Application Designer can select Source, API and Form, X-Axis, Y-Axis and Series.

Figure: Data Source (External)

The table below contains the list of fields and their descriptions that are available under the Data Source(External) for configuring External widgets.
Field Description 

Data Source
External	Select the Date Source as External.
API	Select the API from which the data has to be fetched.
Forms	Select the URL which opens when clicked anywhere on the bar graph data.
Condition	Define the conditions based on which the data should be fetched.
Add Filter Set	Set the filter for the field, operator and values. Figure: Add Filter Set For more information about Conditions, refer to Dynamic operators in Service Portal. Note The control should be loaded with Tenant by default.

If the Date Time field is selected in X-Axis, then an option to Group Date gets displayed.  You can group the data with respect to Date by clicking the Group Data Radio Button as shown below:

 Figure: Date time field

Refer to the field Description for Group Data Option.

Field Description 

X-Axis
Group Data	Select Yes to group the date time field value. Figure: Group Data If you click No, then individual records will be displayed instead of grouped records.
Group By	Select the time grouping criteria based on which the data will be grouped by selecting from Group By drop-down list. Figure: Group By
Format	Select the Format in which the date should appear by selecting from the Format drop-down list. For example, you can select the Month option for the data from the Group By drop-down list to conduct trend analysis for monthly incidents. When Day is selected in Group By, date appears on the X axis of the graph Figure: Day When Week is selected in Group By, Format drop-down list is displayed as shown below: Figure: Week You can group Week based on Week # (Start Date (SD)- End Date (ED)), Week # (Month), Week # (Month, Year) from the drop-down list. See the screenshot below for more details. Figure: Group By Week #(Month) When Month is selected in Group By, Format drop-down list is displayed as shown below: Figure: Month You can group Month based on Month or Month, Year from the drop-down list. See the screenshot below for more details. Figure: Group By Month, Year When Year is selected in Group By, Format drop-down list is not displayed. The year is displayed as per user preference. Figure: Year To know more about configuring global filter on Data Widgets, see Time Filters in Data Widget.

Appearance 

This section contains the list of features using which the Application Designer can select Icon, Title, Table Design, Header Text, Data Text, and Background.

Figure: Appearance tab

Appearance
Widget Header
Text Type	Define the text type of the widget.
Text Color	Select the text color of the widget.
Text Size	Select the preferred text size.
Text Style	Choose the style for the font.
Text Alignment	Select the preferred alignment for the font.
Header Separator
Border	Select the border style.
Width	Choose the preferred width for the Header.
Color	Select the header color of the widget.
Color & Themes
Configure Colors	Configure the Colors and Themes by clicking the Configure Colors icon. When clicked a pop-up window opens with the options to configure the Themes & Colors for the Data widgets. The options available are: Colorful and Monochromatic.  If Colorful is selected as Theme option, then you have mix of colors that can be customized.  There are 10 nodes in total, each representing a unique color. However, when displayed in a pop-up screen, only the first 6 colors will appear in a single row.  If you select Monochromatic, then you can use variations of a single color throughout the widget. Here the theme consists of 10 gradients of the selected color. When displayed in a pop-up window, only the first 6 colors will appear in a single row. These colors represent gradients or variations of the selected color, ranging from decreasing to increasing intensity. When a row of Monochromatic colors is selected, then you have to use different shades and tints of color throughout the widget configuration.  See the screenshot below:Figure: Configure Colors Note All the colors in a row are grouped and can be selected together only. Individual colors cannot be selected. Click the to add new Themes. A new Theme can be customized and created with this option. Add New Theme Enter the Theme Name under the text box. Figure: Theme Name Each node offers the ability to customize its color, indicated by a color palette icon showcasing the current color selection. By clicking on this icon, you can access the Color Palette option to select your desired color, providing flexibility and control over the appearance of each node within the theme. See the screenshot below for more details. Figure: Add New Theme Click Submit to save the configured Theme.

Background
Background Type	Select the preferred background type. Figure: Background
Padding	Specify the preferred padding width. By default, the field appears inactive as shown below. Figure: Padding width with zero value Click the icon to enable padding width. Figure: Padding width as 3

Dimensions
Dimensions	Select the widget's height and width from the drop-down list. You can set the height in pixels (px) and the width in both percentage (%) and pixels (px). Using a percentage for width allows the widget to fill the container's width. Figure: Dimension

Click Save to save the configuration. The configured Bar Graph widget with and without date time field appears as shown below.

Figure: Resolution SLA Compliance By Priority

Figure: Change Record ID with Planned Start Time