Pie charts, the most common tool used for data visualization, are circular graphs that display the proportionate contribution of each category, represented by a pie or a slice. The magnitude of the dependent variable is proportional to the angle of the slice. These charts can be used for plotting just one series with non-zero and positive values.

Wyn Enterprise supports the following types of pie charts.

Pie Chart : It is a chart divided into slices or sectors. These slices represent the percentage each value contributes to a total.

Donut Chart : It is similar to the pie chart where each slice is used to display the percentage each value contributes to a total, with a hole at the center.

Rose Diagram : It is a chart divided into equal slices or sectors where the arc length of each slice depends on the value it represents. The outer segments in a rose chart are given more significance due to their large area sizes.

Design a Pie Chart in Wyn Enterprise

From the Dashboard Toolbox, open the Data Visualization node and drag-drop the Pie Chart scenario onto the design area.

Bind Dataset to Chart Scenario

With the scenario selected, from the Data Binding tab, select the dataset. Once the dataset is successfully loaded in the designer, the data binding panel automatically expands and displays the data attributes available in the dataset.

The following image shows the chart scenario bound to the 'ProcessTempsDataset' dataset.

On dragging and dropping the data attributes to the data binding area of the scenario, the chart is plotted accordingly, with a default chart title on the design area.

Format Data Attributes

To format the data attributes and control the display of data, you can perform a variety of operations, such as modifying data format and display unit, creating a hierarchy field, applying an aggregation method, etc.

For more information about these operations, see Data Attributes

In the following chart scenario, average aggregation is applied to the temperature attribute to show the average temperature.

Analyze Data

Wyn Dashboards scenarios support rich data analysis and exploration capabilities that can help analyze massive amounts of information and make data-driven decisions. For example, adding filters to scenarios, sorting data, reference lines, trend lines, etc. These operations are available in the Action Bar corresponding to each scenario in the designer.

For more information, see Data Analysis and Interactivity in Dashboards

In the following chart scenario, the filter is applied to show data only for the selected heat types, that is, steam, water, clean up, and space heat.

Customize Appearance

To customize the chart appearance, set the properties in the Inspector tab of the scenario; add a border, modify data labels, change chart style, rename the chart title, set the corner radius, etc.

General Settings

1. Change Radius

   The Radius property on Pie, Donut, and Rose charts allows you to change the inner and outer radius of the charts. Locate the Radius property under the Chart Style section of the Inspector Panel and use the slider or the input boxes to set the minimum (inner) and maximum (outer) values of the radius of the chart. These values are represented as percentages, ranging from 0% to 100%. By adjusting the radius, you can control the size of the chart relative to its component container. The default value of the outer radius is 75%.

   
   

   
   

2. Item Space

   The Item Space property of Pie and Donut charts allows you to add padding between the visual elements (pies and donuts). This property controls the spaces between individual shapes within a visual scenario ensuring that the visual representation aligns with the desired aesthetic and improves readability.

   Locate the Item Space property under the Chart Style section and use the + or - buttons to increase or decrease the item space. You can also enter a numeric value in the input box. The default value of this property is set to 0.

   
   

   
   

   The below image shows a pie chart with the Item Space property set to 10.

   
   

   The below image shows a donut chart with the Item Space property set to 30.

   
   

   
   

   Note: When the value of the Item Space property is large and data points are fewer, the data display will be incomplete.

3. Change Legend Position

   By default, Wyn Dashboards display a legend to the right of your chart scenario. To change the legend position, set the Position property of the legend to Top, Bottom, or Left. You can also display the legend title by setting the Title property to 'True'. When you enable the legend title in a scenario, Wyn Dashboards sets the data attribute name as the title. To provide a custom name to the legend title, rename the attribute in the data binding area. See the Rename an Attribute help article for more information.

   
   

   
   

4. Show/Hide Legend Items

   You can show, hide, highlight, and make the legend items inactive by just clicking the particular legend item on the preview. This is applicable in the case of multiple legend series as well.

   
   

   Perform the following steps to Show/Hide the Legend items:

• Add data binding to the Legend item.

  
  

  
  

• On the Inspector tab, under the Legend section, click the dropdown list Click Action. There are two options: Select/Unselect and Hide/Show. By default, the legend click action property is set to Select/Unselect.

  
  

  
  

• If the option Select/Unselect is selected, then initially on preview, the data is displayed for all the legend items. If any particular legend item is selected, then that legend item is highlighted, and the rest will be greyed out. You can click that legend item again, to display all the legend items again.

  
  

  
  

  
  

  There is cross-filtering for other charts in this scenario.

