Pie Graph
  • 21 May 2024
  • 5 Minutes to read
  • PDF

Pie Graph

  • PDF

Article summary

Pie Graph widget can be used to present proportional data or relative data in a chart.

Let's explore the following Use Case for configuring the Pie Graph widget!
 

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!

pie

Configure Pie 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 Add Service Portal > Widgets > Add Widget.
     Figure: Adding Widgets
     
  2. Customize the Service Portal by dragging the widget from the widget list screen.
    Figure: Pie Graph
  3. 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 HeaderType 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


   
StyleSelect 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
LegendSelect 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. 
SliceSelect 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 PercentageSelect 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
InternalSelect 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
ModuleSelect 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.
TableSpecify the Table from the drop-down list.
Here Manage Incidents is selected under the Table drop-down.
Figure: Table
AggregateDefine 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
OfSelect the Column name from the drop-down list. Here Status is selected under the column name Of.
Figure: Column Name
SliceSelect the name of the Slice from the drop-down list. Here Slice is selected as Status under the column name.
Figure: Slice
FormDefine 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 ModeSelect the mode of opening the form from the drop-down list.
Figure: Open Mode
Condition
Add Filter SetSet 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
ExternalSelect the Date Source as External.
APISelect the API from which the data has to be fetched.
AggregateSelect the type of aggregate from the drop-down list.
OfSelect the column type from the drop-down list.
FormSelect 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 TypeDefine the text type for the Pie Graph widget.
Text ColorSelect the text color for the Pie Graph widget.
Text SizeSelect the preferred text size. 
Text StyleChoose the style for the font. 
Text AlignmentSelect the preferred alignment for the font.
Header Separator
BorderSelect the border style from the drop-down list.
WidthChoose the preferred width for the Header.
ColorSelect the header color for the Pie Graph widget.
Color & Themes
Configure ColorsChoose 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 TypeSelect 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


Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.