Flutter not in inclusive range
I am rendering a chart with different chart types that can be choosed and I use coin gecko as the API. there are for types named Line, Area, Ohlc, and Candle. they work totally fine but when I switch from line or Area to Ohlc to Candle, then this_error shows for a second and then it disappears and shows the chart totally fine!!! I can't understand what the problem is. can you help me please? I am using syncfusion library for showing charts. here is the code:
class ChartAl extends StatefulWidget {
String id;
String chartType;
ChartAl(this.id, this.chartType, {Key? key}) : super(key: key);
@override
_ChartPageState createState() => _ChartPageState();
}
class _ChartPageState extends State<ChartAl> {
@override
Widget build(BuildContext context) {
final bloc = LatestNewsProvider.of(context);
if (widget.id != 'null') {
bloc.chartGecko(widget.id);
bloc.candleGecko(widget.id);
}
if (widget.id == 'null') {
return CircularProgressIndicator(
color: Pallete.dark_primary_color,
);
}
if (widget.chartType == 'Area' || widget.chartType == 'Line') {
return StreamBuilder(
stream: bloc.chartGeckoStream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
List pricesOfTrades = [];
var xa = [];
var ya = [];
late List<ChartData> chartData;
chartData = [];
for (var i = 0; i < snapshot.data.length; i++) {
xa.add(readTimestamp((snapshot.data[i][0])));
ya.add((snapshot.data[i][1]));
chartData.add(ChartData(xa[i], ya[i]));
}
List<PlotBand> bands = [];
for (var item in pricesOfTrades) {
bands.add(PlotBand(
isVisible: true,
borderWidth: 2,
start: item,
end: item,
borderColor: Colors.green));
}
if (widget.chartType == 'Line') {
return SfCartesianChart(
// primaryYAxis: NumericAxis(
// plotBands: widget.user != 'not' ? bands : null,
// ),
primaryXAxis: DateTimeAxis(
dateFormat: DateFormat.yMMMd(),
intervalType: DateTimeIntervalType.days,
visibleMinimum: chartData[chartData.length - 29].x,
visibleMaximum: chartData[chartData.length - 1].x),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
enablePinching: true,
),
series: <CartesianSeries<ChartData, DateTime>>[
LineSeries(
dataSource: chartData,
xValueMapper: (ChartData tendencias, _) => tendencias.x,
yValueMapper: (ChartData tendencias, _) => tendencias.y,
)
],
trackballBehavior: TrackballBehavior(
enable: true,
lineType: TrackballLineType.horizontal,
tooltipSettings: InteractiveTooltip(
enable: true, color: Pallete.dark_primary_color)),
);
} else if (widget.chartType == 'Area') {
return SfCartesianChart(
// primaryYAxis: NumericAxis(plotBands: []),
primaryXAxis: DateTimeAxis(
dateFormat: DateFormat.yMMMd(),
intervalType: DateTimeIntervalType.days,
visibleMinimum: chartData[chartData.length - 29].x,
visibleMaximum: chartData[chartData.length - 1].x),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
enablePinching: true,
),
series: <CartesianSeries<ChartData, DateTime>>[
AreaSeries(
dataSource: chartData,
xValueMapper: (ChartData tendencias, _) => tendencias.x,
yValueMapper: (ChartData tendencias, _) => tendencias.y,
)
],
trackballBehavior: TrackballBehavior(
enable: true,
lineType: TrackballLineType.horizontal,
tooltipSettings: InteractiveTooltip(
enable: true, color: Pallete.dark_primary_color)),
);
}
}
return Center(
child: CircularProgressIndicator(
color: Pallete.dark_primary_color,
));
},
);
}
return StreamBuilder(
stream: bloc.candleGeckoStream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
late List<DateTime> xs = [];
late List<double> opens = [];
late List<double> highs = [];
late List<double> lows = [];
late List<double> closes = [];
late List<CandleData> chartData = [];
// print(snapshot.data.length);
for (var i = 0; i < snapshot.data.length; i++) {
xs.add(readTimestamp((snapshot.data[i][0])));
opens.add((snapshot.data[i][1]));
highs.add((snapshot.data[i][2]));
lows.add((snapshot.data[i][3]));
closes.add((snapshot.data[i][4]));
chartData
.add(CandleData(xs[i], opens[i], highs[i], lows[i], closes[i]));
}
if (widget.chartType == 'Ohlc') {
return SfCartesianChart(
// primaryYAxis: NumericAxis(plotBands: []),
primaryXAxis: DateTimeAxis(
dateFormat: DateFormat.yMMMd(),
intervalType: DateTimeIntervalType.days,
visibleMinimum: chartData[chartData.length - 29].x,
visibleMaximum: chartData[chartData.length - 1].x),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
enablePinching: true,
),
series: [
HiloOpenCloseSeries(
dataSource: chartData,
xValueMapper: (CandleData tendencias, _) => tendencias.x,
lowValueMapper: (CandleData tendencias, _) => tendencias.low,
highValueMapper: (CandleData tendencias, _) =>
tendencias.high,
openValueMapper: (CandleData tendencias, _) =>
tendencias.open,
closeValueMapper: (CandleData tendencias, _) =>
tendencias.close,
)
],
trackballBehavior: TrackballBehavior(
enable: true,
lineType: TrackballLineType.horizontal,
tooltipSettings: InteractiveTooltip(
enable: true, color: Pallete.dark_primary_color)),
);
} else if (widget.chartType == 'Candle') {
return SfCartesianChart(
// primaryYAxis: NumericAxis(plotBands: []),
primaryXAxis: DateTimeAxis(
dateFormat: DateFormat.yMMMd(),
intervalType: DateTimeIntervalType.days,
visibleMinimum: chartData[chartData.length - 29].x,
visibleMaximum: chartData[chartData.length - 1].x),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
enablePinching: true,
),
series: [
CandleSeries(
enableSolidCandles: true,
dataSource: chartData,
xValueMapper: (CandleData tendencias, _) => tendencias.x,
lowValueMapper: (CandleData tendencias, _) => tendencias.low,
highValueMapper: (CandleData tendencias, _) =>
tendencias.high,
openValueMapper: (CandleData tendencias, _) =>
tendencias.open,
closeValueMapper: (CandleData tendencias, _) =>
tendencias.close,
)
],
trackballBehavior: TrackballBehavior(
enable: true,
lineType: TrackballLineType.horizontal,
tooltipSettings: InteractiveTooltip(
enable: true, color: Pallete.dark_primary_color)),
);
}
}
return Center(
child: CircularProgressIndicator(
color: Pallete.dark_primary_color,
));
},
);
}
}
class ChartData {
final DateTime x;
final double y;
ChartData(this.x, this.y);
}
class CandleData {
final DateTime x;
final double open;
final double high;
final double low;
final double close;
CandleData(this.x, this.open, this.high, this.low, this.close);
}
readTimestamp(int timestamp) {
var date = DateTime.fromMillisecondsSinceEpoch(timestamp);
return date;
}
SIGN IN To post a reply.
6 Replies
YG
Yuvaraj Gajaraj
Syncfusion Team
January 10, 2022 11:19 AM UTC
Hi Benyamin,
Greetings from Syncfusion. We have analyzed your query and we would like to let you that the reported issue occurs in the sample level only and not due to our chart source. So could you please try the solution provided in the below stack overflow discussion.
Hope this helps.
Regards,
Yuvaraj.
As it is shown in the code, I do not have a listview.builder to set the length value for it ! the only thing rendering the data is from syncfusion!
So what I guessed was that this error comes from that library but the strange thing is that it just shows for a second and then it shows the chart ok!
YG
Yuvaraj Gajaraj
Syncfusion Team
January 11, 2022 02:28 PM UTC
Hi Benyamin,
We have tried to replicate the reported scenario at our end, unfortunately the chart is rendering properly at our end. Since the reported scenario is not replicated at our end, can you please get back to us with the below information, this will be useful in further analysis and provide you the solution sooner.
- Is the issue getting replicated while toggling to the specific chart types or while navigating from other page to chart page?
- Ensure all the data are fetched properly before rendering chart widget
- In your application are you navigating from other view to the chart widget, if possible kindly share a video by replicating the reported scenario
- Kindly try to replicate the reported scenario with the attached sample
Regards,
Yuvaraj.
BE
Benyamin
January 13, 2022 06:06 PM UTC
1 - it only happens when I switch from line or area charts to ohlc or canlde and the weird thing is that if I switch so fast without the chart fully loaded it will not show the error !
https://github.com/benyawmin/FlutterCryptocurrencyApp
this is the github link of the project you can totally replicate the problem with git clone command and running the full project.
1 - it only happens when I switch from line or area charts to ohlc or canlde and the weird thing is that if I switch so fast without the chart fully loaded it will not show the error !
https://github.com/benyawmin/FlutterCryptocurrencyApp
this is the github link of the project you can totally replicate the problem with git clone command and running the full project.
YG
Yuvaraj Gajaraj
Syncfusion Team
January 14, 2022 03:55 PM UTC
Hi Benyamin,
Thanks for the information you have shared. We have analyzed your code and we would like to let you know that the issue regarding range error is not due to our chart it is because of data fetching from the stream, for example when switching series from area to candle the snapshot have only two fields but for candle series it needs x, open, close, high and low values. So, kindly check to this and we request to resolve at your end.
Regards,
Yuvaraj.
SIGN IN To post a reply.
- 6 Replies
- 2 Participants
-
BE Benyamin
- Jan 9, 2022 12:48 PM UTC
- Jan 14, 2022 03:55 PM UTC
