[]
        
(Showing Draft Content)

Sunburst EChart

A Sunburst EChart is also known as a multi-level pie chart. This chart is ideal for visualizing multi-level hierarchical data, depicted by concentric circles. The circle in the center represents the root node, surrounded by the rings representing different levels of hierarchy. Rings are divided based on their relationship with the parent slice, with each of them either divided equally or proportionally to a value. This type of chart helps users in breaking down data into different entities for identifying and visualizing multilevel parent-child relationships in different business scenarios quickly and efficiently.

Create a Sunburst EChart

To create a Sunburst EChart in Wyn Enterprise, navigate to the dashboard designer page and follow the instructions below,

  1. On the left-side menu, select the Custom Visualization icon to open the ECharts menu. customVisualizationIcon

  2. Find the Sunburst EChart from the menu and drag and drop it onto the dashboard designer.

Screenshot 2025-01-15 at 9.23.00 AM

  1. Your initial EChart should look like the image below.

Screenshot 2025-01-15 at 9.24.44 AM

  1. On the right-hand side, you will find that this action has opened the Data Binding tab. Select Add to select the data you want to bind to your EChart.

addButtonDataBindingTab

  1. Upon selecting the data you want to use in the menu, drag and drop the values onto the binding slots for Values and Details. You are going to want to drop your quantitative data into the Values slot and your categorical data into the Details slot.

Screenshot 2025-01-15 at 3.08.32 PM

One or more items need to be added to the Details slot. When more than one is added, the second needs to be a subcategory of the first, and so on. As you can see in the image above, the sample data RetailDataset has been used, with Revenue on the Values slot and Product line and Product category on the Details slot.

  1. Your EChart should look something like this.

Screenshot 2025-01-15 at 3.09.50 PM

  1. If you want to display the percentages and the product line and category names on the EChart, on the right-hand side menu, click the gear icon gearIcon to open the Inspector tab.

  2. Scroll down to the Data Labels properties section and enable the Show Data Label, Value, and the Details properties.

Screenshot 2025-01-15 at 3.11.43 PM

  1. To display your values as percentages, you can select Detail Value/Percentage from the dropdown menu of the Display Pattern property. Again, this is under the Data Labels properties.

Screenshot 2025-01-15 at 3.13.51 PM

  1. Click Preview on the top ribbon. Screenshot 2025-01-15 at 3.15.57 PM Now you have your Sunburst EChart.

Screenshot 2025-01-15 at 3.17.59 PM

Format Data Attributes

You can perform various operations in a Sunburst EChart to format the data attributes and control data display. Use the settings icon in the Data Field containers to format data attributes. The following operations are included in the Sunburst EChart scenario;

  • Aggregation Method: Use the Aggregation Method option to display a summarized value by aggregating multiple values of a data attribute. Aggregation Method supports Sum, Average, Max, Min, Count, and Distinct Count methods. See the Aggregation Method help article for more information.

  • Quick Functions: Use the Quick Functions option to highlight key indicators in your chart scenario by applying powerful calculations on measures. Quick Functions in Wyn Enterprise support Date Based Functions, Ranking Calculation, Percentile Calculation, Running Calculation, Moving Calculation, and Original Value. See the Quick Functions help article for more information.

  • Filter: Use the Filter option to display relevant data in your chart scenario. See the Filter Data help article for more information.

  • Rename: Use the Rename option to change the name of a data attribute to make it comprehensible and meaningful. See the Rename a Data Attribute help article for more information.

  • Remove: Use the Remove option to remove a data attribute from the chart scenario.

  • Tooltip Setting: Use the tooltip setting to customize the tooltips. You can customize the background image, color, and font style, add new data fields, modify the data fields, and modify expressions for data binding.

Analyze Data

Wyn dashboard scenarios support rich data analysis and exploration capabilities to help you analyze massive amounts of information and make data-driven decisions. The following analysis operations are available in the Action Bar corresponding to each scenario in the designer;

  • Filter: To filter out relevant data in your chart scenario. See the Filter Data help article, for information on using the filter options in a dashboard scenario.

  • Sort: To arrange the chart data in a more meaningful order. See the Sort help article for information on using the sort options in a dashboard scenario.

  • Conditional Visualization: To filter, compare, and rant the data in a dashboard scenario. See the Conditional Visualization help article for information on using various visualization options.

  • Data Binding: To modify the data binding of the dashboard scenario with new attributes use the Data Binding option. See the Modify Data Binding help article for more information.

  • Reference Line: To add a static line as a reference line on the chart use the Reference Line option. See the Reference Line help article for information on using various formatting options.

Customize Appearance

Under the Inspector Panel you will find the EChart settings. Modify them per your requirements. The properties of the Column EChart are listed and described below.

CHART STYLE

Property

Description

Maintain Color Assignments

To change the color assignments of the chart, turn the toggle item to True and change the color from the Palette property below.

To use the default theme color, turn the toggle item to False.

By default, the value of the Maintain Color Assignment property is set to False.

Palette

Use this to set the colors for the chart.

Graph Opacity

Allows you to set the opacity level of the EChart. Its value ranges from 0% to 100%.

Auto Gradient

To set the automatic color gradient in the chart, set the toggle item to True. By default, the value of this property is set to False.

Custom ECharts Option

Use the Custom Echarts Option to customize the chart using JavaScript code.

Custom Behavior

