selectedDate position not updating & Chart Width shrinks on MonthlyScale, #101
Description
@diegoveloper Firstly, Thanks for this Great Chart. Love what we can do with it. Although some issues do pop up which I want you to clarify or solve, please.
I have 3 buttons, Weekly, Monthly & Yearly above my Chart which changes the ChartScale accordingly to Update my chart data.
Issue 1:
I have set selectedDate: DateTime.now() but when I Click from Yearly to Weekly or Monthly, the selectedDate is not seen on the chart. In fact, It only shows me the fromDate: So if I have set fromDate to 2-3 years before, then I have to scroll 2-3 years to get to the current Week.
Image attached below.
Issue 2:
Switching from Weekly to Monthly Scale, the X Axis changed the values to Months but the graph lines disappear. Only after I tap on the graph once, do the lines reappear. No idea why this happens.
Image attached below.
Issue 3:
Weekly Chart is full width as the number of Datapoints are more and I can scroll to which every date I want. But once I go to Monthly Chart, if I have only 4-5 months ago as the fromDate, then my chart shrinks in width and shows only about 50% of the width, rest Is cropped out. The Y Axis number is also cropped on Top. How do I avoid this?
Image attached below.
#95
In another issue, u did mention that the width of the Chart can be set as in your Samples, but the Container holding the BezierChart Widget has a width set, but still, if the number of months are less, then the Axis don't stick to the edges and the chart sticks in the middle with lots of empty space on the sides.
Container ( Column ( Row of Buttons & Chart ) )
My Code snippet is as follows:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Material(
elevation: _chartScale == BezierChartScale.YEARLY ? 5 : 0,
color: _chartScale == BezierChartScale.YEARLY
? AppTheme.hexWhite
: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: InkWell(
onTap: () {
setState(() {
_chartScale = BezierChartScale.YEARLY;
});
},
child: Text(
'Yearly',
style: TextStyle(color: AppTheme.hexTotalBlack),
),
),
),
),
Material(
elevation: _chartScale == BezierChartScale.MONTHLY ? 5 : 0,
color: _chartScale == BezierChartScale.MONTHLY
? AppTheme.hexWhite
: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: InkWell(
onTap: () {
setState(() {
_chartScale = BezierChartScale.MONTHLY;
});
},
child: Text('Monthly',
style: TextStyle(color: AppTheme.hexTotalBlack)),
),
),
),
Material(
elevation: _chartScale == BezierChartScale.WEEKLY ? 5 : 0,
color: _chartScale == BezierChartScale.WEEKLY
? AppTheme.hexWhite
: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: InkWell(
onTap: () {
setState(() {
_chartScale = BezierChartScale.WEEKLY;
});
},
child: Text('Weekly',
style: TextStyle(color: AppTheme.hexTotalBlack)),
),
),
),
],
),
SizedBox(
height: 5,
),
Expanded(
child: _primaryWorkload.isEmpty
? Center(
child: CircularProgressIndicator(
backgroundColor: AppTheme.hexTotalBlack,
),
)
: _primaryWorkload == null
? Center(
child: Text(
'No Data Detected',
style: Theme.of(context).textTheme.headline5,
))
: Container(
width: MediaQuery.of(context).size.width * 0.9,
child: BezierChart(
selectedDate: DateTime.now(),
fromDate: DateTime(2020, 05, 01),
toDate: DateTime.now().add(Duration(days: 2)),
bezierChartScale: _chartScale,
footerDateTimeBuilder: (value, scaleType) {
if (scaleType == BezierChartScale.WEEKLY) {
return DateFormat('d MMM').format(value);
} else if (scaleType ==
BezierChartScale.MONTHLY) {
return DateFormat('MMM').format(value);
} else {
return DateFormat('y').format(value);
}
},
bezierChartAggregation:
BezierChartAggregation.AVERAGE,
series: [
BezierLine(
lineColor: AppTheme.hexWhite,
label: widget._pointlabel,
data: _primaryWorkload,
dataPointFillColor: AppTheme.hexTotalBlack,
onMissingValue: (value) => 0,
),
if (_secondaryWorkload != null)
BezierLine(
lineColor: AppTheme.hexOrange,
label: widget._pointlabel,
data: _secondaryWorkload,
dataPointFillColor:
AppTheme.hexTotalBlack,
onMissingValue: (value) => 0,
),
if (_tertiaryWorkload != null)
BezierLine(
lineColor: AppTheme.hexGreen,
label: widget._pointlabel,
data: _tertiaryWorkload,
dataPointFillColor:
AppTheme.hexTotalBlack,
onMissingValue: (value) => 0,
),
],
config: BezierChartConfig(
startYAxisFromNonZeroValue: false,
bubbleIndicatorValueFormat:
NumberFormat('###'),
bubbleIndicatorColor: isDarkMode
? AppTheme.hexTotalBlack
: AppTheme.hexWhite,
bubbleIndicatorLabelStyle:
Theme.of(context).textTheme.bodyText1,
bubbleIndicatorTitleStyle:
Theme.of(context).textTheme.caption,
bubbleIndicatorValueStyle:
Theme.of(context).textTheme.subtitle1,
footerHeight: 20,
pinchZoom: true,
physics: ClampingScrollPhysics(),
verticalIndicatorStrokeWidth: 3.0,
verticalIndicatorFixedPosition: true,
showVerticalIndicator: false,
verticalIndicatorColor:
AppTheme.hexTotalBlack,
displayDataPointWhenNoValue: true,
displayYAxis: true,
stepsYAxis: widget._stepYAxis,
xAxisTextStyle: Theme.of(context)
.textTheme
.caption
.copyWith(color: AppTheme.hexWhite),
yAxisTextStyle: Theme.of(context)
.textTheme
.bodyText2
.copyWith(color: AppTheme.hexWhite),
updatePositionOnTap: false),
),
)),
This is the Chart I have right now. with the Yearly, Monthly and Weekly Rounded Buttons to change the Scale.
On Tapping Monthly, the Scale changes but the Graph lines are not visible until I click on the Graph again.
The Chart Width is also reduced to fit only the available Months. The Axis does not stick to the edges.
I would really appreciate some light on these matters. Let me know if some more information is required.
Thank You in advance.