Creating line charts in Flutter by fetching data from GraphQL

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
In this article I will try to explain how to create bar and line charts in flutter using data queried from GraphQL API. I have used fl_charts as the chart library to display charts in flutter.

Create your Flutter project and import the following dependencies in your pubspec.yaml file in order to use GraphQL and fl_charts.

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^3.0.0
  fl_chart: ^0.20.1

Create a login screen and implement the authorization logic to validate the user and store the API token. There are several ways to reuse the token throughout the application , but in this example I will extract the token sent by the login screen. The below code demonstrates the Graphql configuration, link to the API, the ValueNotifier which notifies the listener when value changes, and clientToQuery() which allows to make queries to the graphql API.

Next step is to fetch data against the graphql query and store it so that fl_chart components can read the data and paint the charts accordingly.

The below code snippet shows how to write the graphql query for flutter to understand. Make a note to provide the exact variable type in this query as defined in your graphql. Here $fromDate and $toDate are variables provided on run time .

final String _query = """
query getData(\$id: UUID!,\$fromDate: Date!,\$toDate: Date!{
getData(id:\$id){
fetchData(fromDate: \$fromDate, toDate: \$toDate) {
data    
}
}
}""";

The next step is to pass the dynamic variable in the graphql query and this is how we can do this.

@override
Widget build(BuildContext context) {
return Container(
child: Query(
options: QueryOptions(
documentNode: gql(_query),
variables: {
'id': id,
'fromDate': startDate,
'toDate': endDate,
},
),
builder: (QueryResult result,
{VoidCallback refetch, FetchMore fetchMore}) {
if (result.exception != null) {
return Text(result.exception.toString());
}
if (result.loading) {
return Center(
child: img = Image.network(
"https://media.giphy.com/media/gbHbb8XTNvWff0CnCI/giphy.gif",
width: 100,
height: 100,
));
}

The data now need to be stored in FISpot container in order to be rendered as chart plots and then the spots needs to be assigned with the FISpot within LineChartBarData created for different plot sets. There are different available properties which can be used like isCurved , barWidth and colors to design your chart.

LineChart(
LineChartData(
backgroundColor: Colors.white,
borderData: FlBorderData(show: false),
gridData: FlGridData(
show: false,
drawHorizontalLine: true,
),
lineBarsData: [
LineChartBarData(
isStrokeCapRound: true,
spots: newData,
isCurved: false,
barWidth: 2,
colors: [
Colors.green,
],
dotData: FlDotData(
show: true,
getDotPainter:
(spot, percent, barData, index) {
return FlDotCirclePainter(
radius:5
color: Colors.green.withOpacity(1));
}),
),
LineChartBarData(
isStrokeCapRound: true,
spots: oldData,
isCurved: false,
barWidth: 2,
colors: [
Color.fromRGBO(254, 174, 54, 1),
],
dotData: FlDotData(
show: true,
getDotPainter:
(spot, percent, barData, index) {
return FlDotCirclePainter(
radius:5
color:
Color.fromRGBO(254, 174, 54, 1));
}),
),
],

We can also paint the grid between two plots , in this code I have created a list which stores relevant colors based on a condition.

betweenBarsData: [
BetweenBarsData(
fromIndex: 0,
toIndex: 1,
colors: [for (Color bd in colorBd) bd])
],

Here is a sample code to demonstrate the line chart in flutter. Enjoy coding !!