We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render Flutter time series chart using the charts widget (SfCartesianChart) ?

Platform: Flutter |
Control: SfCartesianChart |
Published Date: January 19, 2021 |
Last Revised Date: April 13, 2021

In this article, we explaine how to render date time values in the cartesian chart with interval in hours.

 

Our Flutter Cartesian chart provides DateTimeAxis support to render the date-time values. By default interval type will be calculated based on the data. If you wish to calculate the interval on specific type say for example month, hours, seconds, etc, then intervalType property can be used and if you wish to show the date time values in a specific format means, you can use the dateFormat property.

Refer the following instructions, to render date time values in the cartesian chart with interval in hours.

Step 1: Initialize the data source with required x (date-time) and y values.

 List<ChartSampleData> chartData = <ChartSampleData>[
    ChartSampleData(x: DateTime(2015, 1, 1, 1), yValue: 1.13),
    ChartSampleData(x: DateTime(2015, 1, 2, 2), yValue: 1.12),
    ChartSampleData(x: DateTime(2015, 1, 3, 3), yValue: 1.08),
    ChartSampleData(x: DateTime(2015, 1, 4, 4), yValue: 1.12),
    ChartSampleData(x: DateTime(2015, 1, 5, 5), yValue: 1.1),
    ChartSampleData(x: DateTime(2015, 1, 6, 6), yValue: 1.12),
    ChartSampleData(x: DateTime(2015, 1, 7, 7), yValue: 1.1),
    ChartSampleData(x: DateTime(2015, 1, 8, 8), yValue: 1.12),
    ChartSampleData(x: DateTime(2015, 1, 9, 9), yValue: 1.16),
    ChartSampleData(x: DateTime(2015, 1, 10, 10), yValue: 1.1),
  ];

 

Step 2: Initialize the SfCartesianChart widget with the required properties along with x-axis as DateTimeAxis.

SfCartesianChart(
  primaryXAxis: DateTimeAxis(),
  series: <ChartSeries<ChartSampleData, DateTime>>[
    LineSeries<ChartSampleData, DateTime>(
      dataSource: chartData,
      xValueMapper: (ChartSampleData sales, _) => sales.x,
      yValueMapper: (ChartSampleData sales, _) => sales.yValue
    )
  ]
)

 

Step 3: Specify the interval type as hours to display interval in hours and render the chart.

primaryXAxis: DateTimeAxis(
    //Specified date time interval type in hours
    intervalType: DateTimeIntervalType.hours
 ),

 

To know more about date time axis: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-axis

Screenshot

 

date_time_with_hours

 

View the sample in GitHub.

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile