Plot multiple splineArea charts with different DateTime

[Girix Code]

Hi, I am trying to achieve the below Spline Area Charts. I am having problem with diff datetime primaryX-axis.

There can be different dates in one series and different dates in another series, as an example.

If possible, could you share the implementation that enables multiple charts to be compared?

DataPoint: X-axis will be 'created_at' as dateTime and y axis will be 'height' as double.

Thank you!
Attachment: SplineAreaUI_1abf6956.zip

[Yuvaraj Gajaraj]

Hi Girix,

The axis range will be calculated using all data points from the dependent series. Internally, intervals and interval types will be calculated based on this range, and they can be modified using the interval and intervalType properties. Here, shared a basic code snippet for 2 spline area series.

Code snippet:

SfCartesianChart(

primaryXAxis: DateTimeAxis(),

primaryYAxis: NumericAxis(),

series: <CartesianSeries<DataModel, num>>[

SplineAreaSeries(

dataSource: _dataSource1,

xValueMapper: (DataModel data, int index) => data.created_at,

yValueMapper: (DataModel data, int index) => data.height,

),

SplineAreaSeries(

dataSource: _dataSource2,

xValueMapper: (DataModel data, int index) => data.created_at,

yValueMapper: (DataModel data, int index) => data.height,

),

],

),

Regards,

Yuvaraj.

[Girix Code]

Thanks for your reply. Here you have mentioned xaxis as DateTime and Mapper is int type. Will that work?
And I have an another issue when data points are  missing between date range, It is coming to x-axis rather that joining to the last point from first point of the range.

[Yuvaraj Gajaraj]

Hi Girix,

Query #1: Here you have mentioned xaxis as DateTime and Mapper is int type. Will that work?

Sorry for the inconvenience, the integer value can't be able to map for the DateTimeAxis. We have modified the code snippet and shared it below for your reference.

Code snippet:

SfCartesianChart(

primaryXAxis: DateTimeAxis(),

primaryYAxis: NumericAxis(),

series: <CartesianSeries<DataModel, DateTime>>[

SplineAreaSeries(

dataSource: _dataSource1,

xValueMapper: (DataModel data, int index) => data.created_at,

yValueMapper: (DataModel data, int index) => data.height,

),

SplineAreaSeries(

dataSource: _dataSource2,

xValueMapper: (DataModel data, int index) => data.created_at,

yValueMapper: (DataModel data, int index) => data.height,

),

],

),

Query #2: when data points are missing between date range, It is coming to x-axis rather that joining to the last point from first point of the range.

If you are using the data point with an x value in a nonlinear, we suggest you use the DateTimeCategoryAxis instead of DateTimeAxis, it will help you to render a chart with a nonlinear data time value. We have shared the related UG documentation below for your reference.

UG, https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-category-axis

Regards,

Yuvaraj.

[Girix Code]

Thanks for your response. It worked somehow. I want to scroll horizontally like drag to the left side of the graph. It should scroll without any human event of pinching or panning. I am using DateTimeAxis in x-axis with min and max property.

For ex: I have 5 no of datetime points. and I am plotting last three points by setting up as min and max range.

How can I achieving the scroll behaviour?

[Yuvaraj Gajaraj]

Hi Girix,

We have created two samples, one adds the data at the end and removes it at the start of the chart and another sample only adds the data at the end of the chart. We have shared the sample below for your reference.

If this is not your query then please share more information on your requirement in detail along with the screenshot or screen recordings so that it will help us assist you in a better way.

Regards,

Yuvaraj.

Attachment: f181227_b97997df.zip