Multi Level Pie Chart

Description:

Multi Level Pie Chart

Multi Level Pie Chart is a special type of chart that allows you to show symmetrical and asymmetrical tree structures in a consolidated pie-like structure. It presents the entire hierarchical data in a single-screen snapshot, which makes it a preferred choice over a tree view. Also, the pie slices can assume numerical values and thereby divide the visual segments in a ratio based on the numerical values. The chart also offers advanced interactivity options like visual path tracing from any child to parent.

Allowed Parent Components:

1. Card Body

2. Col

3. Horizontal Section

4. Vertical Section

Allowed Child Components:

1. Popover

2. Pulse

3. Trigger Before Render

Properties

➤ Caption

Provide a title for the Chart.

Allowed Values: An expression which should return string after evaluation

➤ Sub Caption

Provide a sub title for the chart.

Allowed Values: An expression which should return string after evaluation

➤ Center Label

Provide a lable to be displayed in the center.

Allowed Values: Free text field

➤ Center Color

Provide color to be applied in the center.

Allowed Values: Free text field

➤ Height

Provide numerical value to set height in pixels.

Allowed Values: Any number value

➤ Show Labels

Enable this to display labels of the chart.

Allowed Values: Yes/No

➤ Show Shadow

Enabel this to display shadow for the chart.

Allowed Values: Yes/No

➤ Show Values

Enable this to display values if any for the category fields.

Allowed Values: Yes/No

➤ Number Prefix

Using this property, you could add prefix to all the numbers visible on the chart. For example, to represent all dollars figure on the chart, you could specify this property to $ to show like $40000, $50000.

Allowed Values: Free text field

➤ Number Suffix

Using this property, you could add suffix to all the numbers visible on the chart. For example, to represent all figures quantified as per annum on the chart, you could specify this property to '/a' to show like 40000/a, 50000/a.

Allowed Values: Free text field

➤ Show Plot Border

Enabel this to show plot border for the chart.

Allowed Values: Yes/No

➤ Pie Border Color

Provide a color to set pie chart border color.

Allowed Values: Free text field

➤ Pie Border Thickness

Provide a numeric value to set pie chart border size.

Allowed Values: Any number value

➤ Pie Fill Alpha

Provide a numeric value to set pie chart opacity.

Allowed Values: Any number value

➤ Hover Fill Color

Provide a color to set pie chart hover color.

Allowed Values: Free text field

➤ Width

Provide numerical value to set width in pixels.

Allowed Values: Any number value

➤ Value Font Size

This property lets you to configure the font size of text-field value that appears for each data plot.

Allowed Values: Any number value

➤ Palette Colors

Specify your custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., "paletteColors": "#FF0000, #0372AB, #FF5904...". The chart will cycle through the list of specified colors and then render the data plot accordingly.

Allowed Values: Free text field

➤ Export Enabled

Enable this to allow export in png, jpg, pdf, svg or xls formats.

Allowed Values: Yes/No

➤ Export File Name

Specify the name (excluding the extension) of the output (export) file. default: chart

Allowed Values: Free text field

➤ On Click

Allowed Values: Controller Function

➤ Use Existing Data Source

Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.

Allowed Values: Yes/No

➤ Data Source

Select a datasource from the list.

Allowed Values: Select a datasource from the list.

➤ Data Source Alias

Allowed Values: Free text field

➤ Default Where Clause

Allowed Values: Free text field

➤ Max Rows

Allowed Values: Any number value

➤ Order By Clause

e.g. #firstAttr#, #secondAttr# DESC

Allowed Values: Free text field

➤ Auto Query

Check this property to query the selected datasource on component render.

Allowed Values: Yes/No

➤ Execute Count SQL

Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}

Allowed Values: Yes/No

➤ Execute Distinct SQL

Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.

Allowed Values: Yes/No

➤ Value Attribute

Selected attribute value will be plotted on the chart.

Allowed Values: Selected attribute value will be plotted on the chart.

➤ Level1 Attribute

Select an attribute which contains the value for level1 of the chart.

Allowed Values: Select an attribute which contains the value for level1 of the chart.

➤ Level2 Attribute

Select an attribute which contains the value for level2 of the chart.

Allowed Values: Select an attribute which contains the value for level2 of the chart.

➤ Level3 Attribute

Select an attribute which contains the value for level3 of the chart.

Allowed Values: Select an attribute which contains the value for level3 of the chart.

➤ Level4 Attribute

Select an attribute which contains the value for level4 of the chart.

Allowed Values: Select an attribute which contains the value for level4 of the chart.

➤ Function

Select a function to do arithmetic operations on data.

Allowed Values:

1. SUM

2. COUNT

3. AVG

4. MAX

5. MIN

➤ Auto Refresh Interval

Specify this property in seconds to refresh the component to specified interval.

Allowed Values: Any number value