aadi-github
commented
2 years ago I am Creating a ScatterPlot chart based on the data in which I will show TimeStamp on the domain Axis(X-Axis). I have already built Bar and TimeSeries chart successfully. In the case of ScatterPlot, it takes Series<T, D> D as num. I tried using epoch time but did not getting much further as it should show time and also not able to add viewPort if iN terms of int only. Below is what I have tried.
Creating Series : `List<charts.Series<ValueAtTime, int>> _getScatterPlotSeries() { List<charts.Series<ValueAtTime, int>> chartsSeriesList = []; chartsSeriesList = ccdList .map((ccd) => charts.Series<ValueAtTime, int>( id: ccd.dataType, data: ccd.data, domainFn: (datum, ) => DateTime.parse(datum.date).millisecond, measureFn: (datum, ) => datum.value, colorFn: (datum, ) => charts.ColorUtil.fromDartColor(datum.color), strokeWidthPxFn: (datum, _) => 2.0, )) .toList();
var lineData = [ ValueAtTime( date: _ccdList.first.data.first.date, value: _ccdList.first.data.first.value, color: Colors.red, ), ValueAtTime( date: _ccdList.last.data.last.date, value: _ccdList.last.data.last.value, color: Colors.blue, ), ];
chartsSeriesList.add( charts.Series( id: 'Line', data: lineData, domainFn: (datum, ) => DateTime.parse(datum.date).second, measureFn: (datum, ) => datum.value, colorFn: (datum, _) => charts.ColorUtil.fromDartColor(datum.color), )..setAttribute(charts.rendererIdKey, 'customLine'), ); return chartsSeriesList; }`
Then while setting up the chart :
Container( color: Colors.white, height: 350, width: double.infinity, child: charts.ScatterPlotChart( _getScatterPlotSeries(), animate: true, domainAxis: charts.NumericAxisSpec( renderSpec: charts.SmallTickRendererSpec( labelStyle: charts.TextStyleSpec( fontSize: 10, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), ), // defaultRenderer: , customSeriesRenderers: [ charts.LineRendererConfig( customRendererId: 'customLine', layoutPaintOrder: charts.LayoutViewPaintOrder.point + 1, ), ], behaviors: [ charts.SeriesLegend( cellPadding: const EdgeInsets.all(2), showMeasures: true, position: charts.BehaviorPosition.top, desiredMaxColumns: 5, ), charts.ChartTitle( 'Real-time scatter plot for Meter ${meter.meterName}', behaviorPosition: charts.BehaviorPosition.top, titleOutsideJustification: charts.OutsideJustification.middleDrawArea, innerPadding: 2, titleStyleSpec: charts.TextStyleSpec( fontSize: 14, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), charts.ChartTitle( 'Values', behaviorPosition: charts.BehaviorPosition.start, titleOutsideJustification: charts.OutsideJustification.middleDrawArea, innerPadding: 2, titleStyleSpec: charts.TextStyleSpec( fontSize: 14, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), charts.ChartTitle( 'Time', behaviorPosition: charts.BehaviorPosition.bottom, titleOutsideJustification: charts.OutsideJustification.middleDrawArea, innerPadding: 2, titleStyleSpec: charts.TextStyleSpec( fontSize: 14, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), charts.SlidingViewport(), charts.PanAndZoomBehavior(), ], selectionModels: [ charts.SelectionModelConfig( changedListener: (charts.SelectionModel model) { AppConstants.logger({ model.selectedSeries[0] .measureFn(model.selectedDatum[0].index) }); }, ), ], ), ),
I think the chart may be plotting points at the proper place but I want to show the time at the bottom. The problem is, that It takes Numerical Axis Spec only, and also how can I format shown milliseconds if I want to.
Please let me know if I can show TimeStamp on x Axis in the Scatter plot. I have already tried showing epoch time but then how can I format it into timeStamp and show it as it takes num only.
I am Creating a ScatterPlot chart based on the data in which I will show TimeStamp on the domain Axis(X-Axis). I have already built Bar and TimeSeries chart successfully. In the case of ScatterPlot, it takes Series<T, D> D as num. I tried using epoch time but did not getting much further as it should show time and also not able to add viewPort if iN terms of int only. Below is what I have tried.
Creating Series : `List<charts.Series<ValueAtTime, int>> _getScatterPlotSeries() { List<charts.Series<ValueAtTime, int>> chartsSeriesList = []; chartsSeriesList = ccdList .map((ccd) => charts.Series<ValueAtTime, int>( id: ccd.dataType, data: ccd.data, domainFn: (datum, ) => DateTime.parse(datum.date).millisecond, measureFn: (datum, ) => datum.value, colorFn: (datum, ) => charts.ColorUtil.fromDartColor(datum.color), strokeWidthPxFn: (datum, _) => 2.0, )) .toList();
var lineData = [ ValueAtTime( date: _ccdList.first.data.first.date, value: _ccdList.first.data.first.value, color: Colors.red, ), ValueAtTime( date: _ccdList.last.data.last.date, value: _ccdList.last.data.last.value, color: Colors.blue, ), ];
chartsSeriesList.add( charts.Series( id: 'Line', data: lineData, domainFn: (datum, ) => DateTime.parse(datum.date).second, measureFn: (datum, ) => datum.value, colorFn: (datum, _) => charts.ColorUtil.fromDartColor(datum.color), )..setAttribute(charts.rendererIdKey, 'customLine'), ); return chartsSeriesList; }`
Then while setting up the chart :
Container( color: Colors.white, height: 350, width: double.infinity, child: charts.ScatterPlotChart( _getScatterPlotSeries(), animate: true, domainAxis: charts.NumericAxisSpec( renderSpec: charts.SmallTickRendererSpec( labelStyle: charts.TextStyleSpec( fontSize: 10, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), ), // defaultRenderer: , customSeriesRenderers: [ charts.LineRendererConfig( customRendererId: 'customLine', layoutPaintOrder: charts.LayoutViewPaintOrder.point + 1, ), ], behaviors: [ charts.SeriesLegend( cellPadding: const EdgeInsets.all(2), showMeasures: true, position: charts.BehaviorPosition.top, desiredMaxColumns: 5, ), charts.ChartTitle( 'Real-time scatter plot for Meter ${meter.meterName}', behaviorPosition: charts.BehaviorPosition.top, titleOutsideJustification: charts.OutsideJustification.middleDrawArea, innerPadding: 2, titleStyleSpec: charts.TextStyleSpec( fontSize: 14, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), charts.ChartTitle( 'Values', behaviorPosition: charts.BehaviorPosition.start, titleOutsideJustification: charts.OutsideJustification.middleDrawArea, innerPadding: 2, titleStyleSpec: charts.TextStyleSpec( fontSize: 14, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), charts.ChartTitle( 'Time', behaviorPosition: charts.BehaviorPosition.bottom, titleOutsideJustification: charts.OutsideJustification.middleDrawArea, innerPadding: 2, titleStyleSpec: charts.TextStyleSpec( fontSize: 14, color: charts.ColorUtil.fromDartColor(Colors.black), ), ), charts.SlidingViewport(), charts.PanAndZoomBehavior(), ], selectionModels: [ charts.SelectionModelConfig( changedListener: (charts.SelectionModel model) { AppConstants.logger({ model.selectedSeries[0] .measureFn(model.selectedDatum[0].index) }); }, ), ], ), ),
I think the chart may be plotting points at the proper place but I want to show the time at the bottom. The problem is, that It takes Numerical Axis Spec only, and also how can I format shown milliseconds if I want to.