Hi, it is great library, but I have problem with performance. I have classic line chart with a lot of data. But chart is too slow, i cant zoom because it is not possible. I'm trying it on the web.

Config:

selections: {
              'tooltipMouse': PointSelection(
                on: {
                  GestureType.hover,
                },
                devices: {PointerDeviceKind.mouse},
                variable: 'Datum',
                dim: Dim.x,
              ),
              'tooltipTouch': PointSelection(
                on: {
                  GestureType.scaleUpdate,
                  GestureType.tapDown,
                  GestureType.longPressMoveUpdate
                },
                devices: {PointerDeviceKind.touch},
                variable: 'Datum',
                dim: Dim.x,
              ),
            },
coord: RectCoord(
              horizontalRangeUpdater: Defaults.horizontalRangeSignal,
            ),
data: _data,
            variables: {
              'Datum': Variable(
                accessor: (Map datum) => datum['Datum'] as String,
                scale: OrdinalScale(),
              ),
              'Hodnota': Variable(
                accessor: (Map datum) => datum['Hodnota'] as num,
                scale: LinearScale(),
              ),
              'Skupina': Variable(
                accessor: (Map datum) => datum['Skupina'] as String,
                scale: OrdinalScale(),
              ),
            },
            elements: [
              LineElement(
                position:
                    Varset('Datum') * Varset('Hodnota') / Varset('Skupina'),
                color: ColorAttr(
                  variable: 'Skupina',
                  values: [
                    const Color.fromARGB(255, 0, 236, 0),
                    const Color.fromARGB(255, 0, 128, 255),
                    const Color.fromARGB(255, 192, 192, 192),
                  ],
                ),
              ),
            ],
            axes: [
              Defaults.horizontalAxis,
              Defaults.verticalAxis,
            ],

In Example i could find only a single line plotting in all charts. How to show two line charts with datetime in x-axis and different sets of value in y-axis.

This PR adds an example of a custom Modifier. It creates a DodgeSizeModifier that changes an element's position and width depending on the number of elements in a band.

Custom Legend Example	Custom Modifier Example

Hi @entronad , We have tried to implement issue #83, but we ran into a big problem. Updating ticks requires rebuilding the chart, but this causes a memory leak. To investigate what the issue is, we have modified one of your examples (See the code below).
If we profile this example, we can see a memory leak happening. We believe this is due to the fact that the chart keeps listening to the gesture controller.

Our code

modified from line_area_point.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';

import 'package:intl/intl.dart';

final _monthDayFormat = DateFormat('MM-dd');

///DATA FOR CHART

class TimeSeriesSales {
  final DateTime time;
  final int sales;

  TimeSeriesSales(this.time, this.sales);
}

final timeSeriesSales = getData();

List<TimeSeriesSales> getData() {
  final List<TimeSeriesSales> result = [];
  for (int i = 0; i < 4000; i++) {
    result.add(TimeSeriesSales(DateTime.fromMicrosecondsSinceEpoch(i), i));
  }
  return result;
}
///DATA FOR CHART END



class LineAreaPointPage extends StatefulWidget {
  const LineAreaPointPage({Key? key}) : super(key: key);

  @override
  State<LineAreaPointPage> createState() => _LineAreaPointPageState();
}

