Flutter — Charts and Graphs demystified
Statistics plays a major role in our day to day life as it helps us to understand data which is very necessary for humans to survive. Visualisation of the stats is very important as it helps us understand the data in an easy manner. Visualisation is a process of plotting and drawing various kinds of curves/charts/graphs/plots for the given data to make it understandable.
Charts and Graphs are one of the major components of many applications in real world. Many real world apps like Medium, StackOverflow, GitHub, etc uses Graphs and Charts in large number of use cases. Looking at raw data can be really frustrating and complicated. So, use of pictures, graphs and charts in applications can give very good insights of the data we are operating.
A picture is worth a thousand words.
Well said by Henrik Ibsen because it’s human nature that we get attracted towards pictures and diagrams instead of raw text. If you see data in rows and columns then you might not get the relationship, dependencies and trends of the data easily, which can be easily determined if we see the graphs and charts plotted on that data.
Flutter being a very good UI framework of modern era gives a large number of options to work with charts and graphs elegantly. One can create some very great user experiences with Graphs and Charts using Flutter with native performance. To work with charts and graphs in Flutter, we have several options, but in this article we will be focusing on few of those.
Flutter framework (more precisely pub.dev) contains a package named charts_flutter which gives a very vast and elegant toolkit for working with charts and graphs in Flutter. This package gives us a lot of options for drawing different types of plots and charts. We will be building a demo application which will help us understand the working of charts and graphs in Flutter apps.
First of all, we will add the charts_flutter dependency in our pubspec.yaml file.
Now, after the dependency setup done, we will be preparing our different types of charts & graphs.
1. Building Bar-chart
Step 1: Preparing data — Before plotting the bar-chart, we will first prepare the data. For that, we are going to define a class PopulationData as we are plotting the population data of U.S. in the last few years.
Now, after defining the class, we will be defining some dummy data inside a list which we are going to plot in the bar-chart
Step 2: Defining the UI — After preparing the data to plot, we will be working on the UI of plot.
In the above piece of code, we are using the BarChart() widget to plot the bar-chart which gives us a lot of options to edit the graph. In our example, we have rotated the x-labels as they are overlapping each other. Other options and modifications can also be done in the chart using the properties of this widget. Also there’s a function _getSeriesData() which is defined below:
Here’s the output of the bar-chart plotted:
2. Building Line-chart
Step 1: Defining the data: Before plotting the line-chart, we will first prepare data to work on. For that, we will create a class SalesData as we are plotting the sales data of a company over the years.
For plotting the data, we need the list of data and we will be creating dummy data in a list.
Step 2: Defining the UI: For plotting the UI of chart, we will be using the LineChart() widget defined in charts_flutter package. The usage of this widget is:
Here’s the output of the plotted line-chart:
3. Building Pie-Chart
Step 1: Defining the data: Before plotting the pie-chart, we will be defining the data. For that, we will be defining a class named GradesData() as we are plotting data of grades of students of a school.
Now, we need series of data to plot. For that, we will be creating some dummy data.
Step 2: Defining the UI: For plotting the pie-chart, we will be using the PieChart() widget defined in the charts_flutter package. The usage of this widget is:
Here in this widget, we have configured the style of the pie-chart by adding some properties like arc width and decorators. Here’s the output of the UI of plotted pie-chart:
These were some of the example charts and graphs. Many more can be plotted using the charts_flutter package and there are other packages as well for charts and graphs in Flutter.
UI of the home screen:
Final Words
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. Find the full code — https://github.com/ritesh-sharma33/Flutter-Charts.
Thank you reading. Keep Fluttering:)
