Pie Chart V2

Pie Charts: Slicing through data to reveal the bigger picture!

Pie Charts widget is used to represent data with categorical values in various applications.

Let's start configuring the widgets then!

User persona: Application Designer

Configure the Pie Chart widget

This section contains the list of steps using which {{variable.Role - Application Designer}} can add the widget in the Service Portal screen.

1. Navigate to Home > Service Portal > Add Service Portal > Widgets > Add Widget.
    
   
2. Customize the Service Portal by dragging the widget from the widget list screen.Figure: Pie Chart
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
• Data Source
• Appearance

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 that are available under the Properties section, see the Field Description given 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 textbox.
Chart Type	Select the Chart Type as
Style	Select the style of the chart by selecting from the drop-down list.Figure: Style
Legend	Select the Legend position on the line chart from the Legend drop-down list.
Slice	Select Percentage or Value to display values on the chart.
Slice Threshold in Percentage	Select the slice threshold percentage from the drop-down list.

Data Source 

 Application Designer can configure internal or external tabular widgets by selecting source type under the Data Source tab.

Data Source (Internal)

This section contains the list of features using which the Application Designercan 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!
Module	Select the Module from which the data has to be fetched. The module can be selected from the drop-down list.
Table	Specify the Table from the drop-down list.
Aggregate	Define the aggregate function to summarize the data.
Of	Select the Column name from the drop-down list.
Slice	Select the name of the Slice from the drop-down list.
Form	Define the Form using which it should open when you click on the data widget.
Form View	Select the Form view from the drop-down list as shown in the screenshot.
Open Mode	Select the mode of opening the form from the drop-down list.
Condition
Add Filter Set	Set the filter for the field, operator and values. Figure: Add Filter Set The screen below displays Tenants with equal to as Operator and Information Technology 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)

Appearance 

This section contains the list of features using which the Application Designercan 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 of the Numeric widget.
Text Color	Select the text color of the Numeric 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	Choose the color and theme for the illustration. Figure: Theme Name

Background
Background Type	Select the preferred background type. Figure: Background

Dimensions
Dimensions	You can style the border by selecting the desired Dimension value.Figure: Dimension

Click Save to save the configuration. The configured Pie Chart widget appears as shown below.

Figure: Incidents by Category