class _LineAreaPointPageState extends State<LineAreaPointPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  late final StreamController<GestureSignal> gestureChannel;

  int tickCount = 50;

  @override
  void initState() {
    gestureChannel = StreamController<GestureSignal>.broadcast();
    debugPrint("Init");
    super.initState();
  }

  void incTickCount() {
    setState(() {
      tickCount += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    debugPrint("REBUILDING");

    if (!gestureChannel.hasListener) {
      gestureChannel.stream.listen((event) => debugPrint("EVENT"));
    }
    return Scaffold(
      appBar: AppBar(
        title: const Text('Line and Area Element'),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            for (int i = 0; i < 40; i++) {
              incTickCount();
            }
          },
          child: const Text("Rebuild Button")),
      backgroundColor: Colors.white,
      body: Chart(
        key: _scaffoldKey,
        data: timeSeriesSales,
       //when the line below is removed, the issue disappears 
        gestureChannel: gestureChannel,
        variables: {
          'time': Variable(
              accessor: (TimeSeriesSales datum) => datum.time,
              scale: TimeScale(
                formatter: (time) => _monthDayFormat.format(time),
                tickCount: tickCount,
              )),
          'sales': Variable(
            accessor: (TimeSeriesSales datum) => datum.sales,
          ),
        },
        elements: [
          LineElement(
            shape: ShapeAttr(value: BasicLineShape(dash: [5, 2])),
            selected: {
              'touchMove': {1}
            },
          )
        ],
        coord: RectCoord(color: const Color(0xffdddddd)),
        axes: [
          Defaults.horizontalAxis,
          Defaults.verticalAxis,
        ],
        selections: {
          'touchMove': PointSelection(
            on: {
              GestureType.scaleUpdate,
              GestureType.tapDown,
              GestureType.longPressMoveUpdate
            },
            dim: Dim.x,
          )
        },
        tooltip: TooltipGuide(
          followPointer: [false, true],
          align: Alignment.topLeft,
          offset: const Offset(-20, -20),
        ),
        crosshair: CrosshairGuide(followPointer: [false, true]),
      ),
    );
  }
}

Just opening this as a show-case of my failed attempt to fix #62.

It fixes the case where the user moves the mouse outside the area of the chart, but if the user alt-tabs to another window and then back to the flutter window the tooltip is left open forever.

Maybe this is ok, and two other things could be added:

1. a TTL for tooltips
2. a way of allowing the consumer of the chart to indicate if hover is enabled, it would to the consumer to control if the window is focused or not.

Maybe n.2 is possible, I'm still pretty new with this lib.

Let me know your thoughts about this.

In a line chart I need to skip the drawing of a line while keeping its corresponding tick in the x axis. This is my code:

data: [
        LineChartVM(date: '2022-06-09', value: 3),
        LineChartVM(date: '2022-06-10', value: 5),
        LineChartVM(date: '2022-06-12', value: 10),
        LineChartVM(date: '2022-06-13', value: -1),
        LineChartVM(date: '2022-06-14', value: 7),
      ];

Chart<LineChartVM>(
        data: data,
        variables: {
          'label': Variable(accessor: (LineChartVM map) => map.date),
          'value': Variable(accessor: (LineChartVM map) => map.value),
          'name': Variable(accessor: (LineChartVM map) => 'test'),
        },
        elements: [
          if (Varset('value') != -1) ...[
            LineElement(
              position: Varset('label') * Varset('value') / Varset('name'),
              size: SizeAttr(value: 2),
              color: ColorAttr(
                variable: 'name',
                values: [
                  Colors.blue,
                  Colors.blue
                ],
              ),
            ),
            PointElement(
              size: SizeAttr(value: 10),
              color: ColorAttr(
                variable: 'name',
                values: [Colors.red, Colors.green],
              ),
            ),
          ]
        ],
        axes: [
          Defaults.horizontalAxis
            ..line = null
            ..grid = null,
          Defaults.verticalAxis
            ..line = null
            ..grid = Defaults.strokeStyle
        ],
 );

In the attribute "elements" I'm trying to draw only lines for values other than -1 and I want to keep the date tick in X axis.

The if statement is not working. Varset('value') returns an object instance of Varset and I don't know how to access its internal value.

It's possible to do that?

Hi, @entronad I am getting this error while running the app after installing the graphic package can you please help me with this.

/E:/software/flutter/.pub-cache/hosted/pub.dartlang.org/graphic-0.4.1/lib/src/in
teraction/selection/selection.dart:182:36: Error: The getter 'delta' isn't      
defined for the class 'ScaleUpdateDetails'.
 - 'ScaleUpdateDetails' is from 'package:flutter/src/gestures/scale.dart'       
 ('/E:/software/flutter/packages/flutter/lib/src/gestures/scale.dart').
Try correcting the name to the name of an existing getter, or defining a getter 
or field named 'delta'.
              final delta = detail.delta - gesture.preScaleDetail!.delta;       
                                   ^^^^^
