graphic icon indicating copy to clipboard operation
graphic copied to clipboard

How i can show just first and last time name on X axis

Open Emirgms opened this issue 2 years ago • 1 comments

Hello im using your graphic package.I need show just first and last time value because it overflow when data is bigger.




Container(
            margin: const EdgeInsets.only(top: 10),
            height: 300,
            child: Chart(
              data: lineMarkerDataFonc(widget.myGraphicData, secilenDeger, sliderValue),
              variables: {
                'time': Variable(
                  accessor: (Map datum) => datum['time'] as String,
                ),
                'value': Variable(
                  accessor: (Map datum) => datum['value'] as double,
                ),
              },
              elements: [
                LineElement(
                  position: Varset('time') * Varset('value'),
                  color: ColorAttr(
                    variable: 'value',
                    values: [
                      const Color(0xff5470c6),
                      const Color(0xff91cc75),
                    ],
                  ),
                ),
              ],

              
              axes: [
                Defaults.verticalAxis,
                Defaults.horizontalAxis,
              ],
            ),
          ),
          Slider.adaptive(
              divisions: 9,
              min: 10,
              max: 100,
              value: sliderValue,
              onChanged: ((value) {
                setState(() {
                  sliderValue = value;
                });
              })),
          Text(sliderValue.toString())
        ]));
  }
}

lineMarkerDataFonc(List<Data> myGraphicData, Data? secilenDeger, double sliderValue) {
  final List<Data> result = myGraphicData.where((element) => element.name == secilenDeger!.name).take(sliderValue.toInt()).toList();

  List<Map<String, dynamic>> mapList = [];
  int counter = 1;

  result.forEach((element) {
    mapList.add(
      {
        'counter': counter,
        'name': element.name,
        'time': DateFormat('HH:mm').format(element.lastUpdate),
        'value': element.value,
      },
    );
   
    counter++;
  });

  return mapList;
}

Screenshot_1661089766 Screenshot_1661089775

Emirgms avatar Aug 21 '22 14:08 Emirgms

You can manually set the ticks of x axis with the Scale.ticks of the x variable. Just put the first and last values in it. You can also just control the Scale.tickCount

entronad avatar Aug 23 '22 06:08 entronad