Diagram in Flutter

 

Statistics have essential part in people life, as graphs are visualizations of data, which help viewers understand data in easy manner. 

    Charts and Graphs are one of the major components of many modern applications and webpages, such as Medium, StackOverflow, GitHub, etc uses Graphs and Charts with using large numbers and calculation and ratios.

    Rows and columns of numbers are too complicated for viewers understanding. This fact is main reason of using Graphs and Charts.

| A picture is worth a thousand words.

Flutter contains couple of packages for creating and drawing diagram and charts. For example: SfCircularChart in syncfusion_flutter_charts, which provides the Radial Gauge is used to display data on a circular scale. Below, you can see visualization of different types of diagrams and other simulations.         

Let's start creating pie chart

As usually, adding dependency into pubspec.yaml file

dependencies:

    syncfusion_flutter_charts: ^xx.x.xx

To create just empty chart:

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    //Initialize chart
                    child: SfCircularChart()
                )
            )
        );
    }

Creating of pie chart

    Based on your data, initialize the series type. In the series, you need to map the data source and the fields for x and y data points. Here, pie series is rendered that is demonstrated in the following code snippet. 

    And for improving readability of content, we can add data labels to see percentage of each slices in pie chart.

    And enabling the legends provides information about the series rendered in the chart.

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCircularChart(
                        // Enables the legend
                        legend: Legend(isVisible: true), 
                        series: <ChartSeries>[
                            // Initialize line series
                            PieSeries<SalesData, String>(
                                dataSource: [
                                    // Bind data source
                                    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,
                                name: 'Sales'
                            )
                        ]
                    )
                )      
            )
        );
    }
    class ChartData {
      ChartData(this.x, this.y, [this.color]);
        final String x;
        final double y;
        final Color color;
    }

You can find the complete getting started example from this link.

Conclusion:

    

    Charts and graphs can be very helpful in understanding the data and it can be used to make the user of you app understand the data very well. Many big applications are widely using charts and graphs in order to give their customers good insights of the data. 

❤ ❤ Thanks for reading this article ❤❤