🚀 FLUTTER - Grafik Chart Kullanımı syncfusion flutter charts library

Ramazan HABER / FLUTTER / Grafik Chart Kullanımı syncfusion flutter charts library

1-) FLUTTER - Grafik Chart Kullanımı syncfusion flutter charts library

kaynak : https://pub.dev/packages/syncfusion_flutter_charts

flutter pub add syncfusion_flutter_charts

BUNA SONRA BAKARSIN

kaynak : https://pub.dev/packages/fl_chart

https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#sample-2-source-code

github link yeni (03.04.2023) : https://github.com/ramazanhaber/grafikfluter2chart

1-) EKRAN GÖRÜNTÜSÜ

2-)KULLANIMI

// aşağısı grafik

  late TooltipBehavior _tooltipBehavior;

  @override
  void initState(){
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }

  Widget grafikContent() {
    return Center(
        child: Container(
            child: SfCartesianChart(

                primaryXAxis: CategoryAxis(),
                // Chart title
                title: ChartTitle(text: 'Half yearly sales analysis'),
                // Enable legend
                legend: Legend(isVisible: true),
                // Enable tooltip
                tooltipBehavior: _tooltipBehavior,

                series: <LineSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                      dataSource: <SalesData>[
                        SalesData('Jan', 35),
                        SalesData('Feb', 28),
                        SalesData('Mar', 34),
                        SalesData('Apr', 32),
                        SalesData('May', 40)
                      ],
                      xValueMapper: (SalesData sales, _) => sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales,
                      // Enable data label
                      dataLabelSettings: DataLabelSettings(isVisible: true)
                  )
                ]
            )
        )
    );
  }

}

class SalesData {
  SalesData(this.year, this.sales);
  final String year;
  final double sales;
}

3-) KENDİM İÇİN NOTLAR BAKMASANDA OLUR en iyi

late TooltipBehavior
    _tooltipBehavior; // mouse tıklanınca gerçek değeri söyleyen tooltip
late CrosshairBehavior crosshair; // mouseyi basılı tutunca çıkan x y popup

late TrackballBehavior _trackballBehavior;

@override
void initState() {
  crosshair = CrosshairBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      hideDelay: 2000,
      shouldAlwaysShow: false,
      lineType: CrosshairLineType.both,
      lineWidth: 1);
  _tooltipBehavior = TooltipBehavior(enable: true,format: 'point.x\npoint.y');

  _trackballBehavior = TrackballBehavior(
      enable: true,
      tooltipAlignment: ChartAlignment.near,
      activationMode: ActivationMode.singleTap, // tek dokunuşta göstermesi için
      tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
      tooltipSettings: InteractiveTooltip(
          // Formatting trackball tooltip text
          format: 'point.y' // point.x\n
          ));

  super.initState();
  getTumbanka();
}

Widget grafikContent() {
  return Center(
    child: Container(
        child: SfCartesianChart(
            primaryXAxis: CategoryAxis(labelRotation: 90),
            trackballBehavior: _trackballBehavior,
            // tooltipBehavior: _tooltipBehavior, // sonra açabilirsin

          title: ChartTitle(
                text: seciliKur,
                textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            series: <LineSeries<GrafikResModel, String>>[
          LineSeries<GrafikResModel, String>(
              dataSource: grafikResModels,
              enableTooltip: true,
              name: "Satış",
              xValueMapper: (GrafikResModel sales, _) => getSaat(sales),
              yValueMapper: (GrafikResModel sales, _) => sales.satis),
        ])),
  );
}

List<GrafikResModel> grafikResModels = [];

class GrafikResModel {
  double? alis;
  double? satis;
  String? kayitTarihi;

  GrafikResModel({this.alis, this.satis, this.kayitTarihi});

  GrafikResModel.fromJson(Map<String, dynamic> json) {
    alis = json['alis'];
    satis = json['satis'];
    kayitTarihi = json['kayit_tarihi'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['alis'] = this.alis;
    data['satis'] = this.satis;
    data['kayit_tarihi'] = this.kayitTarihi;
    return data;
  }
}

3-) KENDİM İÇİN NOTLAR BAKMASANDA OLUR diger iyi

late CrosshairBehavior crosshair; // mouse basılı tutulunca çıkan x y kordinatı
late TooltipBehavior _tooltipBehavior; // mouse tıklanınca çıkan popup

@override
void initState() {
  crosshair = CrosshairBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      hideDelay: 2000,
      shouldAlwaysShow: false,
      lineType: CrosshairLineType.both,
      lineWidth: 1
  );

_tooltipBehavior = TooltipBehavior(enable: true);

  super.initState();
  getTumbanka();
}

Widget grafikContent() {
  return Center(
    child: Container(
      child: SfCartesianChart(

        primaryXAxis: CategoryAxis(),
          crosshairBehavior: crosshair,

tooltipBehavior: _tooltipBehavior,

      series: <LineSeries<GrafikResModel, String>>[
          LineSeries<GrafikResModel, String>(
              dataSource: grafikResModels,
              enableTooltip: true,
              xValueMapper: (GrafikResModel sales, _) => getSaat(sales),
              yValueMapper: (GrafikResModel sales, _) => sales.satis,
              dataLabelSettings: DataLabelSettings(isVisible: false),
              name: "Satış"),
        ],
      )
    ));
}

List<GrafikResModel> grafikResModels = [];

4-) KENDİM İÇİN NOTLAR BAKMASANDA OLUR

Widget grafikContent() {
  return Center(
      child: Container(
          child: SfCartesianChart(
              primaryXAxis: CategoryAxis(),
              // Chart title
              title: ChartTitle(text: kod),
              // Enable legend
              // legend: Legend(isVisible: true),
              // Enable tooltip
              tooltipBehavior: _tooltipBehavior,
              series: <LineSeries<GrafikResModel, String>>[
        LineSeries<GrafikResModel, String>(
            dataSource: grafikResModels,
            enableTooltip: true,
            xValueMapper: (GrafikResModel sales, _) => getSaat(sales),
            yValueMapper: (GrafikResModel sales, _) => sales.satis,
            // Enable data label
            dataLabelSettings: DataLabelSettings(isVisible: false))
      ])));
}

5-) EĞİTİM İÇİN EN İYİ VE EN YENİ(03.04.2023)

1.ADIM GRAFMODEL.DART

class GrafModel {
  double? alis;
  double? satis;
  String? kayitTarihi;

  GrafModel({this.alis, this.satis, this.kayitTarihi});

  GrafModel.fromJson(Map<String, dynamic> json) {
    try{
      alis = json['alis'] ;
      satis = json['satis'] ;
      kayitTarihi = json['kayit_tarihi'];
    }catch(ex){

    }

  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['alis'] = this.alis;
    data['satis'] = this.satis;
    data['kayit_tarihi'] = this.kayitTarihi;
    return data;
  }
}

2.ADIM GrafApi.dart

import 'dart:convert';

import 'package:grafikchartflutter/GrafModel.dart';
import 'package:http/http.dart' as http;

class GrafApi {

  Future<List<GrafModel>> getTumBanka() async {
    var headers = <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    };

