Description
source code
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class StaticChart extends StatefulWidget {
const StaticChart({Key? key}) : super(key: key);
@OverRide
_chartState createState() => _chartState();
}
class _chartState extends State {
int? x = 10;
int? y = 15;
Timer? timer;
int index = 0;
@OverRide
void dispose() {
timer!.cancel();
super.dispose();
}
List stackList = [];
ChartSeriesController? _controller;
late TrackballBehavior _trackballBehavior;
late CrosshairBehavior _crosshairBehavior;
@OverRide
void initState() {
super.initState();
_trackballBehavior = trackballBehavior();
// _tooltipBehavior = tooltipBehavior();
_crosshairBehavior = crosshairBehavior();
timer = Timer.periodic(const Duration(seconds: 1), (_timer) {
updateData().then((value) {
_crosshairBehavior.show(
chartCustomData[index].x,
chartCustomData[index].y!.toDouble(),
);
});
// if (_crosshairBehavior != null) {
// _crosshairBehavior.showByIndex(index);
// }
});
}
CrosshairBehavior crosshairBehavior() {
return CrosshairBehavior(
activationMode: ActivationMode.singleTap,
enable: true,
shouldAlwaysShow: true,
lineType: CrosshairLineType.horizontal,
);
}
TooltipBehavior tooltipBehavior() {
return TooltipBehavior(
canShowMarker: true,
animationDuration: 20,
activationMode: ActivationMode.singleTap,
shouldAlwaysShow: true,
elevation: 6,
duration: 1,
format: 'tool tip header',
tooltipPosition: TooltipPosition.auto,
color: Colors.indigoAccent,
enable: true,
);
}
TrackballBehavior trackballBehavior() {
return TrackballBehavior(
enable: true,
lineColor: Colors.cyan,
// shouldAlwaysShow: true,
activationMode: ActivationMode.singleTap,
lineType: TrackballLineType.horizontal,
hideDelay: 10,
shouldAlwaysShow: true,
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
);
}
TrackballBehavior trackballBehavior() {
return TrackballBehavior(
enable: true,
lineColor: Colors.cyan,
// shouldAlwaysShow: true,
activationMode: ActivationMode.singleTap,
lineType: TrackballLineType.horizontal,
hideDelay: 10,
shouldAlwaysShow: true,
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
);
}
List latLong = [];
void onController(ChartSeriesController controller) {
_controller = controller;
}
List anotation = [];
@OverRide
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return WillPopScope(
onWillPop: () async {
timer!.cancel();
return true;
},
child: Scaffold(
body: SafeArea(
child: SizedBox(
height: height,
width: width,
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: height / 1.2,
width: width,
child: buildStack(width, height),
),
buildRow(),
],
),
)),
),
),
);
}
Stack buildStack(double width, double height) {
return Stack(
children: [
Row(
children: [
Expanded(
child: SfCartesianChart(
onMarkerRender: (mark) {
if (mark.seriesIndex == chartCustomData.length - 2) {
mark.color = Colors.red;
}
},
enableAxisAnimation: true,
title: ChartTitle(text: 'My Trade'),
trackballBehavior: _trackballBehavior,
// onMarkerRender: (markerArgs) {},
primaryXAxis: NumericAxis(
tickPosition: TickPosition.outside,
isVisible: true,
autoScrollingMode: AutoScrollingMode.start,
interactiveTooltip: const InteractiveTooltip(
enable: false,
canShowMarker: true,
),
),
crosshairBehavior: _crosshairBehavior,
// onTooltipRender: (TooltipArgs args) {
// args.text = 'Customized Text';
//
// print(
// '----- ${args.locationX} ${args.locationY}');
// },
series: <CartesianSeries<ChartSampleData, num>>[
AreaSeries<ChartSampleData, num>(
animationDelay: 0,
isVisible: true,
markerSettings: const MarkerSettings(
isVisible: true,
// color: Colors.transparent,
// height: 0,
// width: 0,
),
borderColor: Colors.blue,
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xff42497d),
Color(0xff21265d),
],
),
/* markerSettings: const MarkerSettings(
isVisible: true,
shape: DataMarkerType.circle,
color: Colors.amber,
height: 5,
width: 5,
borderColor: Colors.orangeAccent,
),*/
animationDuration: 0,
enableTooltip: true, opacity: 1,
onRendererCreated: onController,
dataSource: chartCustomData,
xValueMapper: (ChartSampleData data, _) => data.x,
yValueMapper: (ChartSampleData data, _) => data.y,
// dataLabelSettings: DataLabelSettings(
// connectorLineSettings: ConnectorLineSettings(
// type: ConnectorType.curve,
// color: Colors.cyan,
// ),
// ),
),
],
),
),
SizedBox(
width: width / 5,
height: height / 2,
)
],
),
...stackList,
],
);
}
Future<List> updateData() async {
y = Random().nextInt(85000);
x = x! + 20;
chartCustomData.add(
ChartSampleData(
x: x,
y: y,
),
);
if (chartCustomData.length > 20) {
chartCustomData.removeAt(0);
_controller?.updateDataSource(
addedDataIndex: chartCustomData.length - 1,
removedDataIndex: 0,
);
} else {
_controller?.updateDataSource(
addedDataIndex: chartCustomData.length - 1,
);
}
index = chartCustomData.length - 1;
return chartCustomData;
}
List chartCustomData = [
ChartSampleData(x: 10, y: 15),
ChartSampleData(x: 20, y: 30),
ChartSampleData(x: 30, y: 45),
ChartSampleData(x: 40, y: 77),
];
class ChartSampleData {
int? x, y;
ChartSampleData({this.x, this.y});
}
- logs
======== Exception caught by rendering library =====================================================
The following _CastError was thrown during paint():
Null check operator used on a null value