How to create Flutter master-detail chart using the cartesian charts widget (SfCartesianChart) ?
In this article, we explained how to create the flutter master-detail chart using the SfRangeSelector widget for viewing the required data of the SfCartesianChart widget.
The master-detail chart is the chart with the huge amount of data, and in which the range selector navigator is used for viewing the specified or required data. You can achieve this using the Syncfusion_flutter_sliders and Syncfusion_flutter_charts packages.
Follow these steps to render the master-detail chart with the range selector:
Step 1: Declare the data source namely, splineAreaSeriesData, splineData, and rangeController of type RangeController, which is used to bind the SfRangeSelector and the SfCartesianChart. And minimum and maximum of type DateTime, which is used to set as minimum and maximum value for the rangeController, respectively. Finally, declare the splineAreaChart and splineChart of type SfCartesianChart.
final DateTime min = DateTime(2017, 01, 01), max = DateTime(2018, 01, 01); late RangeController rangeController; late SfCartesianChart splineAreaChart, splineChart; List<ChartSampleData> splineAreaSeriesData, splineData;
Step 2: Initialize the start and end value for rangeController in the initState method and initialize the splineAreaSeriesData data source, which is the main chart of huge amount of data and splineData is used as the child of SfRangeSelector.
@override
void initState() {
super.initState();
rangeController = RangeController(
start: DateTime.fromMillisecondsSinceEpoch(1498608000000),
end: DateTime.fromMillisecondsSinceEpoch(1508112000000),
);
//Initialize the splineAreaSeriesData
<ChartSampleData>[
ChartSampleData(x: DateTime(2000, 01, 01, 0), y: 100),
ChartSampleData(x: DateTime(2000, 01, 15), y: 10),
ChartSampleData(x: DateTime(2000, 02, 01), y: 40),
ChartSampleData(x: DateTime(2000, 02, 15), y: 34),
ChartSampleData(x: DateTime(2000, 03, 01), y: 80),
ChartSampleData(x: DateTime(2000, 03, 15), y: 49),
…
];
//Initialize the data with the huge amount in order to view using SfRangeSelector.
<ChartSampleData>[
ChartSampleData(
x: DateTime.fromMillisecondsSinceEpoch(1483315200000), y: 0.9557),
ChartSampleData(
x: DateTime.fromMillisecondsSinceEpoch(1483401600000), y: 0.963),
ChartSampleData(
x: DateTime.fromMillisecondsSinceEpoch(1483488000000), y: 0.9582),
ChartSampleData(
x: DateTime.fromMillisecondsSinceEpoch(1483574400000), y: 0.9524),
ChartSampleData(
x: DateTime.fromMillisecondsSinceEpoch(1483660800000), y: 0.9445),
…
];
}
Step 3: Initialize the SfCartesianChart for splineAreaChart.
splineAreaChart = SfCartesianChart( primaryXAxis: // Assigning the maximum value as max value. DateTimeAxis(isVisible: false, maximum: DateTime(2018, 1, 1)), primaryYAxis: NumericAxis(isVisible: false), series: <SplineAreaSeries<ChartSampleData, DateTime>>[ SplineAreaSeries<ChartSampleData, DateTime>( dataSource: splineSeriesData, //Binding xValueMapper. xValueMapper: (ChartSampleData sales, _) => sales.x, //Binding yValueMapper. yValueMapper: (ChartSampleData sales, _) => sales.y, ) ], )
Step 4: Initialize the SfCartesianChart for the main splineChart with the minimum and maximum values and assign the rangeController to the rangeController property of the primaryXAxis.
splineChart = SfCartesianChart( primaryXAxis: DateTimeAxis( //Set the minimum and maximum value of the axis minimum: DateTime.fromMillisecondsSinceEpoch(1498608000000), maximum: DateTime.fromMillisecondsSinceEpoch(1508112000000), // Assigning the rangeController rangeController: rangeController ), series: <SplineSeries<ChartSampleData, DateTime>>[ SplineSeries<ChartSampleData, DateTime>( dataSource: splineSeriesData, // Binding xValueMapper xValueMapper: (ChartSampleData sales, _) => sales.x, // Binding yValueMapper yValueMapper: (ChartSampleData sales, _) => sales.y, ) ], )
Step 5: Finally, initialize the SfRangeSelector, in which assign the min and max values to the min and max properties and assign the rangeController to the controller property, and child as our splineAreaChart.
SfRangeSelector( min: min, max: max, controller: rangeController, child: Container( child: splineAreaChart , ), ),
Thus, the SfCartesianChart of type spline chart is rendered with the huge amount of data and SfRangeSelector to view the view port data alone.
Screenshot
