fl_chart icon indicating copy to clipboard operation
fl_chart copied to clipboard

Line Chart SideTitles follow interval incorrectly

Open ShBr2k opened this issue 2 years ago • 2 comments

Hi, guys. It's my first post, so please be patient.

I have some array of DateTime: FlSpot(1640988000000, 1), //2022/01/01 00:00 FlSpot(1640991600000, 2), //2022/01/01 01:00 FlSpot(1640995200000, 1), //2022/01/01 02:00 FlSpot(1640998800000, 2), //2022/01/01 03:00 FlSpot(1641002400000, 1), //2022/01/01 04:00 FlSpot(1641006000000, 2), //2022/01/01 05:00

And Interval: 3000000; // 50 minutes

Expected values and fact values is correct.

Expected values: 1640988000000.0 : 00:00 1640991000000.0 : 00:50 1640994000000.0 : 01:40 1640997000000.0 : 02:30 1641000000000.0 : 03:20 1641003000000.0 : 04:10 1641006000000.0 : 05:00

Fact values: [log] 1640988000000.0 : 00:00 [log] 1640991000000.0 : 00:50 [log] 1640994000000.0 : 01:40 [log] 1640997000000.0 : 02:30 [log] 1641000000000.0 : 03:20 [log] 1641003000000.0 : 04:10 [log] 1641006000000.0 : 05:00

But when array of DateTime is: FlSpot(1640995200000, 1), //2022/01/01 02:00 FlSpot(1640998800000, 2), //2022/01/01 03:00 FlSpot(1641002400000, 1), //2022/01/01 04:00 FlSpot(1641006000000, 2), //2022/01/01 05:00 FlSpot(1641009600000, 1), //2022/01/01 06:00 FlSpot(1641013200000, 2), //2022/01/01 07:00

And the same interval: 3000000; // 50 minutes

Expected values and fact values is not identical.

Expected values: 1640995200000.0 : 02:00 1640998200000.0 : 02:50 1641001200000.0 : 03:40 1641004200000.0 : 04:30 1641007200000.0 : 05:20 1641010200000.0 : 06:10 1641013200000.0 : 07:00

Fact values: [log] 1640995200000.0 : 02:00 [log] 1640997000000.0 : 02:30 <-- 30 minutes difference [log] 1641000000000.0 : 03:20 [log] 1641003000000.0 : 04:10 [log] 1641006000000.0 : 05:00 [log] 1641009000000.0 : 05:50 [log] 1641012000000.0 : 06:40 [log] 1641013200000.0 : 07:00 <-- 20 minutes difference

Could you please explain why value have incorrect interval?

Thank you so much.

Versions:

  • Flutter version 2.10.4
  • Dart version 2.16.2
  • fl_chart: 0.50.6
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:fl_chart/fl_chart.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FL Chart Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(
            height: 300,
            child: Padding(
              padding: const EdgeInsets.all(24),
              child: LineChart(
                LineChartData(
                  lineBarsData: [
                    LineChartBarData(
                      spots: const [
                        // FlSpot(1640988000000, 1), //2022/01/01 00:00
                        // FlSpot(1640991600000, 2), //2022/01/01 01:00
                        FlSpot(1640995200000, 1), //2022/01/01 02:00
                        FlSpot(1640998800000, 2), //2022/01/01 03:00
                        FlSpot(1641002400000, 1), //2022/01/01 04:00
                        FlSpot(1641006000000, 2), //2022/01/01 05:00
                        FlSpot(1641009600000, 1), //2022/01/01 06:00
                        FlSpot(1641013200000, 2), //2022/01/01 07:00
                      ],
                    ),
                  ],
                  gridData: FlGridData(
                    show: false,
                  ),
                  titlesData: FlTitlesData(
                    leftTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: false,
                      ),
                    ),
                    topTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: false,
                      ),
                    ),
                    rightTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: false,
                      ),
                    ),
                    bottomTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: true,
                        interval: 3000000, // 50 minutes
                        getTitlesWidget: (double value, TitleMeta meta) {

                          String dateTimeString = DateFormat('HH:mm').format(DateTime.fromMillisecondsSinceEpoch(value.toInt()));
                          log('$value : $dateTimeString');

                          return Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: Text(dateTimeString),
                          );
                        },
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

ShBr2k avatar May 28 '22 10:05 ShBr2k

I'm also having this issue, but mine is date value with interval: 86400000 * 4 // 4 days interval and the data start from 03/01/2022 it first jumped on 04/01/2022 not on 07/01/2022.

mandaputtra avatar Jun 12 '22 14:06 mandaputtra

The first and last values are always included, if u don't want it, just return SizedBox(). Values in between are computed from 0 (in your case since start of epoch 1.1.1970). See #893

RobinJespersen avatar Jul 17 '22 17:07 RobinJespersen