- 21 May 2024
- 5 Minutes to read
- Print
- PDF
Pie Graph
- Updated on 21 May 2024
- 5 Minutes to read
- Print
- PDF
Pie Graph widget can be used to present proportional data or relative data in a chart.
Use Case User persona: Administrator | Solution |
Sandra wants a graphical widget where she can analyze the percentage of open Incidents by status for the Incident Management team. This should give her a view to determine the open incidents where her inputs are required. | Sam can select the Pie Graph widget and configure it as an Internal widget under the settings option. He can configure it to display the count of open incidents sliced to status, giving Sandra the view of new incidents versus incidents in progress versus incidents awaiting user information. |
Refer to the GIF for more details about the Use Case!
Configure Pie Graph widget
This section contains the list of steps using which Application Designer can add the widget in the Service Portal screen.
- Navigate to Add Service Portal > Widgets > Add Widget.
Figure: Adding Widgets
- Customize the Service Portal by dragging the widget from the widget list screen.
Figure: Pie Graph - Click the 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
The table below contains the list of fields and their descriptions that are available under the Properties section:
Figure: Properties tab
To know more about the fields available under the Properties section, see the Field Description below.
Field Description
Properties | |
---|---|
Widget Type | Select Graphical widget from the drop-down list. |
Widget Header | Type a name to widget according to the Data to be configured in the widget title text box. Here widget is tilted as Open Incidents by Status.Figure: Widget Header |
Chart Type | Select the Chart Type as or |
Style | Select the style of the chart by selecting from the drop-down list.Figure: Style If Style is selected as Donut, then screenshot appears as shown below: Figure: Style - Donut See the screenshot below if Pie Graph is selected. Figure: Style - Pie |
Legend | Select the Legend position on the Pie Graph from the drop-down list. Figure: Legend The Legend property is similar to the Legends in the Line Graph. For more information, refer to Graphical widget's legend position description. |
Slice | Select Show Percent or Show Value or Show Label to display values on the chart. Here Show Label is selected as display values for the chart. Figure: Slice Show by label in a pie chart involves visually separating or highlighting specific segments of the chart based on their corresponding labels or categories. This method allows you to draw attention to particular data points or categories within the dataset. See the screenshot below. Figure: Show label Showing by value involves dividing the pie chart into segments based on the actual numerical values of the data points. Each segment represents a specific value or category, and the size of the segment corresponds to the magnitude of that value relative to the total. The screenshot below displays the pie chart with slice by value. Figure: Show Value Show percentage involves dividing the pie chart into segments based on the proportions or percentages of the total represented by each data point. Each segment represents a percentage of the whole, rather than an absolute value. Figure: Show percentage |
Slice Threshold in Percentage | Select the Slice Threshold percentage from the drop-down list. Here Slice Threshold is selected as 0 from the drop-down list. It determines the minimum percentage of the total value a slice in a pie chart must represent to be visually separated or emphasized from the rest of the chart. Figure: Slice Threshold |
Data Source
Application Designer can configure internal or external tabular widgets by selecting source type under the Data Source tab.
Figure: Data Source
Data Source (Internal)
This section contains the list of features using which the Application Designer can select Source, Application, Module, Table, Slice, and Form.
Figure: Data Source tab
The table below contains the list of fields and their descriptions that are available under the Data Source section:
Field Description
Data Source | |
---|---|
Internal | Select the Date Source as Internal from the drop-down list. |
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: Application |
Module | Select the Module from which the data has to be fetched. The Module can be selected from the drop-down list. Figure: Module Here Incident is selected under the Module drop-down list. |
Table | Specify the Table from the drop-down list. Here Manage Incidents is selected under the Table drop-down. Figure: Table |
Aggregate | Define the Aggregate function to summarize the data for Pie Graph. Here Count Records is selected from the drop-down list for Aggregate field. Figure: Count Records |
Of | Select the Column name from the drop-down list. Here Status is selected under the column name Of. Figure: Column Name |
Slice | Select the name of the Slice from the drop-down list. Here Slice is selected as Status under the column name. Figure: Slice |
Form | Define the Form using which it should open when you click on the data widget. Figure: Manage Incidents The forms mapped for the table should be selected. Here Manage Incidents is specified under Form. This field will appear only after the Application is selected. |
Open Mode | Select the mode of opening the form from the drop-down list. Figure: Open Mode |
Condition | |
Add Filter Set | Set the filter for the field, operator and values. The screen below displays Status with equal to as Operator and New as Value. Figure: Screenshot |
Data Source (External)
This section contains the list of features using which the Application Designer can select Source, API, Form, and Condition.
Figure: Data Source (External)
Data Source | |
---|---|
External | Select the Date Source as External. |
API | Select the API from which the data has to be fetched. |
Aggregate | Select the type of aggregate from the drop-down list. |
Of | Select the column type from the drop-down list. |
Form | Select the form type from the drop-down list. |
Appearance
This section contains the list of features using which the Application Designer can select Title, Color & Themes, Background, and Border.
Figure: Appearance
The table below contains the list of fields and their descriptions that are available under the Appearance section:
Field Description
Appearance | |
---|---|
Widget Header | |
Text Type | Define the text type for the Pie Graph widget. |
Text Color | Select the text color for the Pie Graph 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 from the drop-down list. |
Width | Choose the preferred width for the Header. |
Color | Select the header color for the Pie Graph widget. |
Color & Themes | |
Configure Colors | Choose the color and theme for the illustration. Configuring Themes is similar to Themes in the Line Graph. For details about configuring Themes, refer to the Graphical widget (Line Chart). |
Background | |
---|---|
Background Type | Select the preferred background type. Figure: Background |
Border | |
---|---|
Border | Select the border by selecting desired Border Type from the drop-down list. |
Dimension | |
---|---|
Dimension | 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 percentages (%) 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 Pie Graph widget with and without date time field appears as shown below.
Figure: Open Incidents by Status