Load Data from Multiple Sources into a Flutter Chart [Webinar Show Notes]
Tags: flutter, webdev, mobile, dart
Published: 2021-06-02 10:40:18

---
title: Load Data from Multiple Sources into a Flutter Chart [Webinar Show Notes]
published: true
date: 2021-05-27 10:00:04 UTC
tags: flutter, webdev, mobile, dart
canonical_url: https://www.syncfusion.com/blogs/post/load-data-from-multiple-sources-into-a-flutter-chart.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Load-Data-from-Multiple-Sources-into-a-Flutter-Chart-672x372.png
---

This blog provides show notes for our May 20 webinar, “Load Data from Multiple Sources into a Flutter Chart.” The webinar was presented by Syncfusion Product Manager Jayavigneshwaran G. If you missed it, or would like to watch it again, please see our [YouTube page](https://www.youtube.com/watch?app=desktop&v=1kR-w3yHYnw&feature=youtu.be "Link to Load Data from Multiple Sources into a Flutter Chart [Webinar] video on YouTube") or watch it here:

## Overview

During this webinar, we walked through the step-by-step process for binding data to the Flutter Charts widget from various data sources (JSON, lists, and Firebase).

## Agenda

- Exploring Syncfusion Flutter Charts’s key features.
- How to build an app from scratch with the Charts widget.
- What are the different sources for loading data to a chart?
- Step-by-step procedure to bind data from multiple sources to a chart.

## Syncfusion Flutter Charts

Syncfusion [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts "Link to Flutter Charts widget") is a data visualization library written natively in Dart for creating beautiful, animated, and high-performance charts, which are used to craft high-quality Flutter app user interfaces.

## Key features

- 30+ chart types, ranging from the popular line, bar, area, and pie charts to financial charts like candle and OHLC.
- Support for 5 axis types: numeric, category, date-time, date-time category, and logarithmic.
- Various user interactive features like zooming and panning, tooltip, trackball, and selection.
- Rich feature set.
- Fluid animation.
- Complete customizability.
- Real-time updates to create real-time charts.
- High performance: able to render a huge amount of data in a few seconds.

## How to build an app from scratch with the chart

1. Create a new Flutter project.
2. Add **_syncfusion\_flutter\_charts_**  as a dependency in the **_pubspec.yaml_** file.
3. Import the Charts library in the **_main.dart_** file.
4. Remove the code of the default project and add the SfCartesianChart widget in the widget tree.
5. Run the application.

## What are the different source types for loading data to a Flutter chart?

- List (user-defined class type)
  - This is the most common and simple data-binding method.
- List (predefined types)
  - The list type can be int, double, string, date-time, etc.
- JSON
  - JSON is a commonly used data format. Most large data sets, like historical data, financial data, and day-to-day stock price details, will be maintained as JSON data.
- Firebase database
  - Google’s Firebase database is a cloud-hosted database in which the data is stored in JSON format.

## Binding a user-defined list to a chart

1. Create a class and add required fields.
2. Create a list of that class type and add data to it.
3. Assign it to the **_dataSource_** property in the chart.

## Binding a predefined list to a chart

1. Create a class and add required fields.
2. Create a list of that class type and add data to it by iterating the arrays.
3. Assign it to the **_dataSource_** property in the chart.

## Binding JSON data to a chart

1. Place the JSON file in the assets folder and reference it in the **_pubspec.yaml_** file.
2. Create a class and add required fields. Define a factory ctor for parsing JSON.
3. Load the raw JSON string and convert it to a list by decoding it.
4. Create a list and add data to it by iterating it. Assign it to the **_dataSource_** property in the chart.

## Binding data from Firebase to a chart

1. Get and parse the JSON data from the Firebase URL.
2. Create a class and add required fields. Define a factory ctor for parsing JSON.
3. Load the fetched raw JSON string and convert it to a list by decoding it.
4. Create a list and add data to it by iterating it. Assign it to the **_dataSource_** property in the chart.

## Knowledge-base articles

- [List (user-defined class type)](https://www.syncfusion.com/kb/12592 "Link to the article How to bind data from the list to the Flutter Cartesian chart?")
- [List (predefined types)](https://www.syncfusion.com/kb/12591 "Link to the article How to bind data from the array to the Flutter Cartesian chart?")
- [JSON](https://www.syncfusion.com/kb/11674 "Link to the article How to render a Flutter chart using the JSON data?")
- [Firebase](https://www.syncfusion.com/kb/11883 "Link to the article How to render the Flutter chart using JSON data stored in Firebase database?")
- [SQLite](https://www.syncfusion.com/kb/12590 "Link to the article How to bind data from SQLite to the Flutter Cartesian chart?")

## Conclusion

During this webinar, we looked at binding data to the [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts "Link to Flutter Charts") widget from various data sources.

We hope you enjoyed this webinar and please keep an eye out for our future Flutter webinars. If you have a topic you’d like to see covered in a webinar, please let us know in the comment section below.

## Recommended resources (related links)

- [Getting started with Flutter documentation](https://help.syncfusion.com/flutter/ "Link to Syncfusion Flutter Widgets - API reference documentation").
- Packages available in [dev](https://pub.dev/packages/ "Link to pub.dev page").
  - Search “Syncfusion” and you will see all the packages.
- [Syncfusion Flutter webpage](https://www.syncfusion.com/flutter-widgets "Link to Flutter UI Widgets").
- [_Flutter Succinctly_](https://www.syncfusion.com/succinctly-free-ebooks/flutter-succinctly "Link to the eBook Flutter Succinctly") e-book by Ed Freitas.

## Related blogs

- [What’s New in 2020 Volume 4: Flutter Charts](https://dev.to/sureshmohan/what-s-new-in-2020-volume-4-flutter-charts-3i72-temp-slug-6867185 "Link to What’s New in 2020 Volume 4: Flutter Charts blog")
- [12 Tips to Make Your Charts More Aesthetically Pleasing](https://dev.to/syncfusion/12-tips-to-make-your-charts-more-aesthetic-3g0c "Link to 12 Tips to Make Your Charts More Aesthetically Pleasing blog")
- [7 Best Flutter Charts for Visualizing Income and Expenditure](https://dev.to/syncfusion/7-best-flutter-charts-for-visualizing-income-and-expenditure-2ld7 "Link to 7 Best Flutter Charts for Visualizing Income and Expenditure blog")
- [Spice Up Your Flutter App with Interactive Features in Syncfusion Charts](https://dev.to/syncfusion/spice-up-your-flutter-app-with-interactive-features-in-syncfusion-charts-1jh7 "Link to Spice Up Your Flutter App with Interactive Features in Syncfusion Charts blog")