--- title: "Load Data from Multiple Sources into a Flutter Chart [Webinar Show Notes]" published_at: "2021-05-27T10:00:04+00:00" modified_at: "2026-01-30T13:47:33+00:00" url: "https://www.syncfusion.com/blogs/post/load-data-from-multiple-sources-into-a-flutter-chart" excerpt: "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,..." taxonomy_category: - "Chart" - "Desktop" - "Flutter" - "Mobile" - "Web" - "Webinar" taxonomy_post_tag: - "Android" - "Charts" - "Flutter" - "Mobile" - "Web Development" --- # Load Data from Multiple Sources into a Flutter Chart [Webinar Show Notes] [Carter Harris](https://www.syncfusion.com/blogs/author/carterh) ![Load Data from Multiple Sources into a Flutter Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Load-Data-from-Multiple-Sources-into-a-Flutter-Chart.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) 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) 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) - [List (predefined types)](https://www.syncfusion.com/kb/12591) - [JSON](https://www.syncfusion.com/kb/11674) - [Firebase](https://www.syncfusion.com/kb/11883) - [SQLite](https://www.syncfusion.com/kb/12590) ## **Conclusion** During this webinar, we looked at binding data to the [Flutter Charts](https://www.syncfusion.com/flutter-widgets/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/) . - Packages available in [dev](https://pub.dev/packages/) . - Search “Syncfusion” and you will see all the packages. - [Syncfusion Flutter webpage](https://www.syncfusion.com/flutter-widgets) . - [Flutter Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/flutter-succinctly) e-book by Ed Freitas. ## Related blogs - [What’s New in 2020 Volume 4: Flutter Charts](https://www.syncfusion.com/blogs/post/whats-new-in-2020-volume-4-flutter-charts.aspx) - [12 Tips to Make Your Charts More Aesthetically Pleasing](https://www.syncfusion.com/blogs/post/12-tips-to-make-charts-more-aesthetic.aspx) - [7 Best Flutter Charts for Visualizing Income and Expenditure](https://www.syncfusion.com/blogs/post/7-best-flutter-charts-for-visualizing-income-and-expenditure.aspx) - [Spice Up Your Flutter App with Interactive Features in Syncfusion Charts](https://www.syncfusion.com/blogs/post/spice-up-your-flutter-app-with-interactive-features-in-syncfusion-charts.aspx)