Use the Custom Behavior option to directly write JavaScript code and use setTimeout/setInterval/myChart (echart instance), etc., to customize the behavior of the chart, to dynamically change the chart content in real-time. Refer to the section ECharts Custom Behavior for more details.

Start Angle

Use this to set the orientation of the first sunburst section. The default setting is 90 degrees.

Radius

Use this to increase or decrease the size of the chart.

Item Space Color

Use this to set the color of the space between the rings and the segments.

ANIMATION

Property

Description

Entrance Animation

Select an option from the dropdown to set the animation style of the appearance of the chart scenario. After selecting an option from the dropdown, set the delay and duration of the animation using the Delay(s) and Duration(s) properties respectively.

Automatic Carousel

To highlight the segments one at a time and display the tooltip, set the Automatic Carousel property to True. By default, this property is set to False.

Interval(s)

Set the time interval (interval) between the segments being highlighted and the tooltip being displayed.

INTERACTION

Property

Description

Scenario Name

Add a name to the chart scenario using this property.

Cross Filter

To reflect the filtered data throughout the dashboard, set this property to True. Cross filters provide a simplified and deeper analysis of what you want to observe.

Jump To

To create a shortcut to another dashboard scenario, report, or URL use this property. See the Jump To help article for more information.

Auto Refresh

Set None, Polling, or Real Time option from the dropdown to refresh the chart data. Dropdown options are described below, None - Select None to disable auto-refresh of the chart data. Polling - Select Polling to enable auto refresh and set an interval to refresh chart data in the Refresh Interval property.

Visible Menu Items

Select the filtering and sorting options you wish to display on the chart scenario from the dropdown.

Pin Annotation

To pin the annotation to the chart scenario, set this property to True. By default, this property is set as False.

Context Menu Actions

Select multiple Context Menu Options from the dropdown. Context Menu Options include - Keep, Exclude, Jump, and Add Data Monitoring.

Click Action

Select None, Show Tooltip, Keep, Exclude, or Jump option from the dropdown to perform an action on click.

Single Selection

Set to True if you want users to select only one parameter at a time for your dashboard.

TITLE

Property

Description

Show Title

To hide the title of the chart scenario set this property to False. By default, this property is set as True.

Title

Add or edit the title of the chart scenario using this property.

Alignment

Select the Left, Center, or Right alignment of the title.

Title Font Setting

Set the font family, size, color, weight, and style of the title using the Title Font Setting options.

Padding

To create space around the title of the chart scenario use the Padding property. It supports Padding Left, Padding Top, Padding Right, and Padding Bottom. Their values can be different.

DATA LABELS

Property

Description

Show Data Label

To display data labels set the Show Data Label property to True. By default, the value of the Show Data Label property is set to False.

Display Pattern

You can change the display pattern from the value being added next to the detail, i.e. Detail(Value/Percentage) or below it, Detail Value/Percentage.

Value

To disable the display of the data label values set the Value property to False. By default, the Value property is set to True.

Display Unit

Select a display unit option from the dropdown. The available options are Auto, None, Thousands, Millions, Billions, and Trillions.

Value As Percentage

To enable the display of the data label values as percentages set the Value property to True. By default, the Value is set to False.

Decimal Places

Select the number of decimal places you would like to be displayed in the percentage.

Details

To disable the display of the data label details set the property to True. By default, it is set to False.

Location

Select the Inside or Outside option from the dropdown to display the data labels inside or outside the chart.

Display Mode

Select an option from the dropdown to set the display mode of the data labels. The available options are Auto and All.

Data Label Font Setting

Set the font family, font size, font color, font weight, and font style of the data labels using this property.

TOOLTIP

Property

Description

Tooltip Mode

Set the property to Data points to highlight the segment you hover over in the preview.

DRILL DOWN SETTING

Property

Description

Position

You can set the display position for the drill-down bar using this property. The dropdown list has the following options: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right. By default, the Top left is selected.

Home Name

You can select the initialized text for drill down path to be displayed on the preview from here. By default, the value is Home.

Font

Select the font of the drill-down path.

Current Level Font Color

Select the color for the current level text in the drill-down path.

Other Levels Font Color

Select the color for the other level text in the drill-down path.

SPECIAL DATA

Property

Description

Show Null As

Allows you to replace missing or undefined values with a placeholder.

Show Blank As

Allows you to replace values left empty with a placeholder.

NO DATA CONTENT

Property

Description

Content

Set the display content in case no data is found in the chart scenario.

Text Align

Select the Left, Right or Center option from the dropdown to align the no data content text.

Vertical Align

Set the vertical alignment of the no-data content.

Font

Set the font family, size, color, weight, and style of the no-data content using this property option.

Background Image

Add an embedded, shared, or external image as a background image for the no-data content.

LAYOUT

Property

Description

X Position

Set the horizontal position of the chart scenario using the X Position property.

Y Position

Set the vertical position of the chart scenario using the Y Position property.

Width

Set the width of the chart scenario using this property.

Height

Set the height of the chart scenario using this property.

APPEARANCE

Property

Description

Background Color

Set a background color of the chart scenario using this property.

Padding

To create space around the chart scenario, set a padding value.

Margin

Set the margin value for the chart scenario using this property.

Visibility

To hide the chart from the dashboard scenario, set this property to False . By default, the Visibility property is set as True.

Background Image

Add an embedded, shared, or external image as a background image to the chart scenario.

Border Color

Set the border color using this property.

Border Width

Set the border width using this property.

Border Radius

Set the border radius using this property.

Shadow

Add a shadow using this property.