fl_chart In Flutter

Charts are frequently used in business settings and can help viewers quickly grasp the information being conveyed — a valuable benefit, given the volume of information everyone must process each day, especially in today’s hyper-connected world. In Flutter we used fl_Chart in Flutter to show the relationship between multiple data sets as a graphical view.

Before we get started I urge you to go and check out our Flutter App Development Company.

What Is a Chart?

A chart combines text, symbols and/or graphics to show the relationship between multiple data sets. They are a popular method for sharing information in different settings. For instance, a bar chart could show how sales of a particular flavor of ice cream have changed over the past five years. The length of each bar would indicate sales for that year.

We’re going to use the LineGraph from the fl_chart package.

Line Graphs

Line graphs typically are used to show changes or trends in continuous data over a period of time, with a line connecting the dots that represent the different values. For instance, in a line chart showing a company’s stock price over the past week, a line would connect the dots that visualize the change in price each day.

Add these two packages to your pubspec.yaml file.

  fl_chart: ^0.63.0
  date_format: ^2.0.7

1 2	fl_chart: ^0.63.0 date_format: ^2.0.7

fl_chart to use the chart package and date_format to format the date.

Create a new file graph_view.dart.

class GraphView extends StatelessWidget {
  const GraphView({this.data, Key? key}) : super(key: key);
  final List<GraphModel>? data;

  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        lineBarsData: [
          LineChartBarData(
              spots: data!
                  .asMap()
                  .entries
                  .map((element) => FlSpot(
                        element.key.toDouble(),
                        element.value.value,
                      ))
                  .toList(),
              isCurved: false,
              preventCurveOverShooting: true,
              color: Colors.white70),
        ],
        borderData: FlBorderData(
            border: const Border(
                bottom: BorderSide(color: Colors.white70),
                left: BorderSide(color: Colors.white70))),
        gridData: const FlGridData(show: false),
        titlesData: FlTitlesData(
          rightTitles: const AxisTitles(
            sideTitles: SideTitles(showTitles: false),
          ),
          topTitles:
              const AxisTitles(sideTitles: SideTitles(showTitles: false)),
          bottomTitles: AxisTitles(
              sideTitles: SideTitles(
                  getTitlesWidget: (graphDate, value) {
                    final date = data![graphDate.toInt()].date;
                    return Transform.rotate(
                      angle: 5,
                      alignment: Alignment.bottomCenter,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 40, top: 34),
                        child: Text(
                          formatDate(date, [d, '-', M, '-', yyyy]).toString(),
                          style: const TextStyle(
                              fontSize: 9, fontWeight: FontWeight.w500),
                        ),
                      ),
                    );
                  },
                  showTitles: true,
                  reservedSize: 55)),
          leftTitles: AxisTitles(
              sideTitles: SideTitles(
                  getTitlesWidget: (data, value) {
                    return Text(
                      data.toString(),
                      style: const TextStyle(
                          fontSize: 9, fontWeight: FontWeight.w500),
                    );
                  },
                  showTitles: true,
                  reservedSize: 30)),
        ),
      ),
    );
  }
}

