Detail graph
x : Month ---> Jan,Feb,March,...
y : The average rainfall
I can show my line chart with my all API data (x = month , y = the average of rainfall), but I want to show line chart that the only scope are:
only in Province is กรุงเทพ
only in 2018 (1 years from all)
so all in all, the result shows only 1 graph
the average of rainfall in each month that graph shows only province in Bangkok data (กรุงเทพ) and in 2018
That's my code
Line chart code with API
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:flutter_report/RainfallThai.dart'; import 'package:http/http.dart' as http; import 'package:syncfusion_flutter_charts/charts.dart'; class LineCharts extends StatefulWidget { const LineCharts({super.key}); @override State<LineCharts> createState() => _DashBoardDBState(); } class _DashBoardDBState extends State<LineCharts> { List<RainfallThai> usersA = []; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Line Charts"), backgroundColor: Colors.pink[300], ), body: Container( child: SfCartesianChart( primaryXAxis: CategoryAxis(), title: ChartTitle(text: 'ปริมาณน้ำฝน'), legend: Legend( isVisible: true, ), tooltipBehavior: TooltipBehavior(enable: true), series: <ChartSeries<RainfallThai, String>>[ LineSeries<RainfallThai, String>( dataSource: usersA, xValueMapper: (RainfallThai monthai, _) => monthai.MonThai, yValueMapper: (RainfallThai avgrain, _) => num.tryParse(avgrain.AvgRain), ), ]), ), floatingActionButton: FloatingActionButton( onPressed: fetchUsersA, backgroundColor: Colors.amber, child: Icon(Icons.auto_graph_rounded), ), ); } void fetchUsersA() async { print('LINE CHART called'); const urlA = "https://v1.nocodeapi.com/synatic/csv2json/pOWwVHFulerJvWnC"; final uriA = Uri.parse(urlA); final responseA = await http.get(uriA); final bodyA = responseA.body; final jsonsA = jsonDecode(bodyA); final jsonA = jsonsA['json'] as List<dynamic>; final transformedA = jsonA.map((obj) { return RainfallThai( ProvinceName: '', EngName: '', toID: '', MonThai: obj['MonThai'], MinRain: '', MaxRain: '', AvgRain: obj['AvgRain'], region: '', Year: '', Month: '', Date: ''); }).toList(); setState(() { usersA = transformedA; }); print('LINE CHART completed'); } }
RainfallThai()
class RainfallThai { final String toID; final String ProvinceName; final String EngName; final String MinRain; final String MaxRain; final String AvgRain; final String region; final String Year; final String Month; final String Date; final String MonThai; RainfallThai({ required this.toID, required this.ProvinceName, required this.EngName, required this.MinRain, required this.MaxRain, required this.AvgRain, required this.region, required this.Year, required this.Month, required this.Date, required this.MonThai, }); }
3. my API data (in JSON form) ---> not all data because it's too big
-------> that is my api JSON pics ;)
4.that's my line chart that all in api data
--------> that's my graph that show all of API detail graph
x: Month ---> Jan, Feb, March,...
y: The average rainfall
I want to show this but only in my conditions that
Province is กรุงเทพ
Only in 2018