/E:/software/flutter/.pub-cache/hosted/pub.dartlang.org/graphic-0.4.1/lib/src/in
teraction/selection/selection.dart:182:68: Error: The getter 'delta' isn't      
defined for the class 'ScaleUpdateDetails'.
 - 'ScaleUpdateDetails' is from 'package:flutter/src/gestures/scale.dart'       
 ('/E:/software/flutter/packages/flutter/lib/src/gestures/scale.dart').
Try correcting the name to the name of an existing getter, or defining a getter 
or field named 'delta'.
              final delta = detail.delta - gesture.preScaleDetail!.delta;
                                                                   ^^^^^        
/E:/software/flutter/.pub-cache/hosted/pub.dartlang.org/graphic-0.4.1/lib/src/ch
art/chart.dart:255:11: Error: No named parameter with the name
'onLongPressCancel'.
          onLongPressCancel: () {
          ^^^^^^^^^^^^^^^^^
/E:/software/flutter/packages/flutter/lib/src/widgets/gesture_detector.dart:216:
3: Context: Found this candidate, but the arguments don't match.
  GestureDetector({
  ^^^^^^^^^^^^^^^
/E:/software/flutter/.pub-cache/hosted/pub.dartlang.org/graphic-0.4.1/lib/src/co
mmon/defaults.dart:162:28: Error: The getter 'delta' isn't defined for the class
'ScaleUpdateDetails'.
 - 'ScaleUpdateDetails' is from 'package:flutter/src/gestures/scale.dart'       
 ('/E:/software/flutter/packages/flutter/lib/src/gestures/scale.dart').
Try correcting the name to the name of an existing getter, or defining a getter
or field named 'delta'.
        (detail) => detail.delta.dx,
                           ^^^^^
/E:/software/flutter/.pub-cache/hosted/pub.dartlang.org/graphic-0.4.1/lib/src/co
mmon/defaults.dart:169:29: Error: The getter 'delta' isn't defined for the class
'ScaleUpdateDetails'.
 - 'ScaleUpdateDetails' is from 'package:flutter/src/gestures/scale.dart'
 ('/E:/software/flutter/packages/flutter/lib/src/gestures/scale.dart').
Try correcting the name to the name of an existing getter, or defining a getter 
or field named 'delta'.
        (detail) => -detail.delta.dy,

Fixes #84.

The DodgeModifier wasn't correctly centering the values around the original position. This pull request fixes that issue. I've also added tests to ensure that it works now and it doesn't break in the future.

Used ggplot's dodging documentation as a comparison for this modifier.

Before (main):

Note how the 0 label wasn't properly centered with relation to the vertical bars.

Now (fix/dodge-modifier-symmetric):

Note how the 0 label is now properly centered with relation to the vertical bars.

我这边会出现这种情况 Expected a value of type '(dynamic) => dynamic', but got one of type '(Map<dynamic, dynamic>) => String' json数据没有问题 大概是这样 [{ time: 2021 - 11 - 29 15: 00, name: 空气温度(℃), value: 20.1 }, { time: 2021 - 11 - 29 15: 20, name: 空气温度(℃), value: 20.1 }]

Hello guys,

When i add more than 12 elements to a line_area graphic, the grid lines are not being displayed.

Only 8 are being shown, and the other ones are blank.

i'll attach a simple code, so you can replicate the error:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'package:intl/intl.dart';

import '../data.dart';

final _monthDayFormat = DateFormat('MM-dd');

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

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Line and Area Element'),
      ),
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: <Widget>[ 
              Container(
                child: const Text(
                  'Spider Net Chart',
                  style: TextStyle(fontSize: 20),
                ),
                padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
              ),
              Container(
                child: const Text(
                  '- A loop connects the first and last point.',
                ),
                padding: const EdgeInsets.fromLTRB(10, 5, 10, 0),
                alignment: Alignment.centerLeft,
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                width: 350,
                height: 300,
                child: Chart(
                  data: adjustData,
                  variables: {
                    'index': Variable(
                      accessor: (Map map) => map['index'].toString(),
                    ),
                    'type': Variable(
                      accessor: (Map map) => map['type'] as String,
                    ),
                    'value': Variable(
                      accessor: (Map map) => map['value'] as num,
                    ),
                  },
                  elements: [
                    LineElement(
                      position:
                          Varset('index') * Varset('value') / Varset('type'),
                      shape: ShapeAttr(value: BasicLineShape(loop: true)),
                      color: ColorAttr(
                          variable: 'type', values: Defaults.colors10),
                    )
                  ],
                  coord: PolarCoord(),
                  axes: [
                    Defaults.circularAxis,
                    Defaults.radialAxis,
                  ],
                  selections: {
                    'touchMove': PointSelection(
                      on: {
                        GestureType.scaleUpdate,
                        GestureType.tapDown,
                        GestureType.longPressMoveUpdate
                      },
                      dim: 1,
                      variable: 'index',
                    )
                  },
                  tooltip: TooltipGuide(
                    anchor: (_) => Offset.zero,
                    align: Alignment.bottomRight,
                    multiTuples: true,
                    variables: ['type', 'value'],
                  ),
                  crosshair: CrosshairGuide(followPointer: [false, true]),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

For this example we are using static data:

const adjustData = [
  {"type": "Email", "index": 1, "value": 120},
  {"type": "Email", "index": 2, "value": 220},
  {"type": "Email", "index": 3, "value": 150},
  {"type": "Email", "index": 4, "value": 320},
  {"type": "Email", "index": 5, "value": 320},
  {"type": "Email", "index": 6, "value": 420},
  {"type": "Email", "index": 7, "value": 520},
  {"type": "Email", "index": 8, "value": 620},
  {"type": "Email", "index": 9, "value": 720},
  {"type": "Email", "index": 10, "value": 820},
  {"type": "Email", "index": 11, "value": 120},
  {"type": "Email", "index": 12, "value": 220},
  {"type": "Email", "index": 13, "value": 320},
];

Thank you so much in advance,

Yosue

Tooltip text generation mode has a api which is difficult to understand, and cannot be customized, unfriendly to users. This is a simple and user-friendly way to customize the tooltip text.

example:

...
tooltip: TooltipGuide(
  anchor: (_) => Offset.zero,
  align: Alignment.bottomRight,
  getTooltipText: (vars) => "[${vars['group']}] value: ${vars['value']}",
),
...

Hi all,

I'm wondering what would be the best option to paint on a different color, let's say red, the sections of an AreaElement outside of a chosen range. I'm plotting historical temperature data and I would need to highlight when the temperature went up/down a certain range.

On pie charts and donut charts, it is possible that labels will collide and overlap with each other, causing a poor user experience.

SizedBox(
  width: 400,
  height: 250,
  child: Stack(
    children: [
      Center(
        child: Text("Label Here"),
      ),
      Chart(
        data: [
          {'date': 'Label One', 'revenue': 350},
          {'date': 'Label Two Long', 'revenue': 35},
          {'date': 'Label Three Long', 'revenue': 30},
          {'date': 'Label Four', 'revenue': 300},
          {'date': 'Label Five', 'revenue': 110},
        ],
        variables: {
          'date': Variable(
            accessor: (Map map) => map['date'] as String,
          ),
          'revenue': Variable(
            accessor: (Map map) => map['revenue'] as num,
          ),
        },
        transforms: [
          Proportion(
            variable: 'revenue',
            as: 'percent',
          ),
        ],
        elements: [
          IntervalElement(
            position: Varset('percent') / Varset('date'),
            modifiers: [
              StackModifier(),
            ],
            color: ColorAttr(
              variable: 'date',
              values: Defaults.colors10,
            ),
            label: LabelAttr(
              encoder: (tuple) => Label(
                tuple['date'].toString(),
                LabelStyle(
                  style: kGraphicTextOverlayStyle,
                  maxWidth: 125,
                ),
              ),
            ),
          ),
        ],
        coord: PolarCoord(
          transposed: true,
          dimCount: 1,
          startRadius: 0.5,
        ),
      )
    ],
  ),
);

Hi entronad, when I am rendering candles in the candle stick charts, I am getting an overlapped render of the candles,

1. any way to give them a margin or something so that they don't appear to be stacked.

2. Is there a way to make the candles a bit rounded from border

3. Any workaround to add line charts of a different object other than the data passed so that new objects can be passed instead of forcefully clubbing them in one

Thank you!