    var _uri = Uri.parse("http://93.113.96.228:9095/api/Genel/grafikGetir?userName=egitim&password=egitim&gha=2&kod=GRAM ALTIN");
    return await http.post(_uri,headers: headers).then(
          (http.Response response) {
        int statusCode = response.statusCode;
        String jsontext = response.body.toString();
        if (statusCode < 200 || statusCode >= 400 || jsontext == null) {
          return <GrafModel>[];
        }
        List<GrafModel> modelim = (jsonDecode(response.body) as List)
            .map((data) => GrafModel.fromJson(data))
            .toList();
        return modelim ;
      },
    );
  }

  Future<List<GrafModel>> getTumBankaLocal() async {
    List<GrafModel> modelim = (jsonDecode(jsonData) as List)
        .map((data) => GrafModel.fromJson(data))
        .toList();
    return modelim ;
  }

  static String jsonData="[{\"alis\":1225.58,\"satis\":1241.38,\"kayit_tarihi\":\"2023-03-27T00:59:01\"},{\"alis\":1225,\"satis\":1238.76,\"kayit_tarihi\":\"2023-03-27T01:59:01\"},{\"alis\":1226.31,\"satis\":1239.97,\"kayit_tarihi\":\"2023-03-27T02:59:01\"},{\"alis\":1223.08,\"satis\":1238.55,\"kayit_tarihi\":\"2023-03-27T03:59:01\"},{\"alis\":1223.47,\"satis\":1238.92,\"kayit_tarihi\":\"2023-03-27T04:59:01\"},{\"alis\":1224.81,\"satis\":1240.32,\"kayit_tarihi\":\"2023-03-27T05:59:01\"},{\"alis\":1220.34,\"satis\":1238.54,\"kayit_tarihi\":\"2023-03-27T06:59:01\"},{\"alis\":1224.65,\"satis\":1239.03,\"kayit_tarihi\":\"2023-03-27T07:59:01\"},{\"alis\":1219.65,\"satis\":1236.87,\"kayit_tarihi\":\"2023-03-27T08:59:02\"},{\"alis\":1222.32,\"satis\":1237.5,\"kayit_tarihi\":\"2023-03-27T09:59:01\"},{\"alis\":1224.12,\"satis\":1237.93,\"kayit_tarihi\":\"2023-03-27T10:59:01\"},{\"alis\":1221.15,\"satis\":1233.95,\"kayit_tarihi\":\"2023-03-27T11:59:01\"},{\"alis\":1216.8,\"satis\":1229.35,\"kayit_tarihi\":\"2023-03-27T12:59:01\"},{\"alis\":1213.9,\"satis\":1226.56,\"kayit_tarihi\":\"2023-03-27T13:59:01\"},{\"alis\":1216.88,\"satis\":1229.91,\"kayit_tarihi\":\"2023-03-27T14:59:01\"},{\"alis\":1212.07,\"satis\":1225.4,\"kayit_tarihi\":\"2023-03-27T15:59:01\"},{\"alis\":1213.56,\"satis\":1228.09,\"kayit_tarihi\":\"2023-03-27T16:59:01\"},{\"alis\":1215.73,\"satis\":1231.5,\"kayit_tarihi\":\"2023-03-27T17:59:01\"},{\"alis\":1217.82,\"satis\":1233.62,\"kayit_tarihi\":\"2023-03-27T18:59:01\"},{\"alis\":1216.54,\"satis\":1232.38,\"kayit_tarihi\":\"2023-03-27T19:59:01\"},{\"alis\":1214.99,\"satis\":1230.8,\"kayit_tarihi\":\"2023-03-27T20:59:01\"},{\"alis\":1217.08,\"satis\":1232.96,\"kayit_tarihi\":\"2023-03-27T21:59:01\"},{\"alis\":1218.1,\"satis\":1234.1,\"kayit_tarihi\":\"2023-03-27T22:59:01\"},{\"alis\":1217.35,\"satis\":1233.84,\"kayit_tarihi\":\"2023-03-27T23:59:01\"},{\"alis\":1217.34,\"satis\":1233.64,\"kayit_tarihi\":\"2023-03-28T00:59:01\"},{\"alis\":1218.18,\"satis\":1234.54,\"kayit_tarihi\":\"2023-03-28T01:59:01\"},{\"alis\":1218.86,\"satis\":1234.9,\"kayit_tarihi\":\"2023-03-28T02:59:01\"},{\"alis\":1219.48,\"satis\":1236.23,\"kayit_tarihi\":\"2023-03-28T03:59:01\"},{\"alis\":1221.34,\"satis\":1237.75,\"kayit_tarihi\":\"2023-03-28T04:59:01\"},{\"alis\":1220,\"satis\":1236.37,\"kayit_tarihi\":\"2023-03-28T05:59:01\"},{\"alis\":1219.7,\"satis\":1236.19,\"kayit_tarihi\":\"2023-03-28T06:59:01\"},{\"alis\":1218.49,\"satis\":1234.52,\"kayit_tarihi\":\"2023-03-28T07:59:02\"},{\"alis\":1219.86,\"satis\":1236.05,\"kayit_tarihi\":\"2023-03-28T08:59:01\"},{\"alis\":1217.48,\"satis\":1233.31,\"kayit_tarihi\":\"2023-03-28T09:59:01\"},{\"alis\":1217.56,\"satis\":1233.14,\"kayit_tarihi\":\"2023-03-28T10:59:01\"},{\"alis\":1216.01,\"satis\":1230.2,\"kayit_tarihi\":\"2023-03-28T11:59:01\"},{\"alis\":1217.93,\"satis\":1231.95,\"kayit_tarihi\":\"2023-03-28T12:59:01\"},{\"alis\":1219.58,\"satis\":1232.79,\"kayit_tarihi\":\"2023-03-28T13:59:02\"},{\"alis\":1220.44,\"satis\":1233.58,\"kayit_tarihi\":\"2023-03-28T14:59:01\"},{\"alis\":1224.66,\"satis\":1237.76,\"kayit_tarihi\":\"2023-03-28T15:59:01\"},{\"alis\":1222.69,\"satis\":1237.77,\"kayit_tarihi\":\"2023-03-28T16:59:01\"},{\"alis\":1226.34,\"satis\":1241.56,\"kayit_tarihi\":\"2023-03-28T17:59:01\"},{\"alis\":1225.25,\"satis\":1240.49,\"kayit_tarihi\":\"2023-03-28T18:59:01\"},{\"alis\":1226.37,\"satis\":1241.69,\"kayit_tarihi\":\"2023-03-28T19:59:01\"},{\"alis\":1230.09,\"satis\":1245.54,\"kayit_tarihi\":\"2023-03-28T20:59:01\"},{\"alis\":1229.28,\"satis\":1244.84,\"kayit_tarihi\":\"2023-03-28T21:59:02\"},{\"alis\":1230.11,\"satis\":1247.8,\"kayit_tarihi\":\"2023-03-28T22:59:01\"},{\"alis\":1229.84,\"satis\":1247.28,\"kayit_tarihi\":\"2023-03-28T23:59:01\"},{\"alis\":1229.82,\"satis\":1246.71,\"kayit_tarihi\":\"2023-03-29T00:59:01\"},{\"alis\":1229.36,\"satis\":1245.28,\"kayit_tarihi\":\"2023-03-29T01:59:02\"},{\"alis\":1228.76,\"satis\":1244.66,\"kayit_tarihi\":\"2023-03-29T02:59:01\"},{\"alis\":1227.95,\"satis\":1243.76,\"kayit_tarihi\":\"2023-03-29T03:59:01\"},{\"alis\":1227.01,\"satis\":1244.29,\"kayit_tarihi\":\"2023-03-29T04:59:01\"},{\"alis\":1226.55,\"satis\":1241.99,\"kayit_tarihi\":\"2023-03-29T05:59:01\"},{\"alis\":1225.32,\"satis\":1240.62,\"kayit_tarihi\":\"2023-03-29T06:59:01\"},{\"alis\":1225.06,\"satis\":1241.18,\"kayit_tarihi\":\"2023-03-29T07:59:01\"},{\"alis\":1223.32,\"satis\":1238.78,\"kayit_tarihi\":\"2023-03-29T08:59:01\"},{\"alis\":1222.37,\"satis\":1238.57,\"kayit_tarihi\":\"2023-03-29T09:59:02\"},{\"alis\":1221.45,\"satis\":1237.4,\"kayit_tarihi\":\"2023-03-29T10:59:01\"},{\"alis\":1224.05,\"satis\":1236.79,\"kayit_tarihi\":\"2023-03-29T11:59:01\"},{\"alis\":1226,\"satis\":1239.05,\"kayit_tarihi\":\"2023-03-29T12:59:01\"},{\"alis\":1225.39,\"satis\":1238.67,\"kayit_tarihi\":\"2023-03-29T13:59:01\"},{\"alis\":1224.77,\"satis\":1237.37,\"kayit_tarihi\":\"2023-03-29T14:59:01\"},{\"alis\":1223.19,\"satis\":1236.72,\"kayit_tarihi\":\"2023-03-29T15:59:02\"},{\"alis\":1224.41,\"satis\":1238.55,\"kayit_tarihi\":\"2023-03-29T16:59:01\"},{\"alis\":1224.78,\"satis\":1241.17,\"kayit_tarihi\":\"2023-03-29T17:59:01\"},{\"alis\":1220.3,\"satis\":1236.9,\"kayit_tarihi\":\"2023-03-29T18:59:01\"},{\"alis\":1222.04,\"satis\":1238.66,\"kayit_tarihi\":\"2023-03-29T19:59:01\"},{\"alis\":1224.08,\"satis\":1241.81,\"kayit_tarihi\":\"2023-03-29T20:59:01\"},{\"alis\":1223.15,\"satis\":1241.14,\"kayit_tarihi\":\"2023-03-29T21:59:01\"},{\"alis\":1221.08,\"satis\":1238.91,\"kayit_tarihi\":\"2023-03-29T22:59:01\"},{\"alis\":1220.91,\"satis\":1239.09,\"kayit_tarihi\":\"2023-03-29T23:59:01\"},{\"alis\":1222.79,\"satis\":1239.91,\"kayit_tarihi\":\"2023-03-30T00:59:01\"},{\"alis\":1222.76,\"satis\":1239.48,\"kayit_tarihi\":\"2023-03-30T01:59:01\"},{\"alis\":1221.68,\"satis\":1238.08,\"kayit_tarihi\":\"2023-03-30T02:59:01\"},{\"alis\":1220.71,\"satis\":1237.23,\"kayit_tarihi\":\"2023-03-30T03:59:01\"},{\"alis\":1218.79,\"satis\":1235.15,\"kayit_tarihi\":\"2023-03-30T04:59:02\"},{\"alis\":1218.59,\"satis\":1235.1,\"kayit_tarihi\":\"2023-03-30T05:59:01\"},{\"alis\":1219.65,\"satis\":1236.08,\"kayit_tarihi\":\"2023-03-30T06:59:01\"},{\"alis\":1220.09,\"satis\":1236.45,\"kayit_tarihi\":\"2023-03-30T07:59:01\"},{\"alis\":1222.4,\"satis\":1238.75,\"kayit_tarihi\":\"2023-03-30T08:59:01\"},{\"alis\":1224.17,\"satis\":1240.81,\"kayit_tarihi\":\"2023-03-30T09:59:01\"},{\"alis\":1223.03,\"satis\":1237.98,\"kayit_tarihi\":\"2023-03-30T10:59:01\"},{\"alis\":1223.24,\"satis\":1237.38,\"kayit_tarihi\":\"2023-03-30T11:59:01\"},{\"alis\":1223.89,\"satis\":1236.63,\"kayit_tarihi\":\"2023-03-30T12:59:01\"},{\"alis\":1224.57,\"satis\":1237.69,\"kayit_tarihi\":\"2023-03-30T13:59:01\"},{\"alis\":1224.58,\"satis\":1237.45,\"kayit_tarihi\":\"2023-03-30T14:59:01\"},{\"alis\":1225.07,\"satis\":1237.94,\"kayit_tarihi\":\"2023-03-30T15:59:02\"},{\"alis\":1223.01,\"satis\":1236.53,\"kayit_tarihi\":\"2023-03-30T16:59:01\"},{\"alis\":1224.33,\"satis\":1239.67,\"kayit_tarihi\":\"2023-03-30T17:59:01\"},{\"alis\":1226.16,\"satis\":1241.65,\"kayit_tarihi\":\"2023-03-30T18:59:01\"},{\"alis\":1231.1,\"satis\":1246.66,\"kayit_tarihi\":\"2023-03-30T19:59:01\"},{\"alis\":1229.55,\"satis\":1245.06,\"kayit_tarihi\":\"2023-03-30T20:59:01\"},{\"alis\":1230.39,\"satis\":1245.93,\"kayit_tarihi\":\"2023-03-30T21:59:01\"},{\"alis\":1229.9,\"satis\":1245.52,\"kayit_tarihi\":\"2023-03-30T22:59:01\"},{\"alis\":1229.57,\"satis\":1245.3,\"kayit_tarihi\":\"2023-03-30T23:59:01\"},{\"alis\":1230.5,\"satis\":1246.83,\"kayit_tarihi\":\"2023-03-31T00:59:01\"},{\"alis\":1230.06,\"satis\":1245.53,\"kayit_tarihi\":\"2023-03-31T01:59:02\"},{\"alis\":1229.34,\"satis\":1244.98,\"kayit_tarihi\":\"2023-03-31T02:59:01\"},{\"alis\":1230.47,\"satis\":1246.91,\"kayit_tarihi\":\"2023-03-31T03:59:01\"},{\"alis\":1231.34,\"satis\":1246.88,\"kayit_tarihi\":\"2023-03-31T04:59:01\"},{\"alis\":1231.06,\"satis\":1246.83,\"kayit_tarihi\":\"2023-03-31T05:59:01\"},{\"alis\":1230.87,\"satis\":1246.92,\"kayit_tarihi\":\"2023-03-31T06:59:01\"},{\"alis\":1231.98,\"satis\":1248.82,\"kayit_tarihi\":\"2023-03-31T07:59:01\"},{\"alis\":1229.3,\"satis\":1245.7,\"kayit_tarihi\":\"2023-03-31T08:59:01\"},{\"alis\":1233.32,\"satis\":1248.22,\"kayit_tarihi\":\"2023-03-31T09:59:02\"},{\"alis\":1228.26,\"satis\":1242.68,\"kayit_tarihi\":\"2023-03-31T10:59:01\"},{\"alis\":1227.79,\"satis\":1241.39,\"kayit_tarihi\":\"2023-03-31T11:59:01\"},{\"alis\":1231.41,\"satis\":1244.57,\"kayit_tarihi\":\"2023-03-31T12:59:01\"},{\"alis\":1231.26,\"satis\":1245.33,\"kayit_tarihi\":\"2023-03-31T13:59:01\"},{\"alis\":1232.91,\"satis\":1245.77,\"kayit_tarihi\":\"2023-03-31T14:59:01\"},{\"alis\":1234.41,\"satis\":1247.15,\"kayit_tarihi\":\"2023-03-31T15:59:01\"},{\"alis\":1233.2,\"satis\":1247.46,\"kayit_tarihi\":\"2023-03-31T16:59:01\"},{\"alis\":1231.83,\"satis\":1247.46,\"kayit_tarihi\":\"2023-03-31T17:59:01\"},{\"alis\":1232.62,\"satis\":1248.36,\"kayit_tarihi\":\"2023-03-31T18:59:01\"},{\"alis\":1231.05,\"satis\":1246.82,\"kayit_tarihi\":\"2023-03-31T19:59:01\"},{\"alis\":1224.6,\"satis\":1240.58,\"kayit_tarihi\":\"2023-03-31T20:59:01\"},{\"alis\":1227.64,\"satis\":1244.11,\"kayit_tarihi\":\"2023-03-31T21:59:01\"},{\"alis\":1227.32,\"satis\":1243.85,\"kayit_tarihi\":\"2023-03-31T22:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-03-31T23:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T00:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T01:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T02:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T03:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T04:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T05:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T06:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T07:59:01\"},{\"alis\":1226.37,\"satis\":1243.6,\"kayit_tarihi\":\"2023-04-01T08:59:01\"},{\"alis\":1226.65,\"satis\":1240.99,\"kayit_tarihi\":\"2023-04-01T09:59:01\"},{\"alis\":1226.96,\"satis\":1240.67,\"kayit_tarihi\":\"2023-04-01T10:59:01\"},{\"alis\":1227.28,\"satis\":1240.99,\"kayit_tarihi\":\"2023-04-01T11:59:01\"},{\"alis\":1230.34,\"satis\":1242.66,\"kayit_tarihi\":\"2023-04-01T12:59:02\"},{\"alis\":1230.15,\"satis\":1242.66,\"kayit_tarihi\":\"2023-04-01T13:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T14:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T15:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T16:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T17:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T18:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T19:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T20:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T21:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T22:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-01T23:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T00:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T01:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T02:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T03:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T04:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T05:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T06:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T07:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T08:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T09:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T10:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T11:59:02\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T12:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T13:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T14:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T15:59:02\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T16:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T17:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T18:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T19:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T20:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T21:59:01\"},{\"alis\":1229.96,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T22:59:01\"},{\"alis\":1227.74,\"satis\":1243.04,\"kayit_tarihi\":\"2023-04-02T23:59:01\"}]";
}

3.ADIM GRAFPAGE.dart

import 'package:flutter/material.dart';
import 'package:grafikchartflutter/GrafApi.dart';
import 'package:grafikchartflutter/GrafModel.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class GrafikPage extends StatefulWidget {
  const GrafikPage({Key? key}) : super(key: key);

  @override
  State<GrafikPage> createState() => _GrafikPageState();
}

class _GrafikPageState extends State<GrafikPage> {

  late TooltipBehavior
  _tooltipBehavior; // mouse tıklanınca gerçek değeri söyleyen tooltip
  late CrosshairBehavior crosshair; // mouseyi basılı tutunca çıkan x y popup

  late TrackballBehavior _trackballBehavior;

  List<GrafModel> altinDate=[];

  @override
  void initState(){
    super.initState();

    _trackballBehavior = TrackballBehavior(
        enable: true,
        tooltipAlignment: ChartAlignment.near,
        activationMode: ActivationMode.singleTap, // tek dokunuşta göstermesi için
        tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
        tooltipSettings: InteractiveTooltip(
          // Formatting trackball tooltip text
            format: 'point.y' // point.x\n
        ));

    crosshair = CrosshairBehavior(
        enable: true,
        activationMode: ActivationMode.singleTap,
        hideDelay: 2000,
        shouldAlwaysShow: false,
        lineType: CrosshairLineType.both,
        lineWidth: 1);

    GrafApi api = new GrafApi();
    api.getTumBankaLocal().then((value) {
      altinDate=value;
      setState(() {

      });
    });
    // api.getTumBanka().then((value) {
    //   altinDate=value;
    //   setState(() {
    //
    //   });
    // });

  }
  Widget grafikContent() {
    return Center(
      child: Container(
          child: SfCartesianChart(
              primaryXAxis: CategoryAxis(labelRotation: 90),
              trackballBehavior: _trackballBehavior,
              // tooltipBehavior: _tooltipBehavior, // sonra açabilirsin
              title: ChartTitle(
                  text: "GRAM ALTIN",
                  textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
              series: <LineSeries<GrafModel , String>>[
                LineSeries<GrafModel , String>(
                    dataSource: altinDate,
                    enableTooltip: true,
                    name: "Satış",
                    xValueMapper: (GrafModel sales, _) => sales.kayitTarihi,
                    yValueMapper: (GrafModel sales, _) => sales.satis),
              ])),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Grafik Basic"),),
      body: grafikContent(),);
  }
}

class SalesData {
  SalesData(this.year, this.sales);
  final String year;
  final double sales;
}

2023 Nisan 03 Pazartesi
354