Pie/Donut Chart Widget


Apps - Widget - Pie Donut Chart icon.png This type of widget belongs to the Dashboard category in the widget library. It enables you to view, for a given measure, the quantity or portion of each dimension element compared with all of the other elements (100%) in a pie or donut chart. Values are usually in percentages.

Pie charts and donut charts are exactly the same. The only difference is that the interior of a donut chart is empty.

Notes

  Open url.png  See General information on widgets

  • As a general rule, a data source contains one Dimension column and one or more Measure columns. See Standard data source structure.
  • This chart can process one measure only.
    • If the data source contains several measures, you should select the one you want using the Data Transformer. If you do not do so, then the first measure will automatically be processed.
  • In execute mode, the legend displayed at the top right of the chart is a dynamic data filter (Chart Label -/- Legend > Legend). Infotips appear when you move the mouse over each segment.

Best Practice big icon.pngBest practice

  • Use the Pie/Donut Chart widget to view the quantity of each element or to highlight one element as compared with the whole. 
  • When the number of dimension elements is large and must be displayed in a limited space, you should use the Bar Chart widget.
Best Practice icon.png   Bar Chart widget Pie/Donut Chart widget
EVApps - widgets Bar Chart and PieDonut - Best practice On.png EVApps - widgets Bar Chart and PieDonut - Best practice Off.png

Example

You want to display the percentage of incidents per employee (measure) by department (dimension with 3 elements: Sales, Marketing and Administration) in a donut chart.

Data source Pie/Donut Chart widget

Note: The data source contains several measures. You select the measure you want (number of incidents per employee) using the Data Transformer.

EVApps - widget PieDonut - Example DataSource.png

Download Zip icon.png Download Example (CSV file)

EVApps - widget PieDonut - Example Chart.png

List of properties

Content

DataSource

Data Source: External data source associated with the widget. 

  • The drop-down list displays all of the data sources available in the app. 
  • To modify the current data source or to view its contents, you should click Apps - Edit icon.png. The Apps - datasources Properties - Preview button.png button below the Preview property shows the number of rows (max. 15) and columns extracted.
  • To define and associate a new data source with a widget, click Apps - Add datasource icon.png in the Objects pane.
DataTransformer

Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed. Open url.png See the procedure.

Failed to execute the [include] macro

Data

FirstRowContainsDimensionElements

First Row Contains Dimension Elements: Used to specify the structure of the data source by indicating if dimension elements are found in the first column (box is not checked: standard data source structure) or in the first row (box is checked). Note: This property does not affect the behavior of the Data Transformer.

SortByValueDescending

Sort By Value Descending: Used to sort dimension elements in descending order (if the box is checked, from highest to lowest value) or in the order in which they are read in the data source (box is not checked). Note: The order applied is determined by the dimension elements of the first measure in the data source.

Example documentation icon EN.png    You want to display the chart for incidents and requests per employee.

The data source contains the Department dimension with three elements. Sort By Value Descending - Example - Datasource.png

Box is checked Box is not checked

Sort By Value Descending - Example - Sort value - On.png

The dimension elements of each measure are sorted in descending order.

Sort By Value Descending - Example - Sort value - Off.png

The dimension elements of each measure are displayed according to the sort order of the data source.

MaximumNumberOfData

Maximum Number Of Data: Used to indicate the maximum number of dimension elements to be loaded from the data source for each measure selected in the data source. This prevents loss of performance when data volume is large. 

  • The count is always performed from the first dimension element.
  • When the number of dimension elements to be loaded is greater than the number of dimension elements in the data source, all of the data is loaded.
  • To view the current data source, click Apps - Edit icon.png next to the Data source property. Click on the button below the Preview property to see the number of measures and the number of dimension elements for each measure.
Example documentation icon EN.png    You want to display the chart for incidents and requests per employee.

The data source contains the Department dimension with three elements. Sort By Value Descending - Example - Datasource.png

  • Maximum Number Of Data = 20 (default value)
  • Maximum Number Of Displayed Data = 20 (default value)
  • Maximum Number Of Data = 2
  • Maximum Number Of Displayed Data = 20 (default value)
  • Maximum Number Of Data = 20 (default value)
  • Maximum Number Of Displayed Data = 1

Sort By Value Descending - Example - Number Data - All.png

All dimension elements are loaded and displayed for each measure, i.e. the three departments.

Sort By Value Descending - Example - Number Data - Part.png

Only the first two dimension elements are loaded and displayed for each measure, i.e. the first two departments.