class GraphView extends StatelessWidget {

const GraphView({this.data, Key? key}) : super(key: key);

final List<GraphModel>? data;

@override

Widget build(BuildContext context) {

return LineChart(

LineChartData(

lineBarsData: [

LineChartBarData(

spots: data!

.asMap()

.entries

.map((element) => FlSpot(

element.key.toDouble(),

element.value.value,

))

.toList(),

isCurved: false,

preventCurveOverShooting: true,

color: Colors.white70),

borderData: FlBorderData(

border: const Border(

bottom: BorderSide(color: Colors.white70),

left: BorderSide(color: Colors.white70))),

gridData: const FlGridData(show: false),

titlesData: FlTitlesData(

rightTitles: const AxisTitles(

sideTitles: SideTitles(showTitles: false),

topTitles:

const AxisTitles(sideTitles: SideTitles(showTitles: false)),

bottomTitles: AxisTitles(

sideTitles: SideTitles(

getTitlesWidget: (graphDate, value) {

final date = data![graphDate.toInt()].date;

return Transform.rotate(

angle: 5,

alignment: Alignment.bottomCenter,

child: Padding(

padding: const EdgeInsets.only(left: 40, top: 34),

child: Text(

formatDate(date, [d, '-', M, '-', yyyy]).toString(),

style: const TextStyle(

fontSize: 9, fontWeight: FontWeight.w500),

);

showTitles: true,

reservedSize: 55)),

leftTitles: AxisTitles(

sideTitles: SideTitles(

getTitlesWidget: (data, value) {

return Text(

data.toString(),

style: const TextStyle(

fontSize: 9, fontWeight: FontWeight.w500),

);

showTitles: true,

reservedSize: 30)),

);

}

Add a new file for model data. graph_model.dart

class GraphModel {
  final DateTime date;
  final double value;

  GraphModel({
    required this.date,
    required this.value,
  });
}

class Data {
  String? dateAdd;
  String? amount;

  Data({this.dateAdd, this.amount});
}

class GraphModel {

final DateTime date;

final double value;

GraphModel({

required this.date,

required this.value,

});

}

class Data {

String? dateAdd;

String? amount;

Data({this.dateAdd, this.amount});

}

Create a new file to manage and add the dummy data in Graph View. graph_data_helper.dart

List<GraphModel> getGraphData(List<Data> <em>r</em>) {
  List<GraphModel>? returnObj = [];
  var today = DateTime.now();
  if (<em>r</em>.isNotEmpty) {
    try {
      for (int i = 0; i < <em>r</em>.length; i++) {
        var date = DateTime.<strong>parse</strong>(<em>r</em>[i].dateAdd.toString());
        returnObj.add(GraphModel(
            <em>date</em>: DateTime(date.year, date.month, date.day),
            <em>value</em>: double.<strong>parse</strong>(<em>r</em>[i].amount.toString())));

        if (i + 1 == <em>r</em>.length) {
          for (int j = DateTime.<strong>parse</strong>(<em>r</em>[i].dateAdd.toString()).day;
              j <= today.day;
              j++) {
            returnObj.add(
              GraphModel(
                  <em>date</em>: DateTime(
                      today.year, today.month, (j < 9) ? int.<strong>parse</strong>("0$j") : j),
                  <em>value</em>: 0),
            );
          }
        }
      }

      /*
      To add empty data in a graph
      to show dots in graph.
      */
      for (int j = 1; j <= lastDayOfMonth(today).day; j++) {
        returnObj.add(GraphModel(
            <em>date</em>: DateTime(
                today.year, today.month, (j < 9) ? int.<strong>parse</strong>("0$j") : j),
            <em>value</em>: 0.0));
      }

      // To arrange date in a sequence
      returnObj.sort((<em>a</em>, <em>b</em>) => <em>a</em>.date.compareTo(<em>b</em>.date));
    } catch (e) {
      //To Add empty data in a graph
      returnObj.add(GraphModel(
          <em>date</em>: DateTime(today.year, today.month, today.day), <em>value</em>: 0.0));
      for (int j = 1; j <= lastDayOfMonth(today).day; j++) {
        returnObj.add(GraphModel(
            <em>date</em>: DateTime(
                today.year, today.month, (j < 9) ? int.<strong>parse</strong>("0$j") : j),
            <em>value</em>: 0.0));
      }
    }
  } else {
    //To Add empty data in a graph
    returnObj.add(GraphModel(
        <em>date</em>: DateTime(today.year, today.month, today.day), <em>value</em>: 0));
    for (int j = 1; j <= lastDayOfMonth(today).day; j++) {
      returnObj.add(GraphModel(
          <em>date</em>:
              DateTime(today.year, today.month, (j < 9) ? int.<strong>parse</strong>("0$j") : j),
          <em>value</em>: 0));
    }
  }

  return returnObj;
}

List<GraphModel> getGraphData(List<Data> r) {

List<GraphModel>? returnObj = [];

var today = DateTime.now();

if (r.isNotEmpty) {

try {

for (int i = 0; i < r.length; i++) {

var date = DateTime.parse(r[i].dateAdd.toString());

returnObj.add(GraphModel(

date: DateTime(date.year, date.month, date.day),

value: double.parse(r[i].amount.toString())));

if (i + 1 == r.length) {

for (int j = DateTime.parse(r[i].dateAdd.toString()).day;

j <= today.day;

j++) {

returnObj.add(

GraphModel(

date: DateTime(

today.year, today.month, (j < 9) ? int.parse("0$j") : j),

value: 0),

);

}

To add empty data in a graph

to show dots in graph.

for (int j = 1; j <= lastDayOfMonth(today).day; j++) {

returnObj.add(GraphModel(

date: DateTime(

today.year, today.month, (j < 9) ? int.parse("0$j") : j),

value: 0.0));

}

// To arrange date in a sequence

returnObj.sort((a, b) => a.date.compareTo(b.date));

} catch (e) {

//To Add empty data in a graph

returnObj.add(GraphModel(

date: DateTime(today.year, today.month, today.day), value: 0.0));

for (int j = 1; j <= lastDayOfMonth(today).day; j++) {

returnObj.add(GraphModel(

date: DateTime(

today.year, today.month, (j < 9) ? int.parse("0$j") : j),

value: 0.0));

}

} else {

//To Add empty data in a graph

returnObj.add(GraphModel(

date: DateTime(today.year, today.month, today.day), value: 0));

for (int j = 1; j <= lastDayOfMonth(today).day; j++) {

returnObj.add(GraphModel(

date:

DateTime(today.year, today.month, (j < 9) ? int.parse("0$j") : j),

value: 0));

}

return returnObj;

}

<strong>To calculate the last day in a month function.</strong>

1	<strong>To calculate the last day in a month function.</strong>

DateTime lastDayOfMonth(DateTime month) {
  var beginningNextMonth = (month.month < 12)
      ? DateTime(month.year, month.month + 1, 1)
      : DateTime(month.year + 1, 1, 1);
  return beginningNextMonth.subtract(const Duration(days: 1));
}

DateTime lastDayOfMonth(DateTime month) {

var beginningNextMonth = (month.month < 12)

? DateTime(month.year, month.month + 1, 1)

: DateTime(month.year + 1, 1, 1);

return beginningNextMonth.subtract(const Duration(days: 1));

}

Let’s add dummy data.

List<Data> listOfGraphData = [
    Data(dateAdd: "2023-06-17", amount: "10.0"),
    Data(dateAdd: "2023-06-10", amount: "20.0"),
    Data(dateAdd: "2023-06-15", amount: "70.0"),
    Data(dateAdd: "2023-06-20", amount: "90.0"),
  ];

List<Data> listOfGraphData = [

Data(dateAdd: "2023-06-17", amount: "10.0"),

Data(dateAdd: "2023-06-10", amount: "20.0"),

Data(dateAdd: "2023-06-15", amount: "70.0"),

Data(dateAdd: "2023-06-20", amount: "90.0"),

];

Main.dart file code is here.

import 'package:flutter/material.dart';
import 'graph_data_helper.dart';
import 'graph_model.dart';
import 'graph_view.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
        scaffoldBackgroundColor: Colors.orange.shade100,
        useMaterial3: true,
      ),
      home:  MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key}) : super(key: key);

  List<Data> listOfGraphData = [
    Data(dateAdd: "2023-06-17", amount: "10.0"),
    Data(dateAdd: "2023-06-10", amount: "20.0"),
    Data(dateAdd: "2023-06-15", amount: "70.0"),
    Data(dateAdd: "2023-06-20", amount: "90.0"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('fl_graph LineChart'),
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.only(top: 20, left: 8, right: 8, bottom: 8),
          height: MediaQuery.of(context).size.height * 0.5,
          child: GraphView(data: getGraphData(listOfGraphData)),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'graph_data_helper.dart';

import 'graph_model.dart';

import 'graph_view.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),

scaffoldBackgroundColor: Colors.orange.shade100,

useMaterial3: true,

home: MyHomePage(),

);

}

class MyHomePage extends StatelessWidget {

MyHomePage({Key? key}) : super(key: key);

List<Data> listOfGraphData = [

Data(dateAdd: "2023-06-17", amount: "10.0"),

Data(dateAdd: "2023-06-10", amount: "20.0"),

Data(dateAdd: "2023-06-15", amount: "70.0"),

Data(dateAdd: "2023-06-20", amount: "90.0"),

];

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

backgroundColor: Theme.of(context).colorScheme.inversePrimary,

title: const Text('fl_graph LineChart'),

body: Center(

child: Container(

padding: const EdgeInsets.only(top: 20, left: 8, right: 8, bottom: 8),

height: MediaQuery.of(context).size.height * 0.5,

child: GraphView(data: getGraphData(listOfGraphData)),

);

}

That’s all for this Article 🎊 .

Conclusion

fl_chart in Flutter In this blog we’ve learned how to use the LineGraph in Flutter app.

Use can visit the fl_chart GitHub page for more examples.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Parveen Baghel 28 June 2023

. . .

Discuss on Helpdesk

fl_chart In Flutter

What Is a Chart?

Create a new file graph_view.dart.

Add a new file for model data. graph_model.dart

Create a new file to manage and add the dummy data in Graph View. graph_data_helper.dart

Conclusion

Leave a Comment Cancel Reply

Message Sent!