How to show two line data's

[srishalu]

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.

[entronad]

Assuming that you have a field to separate the two types in the original data tuples, you can put them into two groups with nest operator in the position: https://pub.dev/documentation/graphic/latest/graphic/Varset-class.html

[srishalu]

I couldn't get the line's if i apply varset,

final _monthDayFormat = DateFormat('hh:mm:ss');

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

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

class _LineAreaPointPageState extends State<LineAreaPointPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  List<TimeSeriesSales> timeSeriesSales = [];

  getDatas() {
    for (int i = 0; i < 10; i++) {
      DateTime today = DateTime.now();
      DateTime secondsAgo = today.subtract(Duration(milliseconds: (5000 * i)));
      timeSeriesSales
          .add(TimeSeriesSales(secondsAgo, 60 * (i + 1), 10 * (i + 1)));
    }
  }

  @override
  void initState() {

    getDatas();
    super.initState();
  }

  @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(
              'Time series line chart',
              style: TextStyle(fontSize: 20),
            ),
            padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
          ),
          Container(
              margin: const EdgeInsets.only(top: 10),
              width: 350,
              height: 300,
              child: Chart(
                data: timeSeriesSales,
                variables: {
                  'time': Variable(
                    accessor: (TimeSeriesSales datum) => datum.time,
                    scale: TimeScale(
                      formatter: (time) => _monthDayFormat.format(time),
                    ),
                  ),
                  'sales': Variable(
                    accessor: (TimeSeriesSales datum) => datum.sales,
                    scale: LinearScale(),
                  ),
                  'sales1': Variable(
                    accessor: (TimeSeriesSales datum) => datum.sales1,
                    scale: LinearScale(),
                  ),
                },
                elements: [
                  LineElement(
                      position:
                          Varset('time') * (Varset('sales') / Varset('sales1')),
                      color: ColorAttr(
                          variable: 'sales1',
                          values: [Colors.red, Colors.black, Colors.green]),
                      shape: ShapeAttr(value: BasicLineShape(smooth: true))),
                ],
                coord: RectCoord(color: Colors.white),
                axes: [
                  Defaults.horizontalAxis,
                  Defaults.verticalAxis,
                ],
              ))
        ]))));
  }
}

class TimeSeriesSales {
  DateTime time;
  double sales;
  double sales1;
  TimeSeriesSales(this.time, this.sales, this.sales1);
}

Can you check, what is the mistake i made

[entronad]

In your case, it is not as complex as I said, you don't need to group the data.

You just need to draw two elements in the elements list, one with position Varset('time') * Varset('sales') and another with Varset('time') * Varset('sales1')

[srishalu]

Thanks for your help.

I need another info also, how to push the x-axis data, Below is the example. I need to update axis based upon the realtime datas. If one chartdata is incoming i want to move it in the x-axis.

https://user-images.githubusercontent.com/24271317/168553820-7b35841a-854a-4164-822e-53129f69df6a.mov

[anggaaryas]

just rebuild the chart with new data

[entronad]

just rebuild the chart with new data

You don't have to rebuild the chart, when data is not the same instance, the chart will recalculate and update. If the new data just concats the same instance, set changeData to true.

[srishalu]

@entronad where to set boundarySpace to false ?

[entronad]

Is boundarySpace you said is Chart.margin?

[srishalu]

In echarts we have a boundaryGap parameter in x-axis which reduces the space between the start point of the axis and the tick. Similarly do we have any property ?

[entronad]

I guess what you need is to set DiscreteScale.inflate to false: https://pub.dev/documentation/graphic/latest/graphic/DiscreteScale/inflate.html

[srishalu]

DiscreteScale is Abstract class right? Also i am using timescale for x-axis since i have datetime values and linearscale for y-axis.

[entronad]

Yes，usually subclass OrdinalScale is used. ContinuousScale(including time and linear) always inflate the axis. But if you want to shrink the content of an axis, coord range is what you need, like: https://pub.dev/documentation/graphic/latest/graphic/RectCoord/horizontalRange.html

[srishalu]

I don't want to shrink the content of the axis, what i am asking is i could find some space in the start of the x-axis, In echarts if we set boundaryGap to false means the tick could start from the startline. Similarly i need to start the tick from startline

[entronad]

So set inflate to true in OrdinalScale. time or linear scales' ticks start from the startline by default.

[Alsekar]

@entronad Is logarithmic scaling supported by this library? I need to display 2 line charts but with different scale on the y-axis. Like this Vega Logarithmic Scale

[entronad]

Each variable has it's own scale. The log scale is not supported now, only linear. Maybe you can calculate the log value in the variable accessor.