Sort By Value Descending - Example - Displayed Data - Part.png

All dimension elements are loaded but only the first element is displayed. This corresponds to the Sales department. The Others dimension element groups values from the Marketing and Administration departments.

MaximumNumberOfDisplayedData

Maximum Number Of Displayed Data: Used to indicate the maximum number of dimension elements to be displayed for each measure selected in the data source. This improves chart readability.
    Example documentation icon EN.png You want to display the chart for incidents and requests per employee. Open url.png See the Maximum Number Of Data field.

  • The count is always performed from the first dimension element.
  • When the number of dimension elements to be displayed is less than the number of dimension elements to be loaded, the Others dimension element will automatically be added to the chart. It will aggregate all of the values from non-displayed dimension elements.

Chart

Chart Type (Pie/Donut): Type of chart to be displayed.

Donut option Pie option

Circular chart whose interior is empty

EVApps - widget PieDonut - Pie Chart.png

Circular chart

EVApps - widget PieDonut - Donut Chart.png

ColorTheme

Color Theme: Color theme applied to the chart. This affects the color of Bar Chart widgets, Line Chart widgets and Pie/Donut Chart widgets as well as the color of the buttons for each legend.

  • The list is provided by Logo - EasyVista.png
  • The number of theme colors is indicated next to the theme name, e.g. Brown (6), Default (12), EasyVista (7).

    Example documentation icon EN.png  You want to apply the Brown (6) theme to a Pie/Donut Chart widget.
                      Apps - widgets Dashboards - Color theme.png

MeasureAxisDataType

Measure Axis Data Type: Used to define the display of values in the axis and infotips. Note: The number format, e.g. comma or period for the decimal symbol, depends on the configuration settings of the platform used by the logged-in user. In Windows, this is specified in the Control Panel > Regional and Language Options.

  • Integer: Used to display whole numbers rounded up or down to the nearest unit.
             Example documentation icon EN.png  152200.10 ==> 152200
  • Float: Used to display values with 2 decimal places.
             Example documentation icon EN.png  152200 ==> 152200.00
  • Big Number: Used to display values converted to thousands (k), millions (m), billions (G) followed by the unit symbol. Numbers are rounded up or down to the nearest unit.
             Example documentation icon EN.png  152200 ==> 152k

Chart Label -/- Legend

ChartLabelLegendPieDonutChart

Properties of the legends

Property Description Representation
Element to format: Element (1) Label: Legend of the segments EVApps - Graphic Properties - Chart Label Element Pie Donut Chart.png
(2) Legend: Legend displayed at the top right of the chart

PageGeneralFormat
For all types of widgets
Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Line-Height (Inherit) Height of the row containing the object in pixels

Legend

Legend: Used to indicate if the legend should be displayed at the top right of the chart (box is checked) or hidden (box is not checked).

  • The legend is made up of the names of each dimension element preceded by a button.
  • The color of the buttons is defined by the theme applied to the chart (Chart > Color Theme).
  • The legend can be used as a dynamic data filter in execute mode. When you click a button or name, you can display or hide the corresponding values in the chart, e.g. if you want to hide Marketing data.
             Apps - widgets Dashboards - Legend.png

Display/Hide Labels: Used to indicate if the data labels should be displayed (box is checked) or hidden (box is not checked). Note: If required, use the Labels Outside property to define the position of the labels.

Color of Arc Text: Used to indicate if the data labels are displayed in a specific color (box is checked) or in black (box is not checked).

Label Type: Used to define the content of the data labels. Note: Use the Labels Outside property to define the position of the labels.

  • Value: Used to display the value of the dimension element.
  • Label: Used to display the name of the dimension element.
  • Percent: Used to display the value of the dimension element as a percentage.
  • Label and Percent: Used to display the name of the dimension element and its value as a percentage.

Labels Outside: Used to indicate if the data labels are displayed inside each segment (box is checked) or outside each segment (box is not checked).

Box is checked Box is not checked
EVApps - widget PieDonut - Label inside.png EVApps - widget PieDonut - Label outside.png

Label Threshold: When the value of a dimension element exceeds the threshold, its data label will be displayed. Note: The threshold applies to the display unit of labels defined in the Label Type property.
         Example documentation icon EN.png  Threshold = 0.15; Display percentage  ==>  Only data labels whose percentage value exceeds 15% will be displayed.

Theme

    Open url.png  See List of properties

Tags:
Last modified by Unknown User on 2017/09/01 17:29
Created by Administrator XWiki on 2014/11/12 22:14

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018