MOBILE APPLICATION (FLUTTER)
MODULE 3
CREATE A CHART SHOWING
THE DATA
01
CREATE CHART AND DISPLAY DATA
INTRODUCTION
INTRODUCTION
In this module, we will create a graph page to display data interactively and
retrieve data through the API gateway.
You’ll learn how to use chart libraries in Flutter to represent data through chart
graphics, as well as retrieve data stored through API gateways to graphics.
This feature enhances the app’s ability to present data insights clearly and
attractively, as well as display the data through an API gateway.
02
CREATE CHART AND DISPLAY DATA
ADD DEPENDENCIES
ADD DEPENDENCIES
We will continue this module in the
project created in modules 1 and 2.
First, open the [Link] file and add
the Syncfusion and intl libraries as shown
in the image.
Then, type “flutter pub get” in the
terminal.
03
CREATE CHART AND DISPLAY DATA
ADD NAVIGATION
ADD NAVIGATION
Open the “[Link]” file and go to the
button details section.
Add a navigator in the text details section as
shown in the image.
In this navigation, also send the waterMeterId
04
CREATE NEW
CREATE NEW DART
DART FILE
CREATE CHART AND DISPLAY DATA
FILE
Create a new Dart file in the
lib folder named
“chart_page.dart”
Write code as shown in this
image that functions to
create a button whose
content in this file can be
changed.
05
CREATE CHART AND DISPLAY DATA
CREATE SEVERAL
CREATE SEVERAL
FILES
FILES
Create several new files named day_chart.dart,
week_chart.dart, month_chart.dart,
custom_chart.dart.
Enter the code as shown in this image in each
newly created file.
Change a little bit of code to suit each file,
where day is replaced with week or month or
custom.
06
CREATE CHART AND DISPLAY DATA ADD CODE
ADD CODE TO
TO THE
THE DAY
DAY
CHART FILE
CHART FILE
1 3
Replace the code in the
day_chart.dart file as shown
2 in this image.
This code is used to pull
data from the API and then
group the data by time to
be displayed on the chart.
07
CREATE CHART AND DISPLAY DATA ADD CODE
ADD CODE TO
TO THE
THE DAY
DAY
1 2
CHART FILE
CHART FILE
In the widget build, add
code as shown in this
image.
This code is used to create a
chart based on time per
group.
add the class data at the
end of the code
08
CREATE CHART AND DISPLAY DATA
1 ADD CODE
ADD CODE TO
TO THE
THE DAY
DAY
CHART FILE
CHART FILE
2
In the widget creation
process, add code as shown
in Figure 1, which functions to
create text and a select date
button.
The code in Figure 2 is used to
select the date.
09
CREATE CHART AND DISPLAY DATA
Day Chart Pick Date 12
CREATE CHART AND DISPLAY DATA ADD CODE
ADD CODE TO
TO THE
THE WEEK
WEEK
1 2
CHART FILE
CHART FILE
3
Replace the code in the
week_chart.dart file as
shown in this image.
This code is used to retrieve
data from the API, create
charts, and add the data to
the chart.
add the class data at the
end of the code
10
CREATE CHART AND DISPLAY DATA ADD CODE
ADD CODE TO
TO THE
THE WEEK
WEEK
1 2
CHART FILE
CHART FILE
Add again the code in the
week_chart.dart file as
shown in this image.
This code is used to select
range date and build chart
10
CREATE CHART AND DISPLAY DATA
ADD CODE
ADD CODE TO
TO THE
THE WEEK
WEEK
CHART FILE
CHART FILE
1
In the widget creation process, add code
as shown in Figure 1, which functions to
create text and a select week button.
11
CREATE CHART AND DISPLAY DATA
Week Chart Pick Range Date 12
CREATE CHART AND DISPLAY DATA RESULT
RESULT
Day Chart Pick Date Week Chart Pick Range Date 12
CREATE CHART AND DISPLAY DATA
CONCLUSION
The project to create diagrams with data and retrieve data via the
API gateway has been successfully implemented. Users can view
more interactive data with data visualization in charts and the data
displayed in the chart now shows real data from the API.
13
CREATE CHART AND DISPLAY DATA
THANK YOU
14