A Dart Package to Draw Line Graphs In Your Flutter App

Draw Graph

A dart package to draw line graphs in your flutter app.

Usage

• Getting graph widget:

  LineGraph Widget

  Properties

  • features: List

    A list of features to be shown in the graph. Detailed description of Feature class below. (required)

  • size: Size

    This will determine the size of your graph. Height will be size.height - 50 in case when description is showed. (required)

  • labelX: List<String>

    A list of X-Axis Labels. This will determine and number of cells to distribute your data in and the width of your cells.

  • labelY: List<String>

    A list of Y-Axis Labels. The labels will be distributed on Y-Axis and determine height on cells.

  • fontFamily: String

    The fontFamily to use for labels and description of features.

  • graphColor: Color

    The color of your axis and labels.

  • showDescription: bool

    Whether to show description at the end of graph.

  Constructor

  LineGraphPainter({
    @required List<feature> features, 
    @required Size size,
    List<String> labelX: [],
    List<String> labelY: [],
    String fontFamily: 'sans serif',
    Color graphColor: Colors.grey
    bool showDescription: false
  });
  
  

  Example

  LineGraph({
    features: features,
    size: Size(500, 400),
    labelX: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'],
    labelY: ['20%', '40%', '60%', '80%', '100%'],
    showDescription: true,
    graphColor: Colors.white30,
  })
  
  

• Creating a list of Features

  • import the Feature model import 'package:draw_graph/models/feature.dart';

  Feature Model

  Properties

  • data: List<double>

    The Y-Axis values to be plotted. Should be in the range [0-1]. The length of the list should be equal to X-Axis labels. (required)

  • title: String

    The title displayed in Feature Description below the graph

  • color: Color

    The color of graph for this feature

  Constructor

  Feature({
    @required List<double> data,
    String title: '',
    Color color: Colors.black,
  });
  
  

  Example

  List<Feature> features = [
    Feature(
      title: "Drink Water",
      color: Colors.blue,
      data: [0.2, 0.8, 1, 0.7, 0.6],
    ),
    Feature(
      title: "Exercise",
      color: Colors.pink,
      data: [1, 0.8, 6, 0.7, 0.3, 8],
    ),
  ];
  
  

Getting Started

See the example directory for a sample app using draw_graph.

Download Details:

Author: malihanan

Source Code: https://github.com/malihanan/draw_graph

#flutter #dart #mobile-apps