How to use sf cartesian chart to automatically calculate y-axis range - flutter
I want to create a line chart with a list of CoinData with SfCartesian Chart in flutter and I want the chart to automatically make the starting point of the y-axis the lowest number provided and the highest number to be the highest number provided. I looked through the docs https://help.syncfusion.com/flutter/cartesian-charts/axis-customization , and the closest thing I could find was the property anchorRangeToVisiblePoints: false or manually setting the property visibleMinimum and visibleMaximum but that isn't an option as I would be passing different CoinData prices based on different coins and I can't use the same value for all of them, any idea how I can implement this
For more context, this is the code I am using to test and experiment.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class Charts extends StatefulWidget {
const Charts({Key? key}) : super(key: key);
#override
_ChartsState createState() => _ChartsState();
}
class _ChartsState extends State<Charts> {
#override
void initState() {
// TODO: implement initState
// _CoinData = getChartData();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 267,
child: SfCartesianChart(
primaryYAxis: NumericAxis(isVisible: false,anchorRangeToVisiblePoints: false,),
tooltipBehavior: TooltipBehavior(enable: false),
primaryXAxis: DateTimeAxis(isVisible: false,),
series: <ChartSeries>[
// Renders line chart
LineSeries<CoinData, DateTime>(
dataSource: prices,
xValueMapper: (CoinData sales, _) => sales.year,
yValueMapper: (CoinData sales, _) => sales.sales)
]))));
}
}
class CoinData {
CoinData(int year, this.sales) {
this.year = DateTime.fromMillisecondsSinceEpoch(year).toLocal();
}
late DateTime year;
double sales;
}
List<CoinData> prices = [
CoinData(1642392036421, 42749.711818578595),
CoinData(1642388517068, 42989.70122789917),
CoinData(1642395633127, 42712.08236994989),
CoinData(1642402838825, 42843.846816992016),
CoinData(1642399332413, 42599.83212961661),
CoinData(1642406434920, 42718.431064867356),
CoinData(1642410277789, 42918.18830305879),
CoinData(1642413740231, 42953.704362756995),
CoinData(1642417237341, 42848.42337504775),
CoinData(1642420853261, 42787.2565709712),
CoinData(1642424533130, 42666.07903883221),
CoinData(1642428022319, 42682.25091040553),
CoinData(1642431666253, 42706.84109519157),
CoinData(1642435475100, 42554.380859461504),
CoinData(1642438853722, 42288.63596857892),
CoinData(1642442594070, 42117.89357566385),
CoinData(1642446293756, 42292.17977430048),
CoinData(1642449728774, 42331.65604621167),
CoinData(1642453270106, 42213.655228582276),
CoinData(1642456918900, 41756.89208374346),
CoinData(1642460477923, 42346.541012394795),
CoinData(1642464161403, 42311.13096812778),
CoinData(1642468369285, 42420.84387886949),
CoinData(1642471295036, 42305.94587540152),
CoinData(1642474865285, 42310.62962338389),
CoinData(1642478466863, 42073.464694362105),
CoinData(1642482191362, 42104.48450429597),
CoinData(1642485765736, 42243.993380507665),
CoinData(1642489204082, 42415.20222337461),
CoinData(1642492943052, 42085.76408393512),
CoinData(1642496567754, 41774.58393396233),
CoinData(1642500099392, 42055.251604425226),
CoinData(1642503653184, 42058.93212053518),
CoinData(1642507342334, 41843.44735603253),
CoinData(1642510959133, 41889.82064061213),
CoinData(1642514481569, 41727.002021779736),
CoinData(1642518077038, 41356.61112815827),
CoinData(1642521723376, 41702.56259168864),
CoinData(1642525337159, 41796.53046970178),
CoinData(1642528983594, 41550.28411391625),
CoinData(1642532466377, 41716.19509209493),
CoinData(1642536297311, 41812.879241771945),
CoinData(1642539721904, 41741.91803252099),
CoinData(1642543231985, 42498.18123135277),
CoinData(1642546837453, 42498.47853946216),
CoinData(1642550473450, 42395.45879157343),
CoinData(1642554229144, 42332.290976869364),
CoinData(1642557774831, 42454.98929665433),
CoinData(1642561329780, 42334.4404296046),
CoinData(1642564980424, 41779.01270893919),
CoinData(1642568497700, 41820.97346316072),
CoinData(1642572157122, 41778.45401628946),
CoinData(1642575888262, 41781.40839917395),
CoinData(1642579246250, 41265.005495175465),
CoinData(1642582988822, 41325.06579035713),
CoinData(1642586541303, 41658.36261134919),
CoinData(1642590063989, 41455.42789267524),
CoinData(1642593802287, 42111.015879629755),
CoinData(1642597245462, 42194.35952948134),
CoinData(1642600921347, 42201.65536625609),
CoinData(1642604564168, 42652.55815588597),
CoinData(1642608225687, 42014.03261432062),
CoinData(1642611838743, 41969.260501867146),
CoinData(1642615253442, 42134.455770558474),
CoinData(1642619019192, 42025.43482944683),
CoinData(1642622544973, 41968.95038082978),
CoinData(1642626078457, 41618.25322218039),
CoinData(1642629658614, 41817.745577805385),
CoinData(1642633358721, 42035.87953978328),
CoinData(1642636805471, 41749.55143098559),
CoinData(1642641169518, 41907.06638025352),
CoinData(1642644119959, 41813.24412079334),
CoinData(1642647699541, 42072.19957608677),
CoinData(1642651295109, 41995.408525918814),
CoinData(1642654929816, 41969.901994013315),
CoinData(1642658514025, 41923.96890233066),
CoinData(1642662252361, 42064.208021444596),
CoinData(1642665773630, 42113.0463479793),
CoinData(1642669406880, 41964.771542199494),
CoinData(1642672807732, 42153.83194877708),
CoinData(1642676524869, 42155.166974090964),
CoinData(1642680057034, 42210.41697932467),
CoinData(1642683741769, 42078.59816595068),
CoinData(1642687252649, 42457.09178193016),
CoinData(1642690904488, 43120.58908265619),
CoinData(1642694609592, 43308.03956681778),
CoinData(1642698105291, 43299.353057524866),
CoinData(1642701608567, 43056.540669581744),
CoinData(1642705247727, 43149.926635185744),
CoinData(1642708911675, 42946.95943008196),
CoinData(1642712563338, 42612.93819242102),
CoinData(1642716114837, 41368.03820513283),
CoinData(1642719655169, 41244.72558790132),
CoinData(1642723259219, 40707.6824143097),
CoinData(1642726814802, 41011.486226241585),
CoinData(1642730438307, 39502.20976924315),
CoinData(1642734045516, 40005.428327993286),
CoinData(1642737632525, 38595.357998473075),
CoinData(1642741374260, 38972.1426142197),
CoinData(1642744931144, 39069.60851847918),
CoinData(1642748534002, 38825.08225149761),
CoinData(1642752138990, 39285.10057661805),
CoinData(1642755972492, 39282.13205482304),
CoinData(1642759231219, 39146.98486305409),
CoinData(1642762897123, 39029.01940763461),
CoinData(1642766505275, 38972.112801224925),
CoinData(1642770171389, 37978.94600196123),
CoinData(1642773639856, 38683.65020437281),
CoinData(1642777278422, 38477.708224151065),
CoinData(1642780809533, 39161.402329147226),
CoinData(1642784572974, 38684.34956161961),
CoinData(1642788115113, 38357.71969772329),
CoinData(1642791689302, 38555.043969645936),
CoinData(1642795342047, 38203.1890035537),
CoinData(1642798814773, 38178.00057195512),
CoinData(1642802402972, 36018.680208090766),
CoinData(1642806110522, 35761.710943672675),
CoinData(1642809848015, 36385.341362730935),
CoinData(1642814471774, 36342.22689553229),
CoinData(1642816873862, 36637.351584595846),
CoinData(1642820548357, 36639.176855482365),
CoinData(1642824152214, 36317.547348304455),
CoinData(1642827750453, 36412.4702263163),
CoinData(1642831381738, 35732.43347988268),
CoinData(1642834948400, 35869.70749858731),
CoinData(1642838429026, 35580.66865547844),
CoinData(1642842379605, 35692.12145599295),
CoinData(1642845602154, 34658.69118169887),
CoinData(1642849332824, 35631.29321200412),
CoinData(1642852860526, 35423.733623564774),
CoinData(1642856436347, 35952.32534384478),
CoinData(1642860031930, 35680.11740179815),
CoinData(1642863977964, 35193.74160008464),
CoinData(1642867200863, 34991.02054654133),
CoinData(1642870885598, 35109.6564826399),
CoinData(1642874429377, 34631.73103161949),
CoinData(1642878479406, 34527.6528378289),
CoinData(1642881707361, 34602.79496883843),
CoinData(1642885302767, 35464.161836675376),
CoinData(1642888839111, 35630.207411484356),
CoinData(1642892552509, 34935.31059784646),
CoinData(1642896166621, 35180.435462830384),
CoinData(1642899604966, 35432.61134395314),
CoinData(1642903362311, 35448.608106994194),
CoinData(1642906830933, 35044.59262923074),
CoinData(1642910508104, 35176.65728559375),
CoinData(1642914151050, 35348.42857530886),
CoinData(1642917659189, 35591.25705774395),
CoinData(1642921325713, 35342.902225939535),
CoinData(1642924951086, 35673.892148853825),
CoinData(1642928575653, 35760.80532005177),
CoinData(1642932210452, 35974.488705639684),
CoinData(1642935648639, 35898.49265417996),
CoinData(1642939382142, 35764.30539081825),
CoinData(1642942855334, 35924.69475847814),
CoinData(1642946608245, 36066.53867510662),
CoinData(1642950193192, 35208.08509273927),
CoinData(1642954326416, 35476.641272607),
CoinData(1642957238487, 35363.39608281859),
CoinData(1642960836652, 35472.73143627676),
CoinData(1642964487734, 35005.57945651765),
CoinData(1642968200712, 34804.560652713786),
CoinData(1642971750755, 35332.049887473404),
CoinData(1642975229876, 35566.67303014184),
CoinData(1642978900086, 35578.38113726986),
CoinData(1642982449012, 36306.409440464704),
CoinData(1642986538625, 35976.423803204576),
CoinData(1642989785208, 35614.40208623434),
CoinData(1642991427000, 35631.47620568353)
];
For more context, this is what I'm trying to create
But this is what I am getting
I do not want it to start from 0, I want it to start from the lowest number like 31,000 or something but I don't want to manually use the property visibleMinimum and visibleMaximum to set the range, as it would be using different coins with different values.
Your requirement can be achieved using the rangePadding property available in the axis. Set the range padding as round, this will round off the range for the available data point. We have provided the UG and code snippet below for your reference.
Code snippet:
primaryYAxis: NumericAxis(
rangePadding: ChartRangePadding.round
)
UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#applying-padding-to-the-range
Related
iterate through a list of widgets based on a list of objects in a formula
I am trying to display a certain series of widgets based on objects contained in a formula. Here is how I am assigning the widgets to a variable based on their type. var l = TankFormulaLength(length: tankSpec.tankSpecs.imperialLength); var w = TankFormulaWidth(width: tankSpec.tankSpecs.imperialWidth); var h = TankFormulaHeight(height: tankSpec.tankSpecs.imperialHeight); var d = TankFormulaDiameter(diameter: tankSpec.tankSpecs.imperialDiameter); List<Widget> tankMeasurements = [l, w, h, d]; Here is where these are being used. Column(children: <Widget>[ ...tankFormula(tankMeasurements, tankSpec.tankSpecs.formula), ], ), The formula is pulled from an api call that happens based on a tank specification and is delivered as show below..currently I am printing it to the console so I can see what formula each tank spec is using. in my tankFormula function, I want to take the specific formula and use it to iterate through my list of widgets and only return the ones specific to the formula. Currently I am able to make all of them show up, because they are not being filtered. List<Widget> tankFormula(formulaComponents, formula) { List<Widget> calculatedFormula = []; print(formula); return formulaComponents; } I am unsure how to get the end result I am looking for. As shown in the screenshot below, I only needs the fields from the formula, 'Length' and 'Diameter', to show up as those are the only ones used in this particular formula for this specific tank specification. In other instances, it could be some of the additional fields i.e. 'Width or 'Height'. Again, based on the formula returned from the API. The additional fields 'Product', 'Tank Capacity', and 'Sensor Offset', will always be displayed. I am aware that calculatedFormula is not being used. I created this variable to hold the returned List of Widgets that will be displayed on the screen. I am stuck and unsure how to move forward. Thank you sincerely for your help in advance!
Is this perhaps what you're looking for? Widget build(BuildContext context) { return Column( children: [ if (list.contains('l')) TankFormulaLength(), if (list.contains('h')) TankFormulaHeight(), if (list.contains('w')) TankFormulaWidth(), if (list.contains('d')) TankFormulaDiameter(), ], ); } This assumes that list is your array of strings, which can look like: var list = ['l', 'h', 'w', 'd'];
The solution by "void void" is perfectly legit. If you want, for some reason, to iterate over the list, then this is a separate approach. return Column( children: list.map<Widget>((e) { switch(e) { case 'l': return TankFormulaLength(...); case 'h': return TankFormulaHeight(...); case 'w': return TankFormulaWidth(...); case 'd': return TankFormulaDiameter(...); } return const SizedBox.shrink(); ).toList(), );
Here is how I solved this problem. Because I was receiving a specific value from the api for each portion of the formula I needed to make sure I was passing that down to my custom widget through the function I had created and then checking to see which variables the formula contains. List<Widget> tankFormula(l, w, h, d, formula) { List<Widget> calculatedFormula = []; if (formula.contains('l')) { calculatedFormula.add(TankFormulaLength(length: l)); } if (formula.contains('w')) { calculatedFormula.add(TankFormulaWidth(width: w)); } if (formula.contains('h')) { calculatedFormula.add(TankFormulaHeight(height: h)); } if (formula.contains('d')) { calculatedFormula.add(TankFormulaDiameter(diameter: d)); } print(formula); return calculatedFormula; }
How can I draw polygons on google maps flutter at my current position as I move My device-Live Location Tracing
While there exist a variety or recourses already talking about something close to this, I mean this. I want to dynamically trace say a small forest/Building as I go around it live on google maps, I.e., If I stand at the edge of a building in the field with my phone (With my currentlocationenabled: true), I can trace the building from start to end and come back and close it at the starting point. Currently, I can draw any polygon anywhere on the map, but I want a dynamic one: When I go to the edge of a building I call the drawPolygonNow(), then so on and so on. My current sample code, that was guided by this resource: class _MyMapScreenState extends State<MyMapScreen> { LatLng latLngPosition = LatLng(userCurrentPosition!.latitude, userCurrentPosition!.longitude); /* Data: Add point markers, lines, polygons */ Set<Marker> _markers = {}; Set<Polygon> _polygons = HashSet<Polygon>(); List<LatLng> polygonLatLngs1 = <LatLng>[]; // Draw Polygon void _drawPolygon(LatLng latLngPosition) { final String polygonIdVal = 'Area ID_$_polygonIdCounter'; _polygons.add(Polygon( polygonId: PolygonId("1"), points: polygonLatLngs1, strokeWidth: 2, strokeColor: strokeColor, fillColor: fillColor )); body: Stack( children[ GoogleMp( polygons: _polygons, onCameraMove: _onCameraMove, onTap: (latLngPosition) { if (_isPolygon) { setState(() { polygonLatLngs1.add(latLngPosition); _drawPolygon(latLngPosition); }); } }, ...
Using List Option, Within single ID image using as Slider
class QuotationResources { final String price,vehicleShowcase,vehicleShowcaseLeft,vehicleShowcaseRight,vehicleShowcaseRear; QuotationResources({ this.vehicleNumber, this.vehicleShowcase, this.vehicleShowcaseLeft, this.vehicleShowcaseRight, this.vehicleShowcaseRear, this.price, }); } List<QuotationResources> quotationResources = [ QuotationResources( id: 1, vehicleShowcase: "assets/images/truck_1.jpeg", vehicleShowcaseLeft: "assets/images/truck_2.jpg", vehicleShowcaseRight: "assets/images/truck_3.jpg", vehicleShowcaseRear: "assets/images/truck_4.jpeg" ), ]; Basically I just want to slider, How to use id=1 images as sliders (like vehicleShowcase, vehicleShowcaseLeft, vehicleShowcaseRight, vehicleShowcaseRear), below image I need to add in the this format image: AssetImage(quotationResources.vehicleShowcase),
Pie chart is not drawn when i create the data dynamically - flutter, google pie chart library
Pie chart is not drawn when i create the data dynamically, but same is working fine when i create hardcoded values (i checked the dynamically created list, it has exact content as hardcoded one). here is my code below: static List<charts.Series<InvestmentPie, String>> _createSampleData(List<Investment> invList) { List<InvestmentPie> data = []; for(int i=0;i<invList.length;i++){ double chartVal = 0.0; List<AssetClass> assetClass = invList[i].assetClasses; for(int j=0;j<assetClass.length;j++){ AssetClass assetCl = assetClass[j]; chartVal += (assetCl.allocation * invList[i].valValue1) / 100; } Color clr = Colors.primaries[Random().nextInt(Colors.primaries.length)]; String nm = invList[i].stockName; int nms = chartVal.round(); InvestmentPie inv1 = new InvestmentPie(nm, nms, charts.Color.fromHex(code: '#${clr.value.toRadixString(16)}')); data.add(inv1); } Color clr = Colors.primaries[Random().nextInt(Colors.primaries.length)]; List<InvestmentPie> data1 = [ new InvestmentPie('BCP Protected Portfolio Bond - Growth Version', 270, charts.Color.fromHex(code: '#${clr.value.toRadixString(16)}')), new InvestmentPie('BCP Film Finance Scheme 2 (March 2019)', 411, charts.Color.fromHex(code: '#${clr.value.toRadixString(16)}')), new InvestmentPie('BCP Protected Portfolio Bond - Growth Plus Version', 285, charts.Color.fromHex(code: '#${clr.value.toRadixString(16)}')), new InvestmentPie( 'BCP Global Equity Absolute Return Bond 7 - Growth Plus Version', 342, charts.Color.fromHex(code: '#${clr.value.toRadixString(16)}')), ]; return [ new charts.Series<InvestmentPie, String>( id: 'Investments', domainFn: (InvestmentPie investment, _) => investment.stockName, measureFn: (InvestmentPie investment, _) => investment.investmentValue, colorFn: (InvestmentPie investment, _) => investment.barColor, labelAccessorFn: (InvestmentPie investment, _) => investment.stockName, data: data, ) ]; } in the above code if i use the 'data1' then i am getting the pie chart, if i change it to 'data' - then it showing empty chart as attached. I am sure the issue is with creation of my data list but dont know what it will be the issue.
How to set end date inside DatePickerTimeline flutter
I am using this package https://pub.dev/packages/date_picker_timeline#-readme-tab- to show date.. but I get confused, is there a way to set end date in this package.. for example I want to show a date from first May until last May of this year
From the plugins constructor DatePicker( this.startDate, { Key key, this.width = 60, this.height = 80, this.controller, this.monthTextStyle = defaultMonthTextStyle, this.dayTextStyle = defaultDayTextStyle, this.dateTextStyle = defaultDateTextStyle, this.selectedTextColor = Colors.white, this.selectionColor = AppColors.defaultSelectionColor, this.initialSelectedDate, this.daysCount = 500, this.onDateChange, this.locale = "en_US", }) : super(key: key); Its not supported but you could set the no of days count this.daysCount = 500,