Bind data source to technical indicators in Flutter Cartesian chart
In this article we explain how to bind the data source to the technical indicators using the Flutter cartesian chart.
The SfCartesianChart widget supports for different types of technical indicators. In our chart you can add multiple indicators for one series. To know the different types of indicators available in the chart, find the user guide.
Follow the steps to bind the data source to the technical indicators.
Step 1: Initialize the data source.
final List<ChartSampleData> chartData = <ChartSampleData>[
ChartSampleData(
x: DateTime(2016, 01, 04),
open: 102.61,
high: 105.85,
low: 96.43,
close: 96.96),
ChartSampleData(
x: DateTime(2016, 01, 11),
open: 98.97,
high: 101.19,
low: 95.36,
close: 97.13),
ChartSampleData(
x: DateTime(2016, 01, 18),
open: 98.41,
high: 101.46,
low: 93.42,
close: 101.42),
ChartSampleData(
x: DateTime(2016, 01, 25),
open: 101.52,
high: 101.53,
low: 92.39,
close: 97.34),
ChartSampleData(
x: DateTime(2016, 02, 01),
open: 96.47,
high: 97.33,
low: 93.69,
close: 94.02),
ChartSampleData(
x: DateTime(2016, 02, 08),
open: 93.13,
high: 96.35,
low: 92.59,
close: 93.99),
ChartSampleData(
x: DateTime(2016, 02, 15),
open: 95.02,
high: 98.89,
low: 94.61,
close: 96.04),
ChartSampleData(
x: DateTime(2016, 02, 22),
open: 96.31,
high: 98.0237,
low: 93.32,
close: 96.91),
ChartSampleData(
x: DateTime(2016, 02, 29),
open: 96.86,
high: 103.75,
low: 96.65,
close: 103.01),
ChartSampleData(
x: DateTime(2016, 03, 07),
open: 102.39,
high: 102.83,
low: 100.15,
close: 102.26),
];
class ChartSampleData {
ChartSampleData(
{this.x, this.open, this.high, this.low, this.close});
final DateTime? x;
final num? open;
final num? high;
final num? low;
final num? close;
}
Step 2: Initialize the SfCartesianChart widget with technical indicator with required properties and bind the data source to the series.
SfCartesianChart( primaryXAxis: DateTimeAxis( ), primaryYAxis: NumericAxis(), indicators: <TechnicalIndicator<ChartSampleData, DateTime>>[ /// ATR indicator used here. AtrIndicator<ChartSampleData, DateTime>(), ], series: <HiloOpenCloseSeries<ChartSampleData, DateTime>>[ HiloOpenCloseSeries<ChartSampleData, DateTime>( dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x as DateTime, lowValueMapper: (ChartSampleData sales, _) => sales.low, highValueMapper: (ChartSampleData sales, _) => sales.high, openValueMapper: (ChartSampleData sales, _) => sales.open, closeValueMapper: (ChartSampleData sales, _) => sales.close, name: 'AAPL', ) ], )
Step 3: If you wish to render technical indicator with series data then map the series with the indicator by using seriesName property in the technical indicator.
indicators: <TechnicalIndicator<ChartSampleData, DateTime>>[ /// ATR indicator used here AtrIndicator<ChartSampleData, DateTime>( seriesName: 'ATR' ), ] series: <HiloOpenCloseSeries<ChartSampleData, DateTime>>[ HiloOpenCloseSeries<ChartSampleData, DateTime>( name: 'ATR', // Other required properties ) ]
Step 4: If you want to render technical indicator without series data then map the x, high, low, open, and close value to highValueMapper, lowValueMapper, openValueMapper and closeValueMapper in the indicator respectively.
indicators: <TechnicalIndicator<ChartSampleData, DateTime>>[ AtrIndicator<ChartSampleData, DateTime>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, lowValueMapper: (ChartSampleData data, _) => data.low, highValueMapper: (ChartSampleData data, _) => data.high, closeValueMapper: (ChartSampleData data, _) => data.close), ]
Conclusion
I hope you enjoyed learning about how to Bind data source to technical indicators in Flutter Cartesian chart.
You can refer to our Flutter Cartesian Chart page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Cartesian Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
