Chart

The chart component is used to display a type of chart to visualize data.

Below are the chart types that are available:

Charts can have a search component attached to it to provide greater flexibility in terms of displaying data. Learn more about available search components here.

Area Chart

Bar Chart

Bubble Chart

CandleStick Chart

Column Chart

Donut Chart

Line Chart

OHLC Chart

Pie Chart

Radar Area Chart

Radar Column Chart

Radar Line Chart

Range Area Chart

Range Bar Chart

Range Column Chart

Scatter Chart

ScatterLine Chart

Waterfall Chart

Targets

Every chart needs to have a target specified to return the data for the chart.

All targets for charts must return the following columns:

• SeriesName
  • Used to indicate the series the data belongs to.
• ValueField
  • Only applicable to categorical charts, contains the value typically for the YAxis.
• CategoryField
  • Only applicable to categorical charts, contains the category typically for the XAxis and can be a datetime or string.
• XField
  • Only applicable to numeric charts, contains the value for the XAxis and can either be a number or datetime.
• YField
  • Only applicable to numeric charts, contains the value for the YAxis and can either be a number or datetime.
• OpenField
  • Only applicable to CandleStick and OHLC charts. Represents the initial value recorded for a dataset within a specified time interval. It marks the beginning point of the data range for that period.
• CloseField
  • Only applicable to CandleStick and OHLC charts. The final value recorded for a dataset within a specified time interval. It represents the endpoint or the last recorded data point for that period.
• HighField
  • Only applicable to CandleStick and OHLC charts. Represents the maximum value reached within a dataset during a specified time interval. It represents the peak data point observed in the period.
• LowField
  • Only applicable to CandleStick and OHLC charts. Represents The minimum value reached within a dataset during a specified time interval. It signifies the lowest data point observed in the period.
• FromField
  • Only applicable to Range Area, Range Bar and Range Column charts. Specifies the starting value for each data point, used to establish the initial boundary of a range. It defines the lower edge of the range, marking the onset of the data span within the chart’s context.
• ToField
  • Only applicable to Range Area, Range Bar and Range Column charts. Denotes the ending value for each data point, used to set the final boundary of a range. It outlines the upper edge of the range, representing the culmination of the data span within the chart.
• SizeField
  • Only applicable to Bubble charts. Dictates the diameter of each bubble, representing a third data dimension like volume or frequency by illustrating variations in data magnitude alongside the x and y-axis values.
• SummaryField
  • Only applicable to Waterfall charts. Aggregates subtotal or total values at specific points within the chart, providing a visual summation of preceding data points such as net gains or losses.

Important Note: Fields that are unused can return null values. For example if your chart is of type categorical then the X and Y fields can both return null.

Component Code

The first section of the component contains all the variables needed for the component to function.

OnParametersSetAsync()

This is the first method to be called when the component is being loaded and is also called when there’s an update to it’s parent component.

This method is used to assign values to all variables and call GetChartData() if a valid chart type was defined.

SetupAutoRefreshTimer()

This method is called when data auto refresh is enabled and will configure a timer to refresh the data.

IDisposable.Dispose()

This method is called when the component is disposed to additionally dispose the auto refresh timer.

GetChartData()

This method is used to call the target specified in the FieldDefinition parameter to get the data for the chart.

UpdateSearchParameters(XElement searchParams)

This method is only used when a search component is being used. It’s purpose is to extract the search parameters from the search component and call GetChartData() so the chart can be refreshed and new data be displayed that falls within the new search criteria.