• If the option Hide/Show is selected, then initially on preview, the data is displayed for all the legend items. If any particular legend item is selected, then it will be hidden. You can click that legend item again to display all the legend items again.

  
  

  
  

  
  

  There is no cross-filtering for other charts in this scenario.

Note: The Click Action for the Legend is available for

all the chart types except Card Chart.

3. Display Data Labels

   You may want to display percent values as data labels in a pie chart to provide information about the individual slices. To display data labels, set the Show Data Labels property to 'True'. By default, Wyn Dashboards display values as percentages. You can format data labels by setting the Value property to 'True' and choosing an appropriate display unit from the drop-down.

   
   

   
   

4. Format Data Labels

   You can show or hide data labels in a chart using the Show Data Label property. When you set the Show Data Label property to 'True', the data labels are enabled. You can customize the data label's appearance using the Same Color As Legend and Data Label Font Setting properties. When you set the Same Color As Legend property to 'True', the color of the data labels changes to the same as the data points. However, Data Label Font Setting allows you to set font style and color as per your choice. Please note that the Data Label Font Setting works only when Same Color As Legend is set to 'False'.

   
   

   
   

   Data Labels - Display Pattern

   The pie chart supports the line break (, \n()) in the data label, and you can add a line break between Series, and Value, by using the Display Pattern property for the data labels. If you hide some parts of the label, like the value, or series, the part will be removed from the pattern, and the related connector (the prefix , \n ()) will also be removed.

   By default, the display pattern selected is Series(Value/Percentage) as shown below.

   
   

   
   

   You can select any pattern from the dropdown list.

   
   

   Preview the chart, the data labels will be shown as per the display pattern selected in the designer.

   
   

   Note: The display patterns displayed in the dropdown list here, apply to the following pie charts: Pie Chart, Donut Chart, and Rose Chart.

Advanced Settings

1. Add Click Action

   Use the Click Action property to trigger specific dashboard commands like showing or hiding other dashboard scenarios. From the Interaction section of the Inspector Panel, search the Click Action property and choose a trigger command option from the following:

   1. None: To disable any interaction on click.

   2. Show Tooltip: To display the tooltip on click action.

   3. Keep: To filter the data view by applying a condition on the data points.

   4. Exclude: To remove or hide the selected data points from the current view.

   5. Drill Down: To display more detailed information using the Wyn Drill Down feature.

   6. Jump: To redirect to another dashboard, report, or external URL. See the Jump To article for more information.

   7. Command: To trigger specific dashboard commands like show, hide, or switch. Click + Add to access the Command Settings popup and select a command from the Command dropdown.

      1. Show: To display the scenario on click.

         
         

      2. Hide: To hide the scenario on click.

         
         

      3. Toggle: To toggle the selected scenario on click action.

      4. Switch Page: To switch pages on click.

         
         

      5. Switch Tab: To switch the tab on click.

         
         

      6. 3D Scene Custom Script: To pass the selected data point as a parameter to the 3D scene script. This script creates specific UI effects in 3D scenes such as highlighting objects or changing the camera angle.

      7. Drill Down: To drill down detailed information on the selected data point. See the Drill Down article for more details.

         
         

      8. Jump: To create a redirection to another dashboard, report, or external URL. See the Jump To article for more information.

         
         

      9. Show/Hide Combined Map Layer: To show or hide the layer of combined maps.

         
         

2. Display Connecting Lines

   Connecting lines are the lines that connect the data labels with the associated data points. They make it easier to locate the data labels in a chart associated with each slice. You can display connecting lines by setting the Connecting Line Mode property to a suitable option from the drop-down. You can also specify the color and width for the connecting lines by using the Connecting Line Color and Line Width properties.

   
   

   
   

3. Set Inner Radius

   To specify the value for the inner radius in a pie chart, you can use the Inner Radius property. By default, this property is set to 70.

   Note that you can specify the inner radius value only in the Donut and Rose charts.

   
   

   
   

4. Set Corner Radius

   Round corners make the charts look more modern and appealing. For rounded corners, you just need to specify the value of the radius in the Corner Radius property. The Corner Radius property lets you change the default square-shaped corners in a chart to rounded corners. You can now set the radius of each corner (top-left, top-right, bottom-left, and bottom-right) of the slices as shown in the image below.

   
   

   Note: The Corner Radius property is applicable to the Pie, Donut, Rose, Radial Stacked Bar, Bar In Polar Coordinates, and Stack Bar In Polar Coordinates charts only.