XY Chart

Description:

XY Chart

Provides a graphical representation of data, in which the data is represented by lines along X-axis and Y-axis.

Allowed Parent Components:

1. Card Body

2. Col

3. Grid Child

4. Horizontal Section

5. Vertical Section

Allowed Child Components:

1. Popover

2. Pulse

3. Trigger Before Render

4. Trigger On Click

Properties

➤ Type

Bubble Chart uses bubble-like symbols to depict data on the Plot Area. Scatter chart is used to plot co-relations between two variables for a set of dataPoints. Zoomscatter is an extension of the scatter chart with the zooming and panning features.

Allowed Values:

1. bubble

2. scatter

3. zoomscatter

➤ 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

➤ Enable Smart Labels

By default smart labels manage overlapping of labels even when a large number of labels are placed in the close vicinity. Uncheck to disable these smart labels.

Allowed Values: Yes/No

➤ Height

Provide a number to set height for the chart.

Allowed Values: Any number value

➤ Place Values Inside

Enable this to display values inside of the chart symbols.

Allowed Values: Yes/No

➤ Show Labels

Enable this to display labels of the chart.

Allowed Values: Yes/No

➤ Show Legend

Enable this to display legend properties for the chart.

Allowed Values: Yes/No

➤ Show Legend On Right

Enable this to display legend properties properties on right side 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

➤ Show Xaxis Line

Enable this to display a line along X-axis

Allowed Values: Yes/No

➤ Show Yaxis Line

Enable this to display a line along Y-axis

Allowed Values: Yes/No

➤ Use3 Dlighting

Enable this to appear 3DLightegning effect for the chart.

Allowed Values: Yes/No

➤ Width

Provide a number to set width of the chart

Allowed Values: Any number value

➤ X Axis Name

Provide a name that you would want to display on the X-axis.

Allowed Values: Free text field

➤ Y Axis Name

Provide a name that you would want to display on the Y-axis.

Allowed Values: Free text field

➤ Label Display

Select the way you want your label to display.

Allowed Values:

1. auto

2. wrap

3. stagger

4. rotate

➤ Slant Labels

Enable this to display labels in slant manner

Allowed Values: Yes/No

➤ Stagger Lines

Enter a numeric value above 2 to control how many lines to stagger the label to. By default, all labels are displayed in a single line.

Allowed Values: Any number value

➤ Label Step

Value to display every n-th label, instead of all labels on the x-axis

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

➤ Anchor Radius

This attribute sets the radius (in pixels) of the anchor.

Allowed Values: Any number value

➤ Anchor Border Thickness

Helps you set border thickness of anchors.

Allowed Values: Any number value

➤ 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

➤ Key Attribute

It is the primary key field in the current data source.

Allowed Values: It is the primary key field in the current data source.

➤ Label Attribute

The attribute that you would want to display as the label on the X- axis

Allowed Values: The attribute that you would want to display as the label on the X- axis

➤ Category Key Attribute

Select a attribute so that the mathematical functions will be performed on this attribute.

Allowed Values: Select a attribute so that the mathematical functions will be performed on this attribute.

➤ Category Attribute

To display all the categories based on the attribute that you provide in a legend at the bottom.

Allowed Values: To display all the categories based on the attribute that you provide in a legend at the bottom.

➤ X Axis Value Attribute

It is a column through which you can get the data from DataSource to display along X-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along X-axis.

➤ Y Axis Value Attribute

It is a column through which you can get the data from DataSource to display along Y-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along Y-axis.

➤ Z Axis Value Attribute

It is a column through which you can get the data from DataSource to display along Z-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along Z-axis.

➤ 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

➤ Label Format Expression

Specify an expression that should be evaluated to a string

Allowed Values: An expression which should return string after evaluation