How to create Flutter master-detail chart using the cartesian charts widget (SfCartesianChart) ?

2 mins read

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

range_selector_with_spline_chart

View the sample in GitHub.

Did you find this information helpful?

Yes

Comments (0)

How to create Flutter master-detail chart using the cartesian charts widget (SfCartesianChart) ?

Screenshot

Access denied