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:

  1. only in Province is กรุงเทพ

  2. 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

  1. 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');
      }
    }
    
    
  2. 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

    enter image description here -------> that is my api JSON pics ;)

    4.that's my line chart that all in api data

  3. enter image description here --------> 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

  1. Province is กรุงเทพ

  2. Only in 2018

0

There are 0 answers