Comments (1)
Hi,
Query 1: Need to place the y-axis above the chart.
We would like to let you know, we cannot position both the x-axis and y-axis horizontally. To transpose the axis, you can use the transposed property to switch the horizontal and vertical axes. However, we cannot position both the x-axis and y-axis horizontally. If you want to move axis within the plot area and expand the series rendering area, we suggest moving the axis tick position and axis label position inside by using the tickPosition and labelPosition respectively.
Query 2: Need to add custom content (weather icons) above the chart.
We have implemented a logic to enable users to toggle between hourly and daily data representations on a chart. This functionality is facilitated by a boolean variable, _showHourlyData, which determines the type of data to display. When the user interacts with the provided buttons, this variable is updated accordingly, triggering a re-render of the chart with the selected interval. If hourly data is chosen, the function iterates through each hour within a specified week, while for daily data, it iterates through each day. DateTimeAxis adjusted to display appropriate time intervals based on the user's selection by using the interval and intervalType properties. We have shared a code snippet and a sample for your reference below. You can modify the sample based on your needs.
Code snippet:
`
bool _showHourlyData = true;
List generateChartData(
bool showHourlyData, int week, DateTime currentDate, int hours) {
List data = [];
Random random = Random();
if (showHourlyData) {
// Generate hourly data for a week
for (int i = 0; i <= week * hours; i++) {
double y = random.nextDouble() *
100; // Generate a random y-value between 0 and 100
data.add(ChartData(currentDate.add(Duration(hours: i)), y));
}
} else {
// Generate daily data for a week
for (int i = 0; i < week; i++) {
double y = random.nextDouble() *
100; // Generate a random y-value between 0 and 100
data.add(ChartData(currentDate.add(Duration(days: i)), y));
}
}
return data;
}
@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton.icon(
onPressed: () {
setState(() {
_showHourlyData = true;
});
},
icon: const Icon(Icons.wb_sunny),
label: const Text('Show By Hour'),
),
const SizedBox(width: 10),
ElevatedButton.icon(
onPressed: () {
setState(() {
_showHourlyData = false;
});
},
icon: const Icon(Icons.cloud),
label: const Text('Show By Day'),
),
],
),
Expanded(
child: Center(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
minimum: DateTime(2022, 1, 1),
maximum: DateTime(2022, 1, 7),
majorGridLines: const MajorGridLines(width: 0),
minorGridLines: const MinorGridLines(width: 0),
interval: _showHourlyData ? 3 : 1,
intervalType: _showHourlyData
? DateTimeIntervalType.hours
: DateTimeIntervalType.days,
),
primaryYAxis: const NumericAxis(
majorGridLines: MajorGridLines(width: 0),
minorGridLines: MinorGridLines(width: 0),
),
series: [
AreaSeries<ChartData, DateTime>(
animationDuration: 0,
dataSource: generateChartData(
_showHourlyData, 7, DateTime(2022, 1, 1), 24),
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
)
],
),
`
Please let us know if you need any further assistance.
Regards,
Preethika Selvam.
bd557706.zip
from flutter-widgets.
Related Issues (20)
- DataGrid onCellSecondaryTap fires on group headers HOT 1
- Flutter DataGrid (SfDataGrid) MultiSelection,Double Tap Issue HOT 7
- Facing an issue After Update HOT 8
- [syncfusion_flutter_pdf_viewer] linux version trying to load android device info HOT 2
- [syncfusion_pdfviewer_web] Update JS version to 0.7.0+ HOT 4
- [syncfusion_flutter_charts] SplineAreaSeries supports legendIconColor HOT 2
- [syncfusion_flutter_charts] RenderDateTimeCategoryAxis is not a subtype of type DateTimeCategoryAxis in type cast HOT 1
- Not able to run the app HOT 1
- The right most border HOT 2
- [syncfusion_flutter_calendar] Error: The getter 'isShiftPressed' isn't defined for the class 'HardwareKeyboard'. HOT 1
- [syncfusion_flutter_charts] Is there any migration guide from version 23 to version 24? HOT 3
- Search engine not working on Arabic pdf HOT 2
- FR - French localization of pdf viewer selection pop-up menu HOT 2
- [syncfusion_flutter_calendar] How to specify dateText format? HOT 1
- [syncfusion_flutter_charts] Trendlines with `isVisibleInLegend: false` throw `Exception`s HOT 3
- [syncfusion_flutter_charts] broken chart on 24.x.x version HOT 2
- [syncfusion_flutter_charts] how to handle label overflow? HOT 2
- [syncfusion_flutter_charts ]How can i made a solid line chart even x axis = 0 HOT 1
- Build process failed HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter-widgets.