How to Bind JSON, Excel, and CSV Data to .NET MAUI SparkCharts?

In this article, you’ll learn how to bind data from JSON, Excel, and CSV sources to .NET MAUI Spark Chart controls in a .NET MAUI application. This enables you to visualize data from various formats with minimal code, leveraging the power of Syncfusion’s SparkLine, SparkArea, and SparkColumn charts.

Usage:

The SfSparkChart controls support data binding from any .NET collection. You can easily load and parse data from JSON, CSV, or Excel files, convert them into a collection of model objects, and bind them to the chart’s ItemsSource property.

Step 1: Prepare the Data Model

Define a simple data model to represent each data point:

public class DataPoint
{
   public string Month { get; set; }
   public double Value { get; set; }
} 

Step 2: Load Data from Different Sources

a) Load data from JSON

Use System.Text.Json to parse JSON data:

using System.Text.Json;

using var stream = await FileSystem.OpenAppPackageFileAsync("SalesData.json");
using var reader = new StreamReader(stream);
var jsonContent = await reader.ReadToEndAsync();

var jsonDocument = JsonDocument.Parse(jsonContent);
var jsonData = new ObservableCollection<DataPoint>();

foreach (var element in jsonDocument.RootElement.EnumerateArray())
{
   var month = element.GetProperty("Month").GetString() ?? "";
   var sales = element.GetProperty("Sales").GetDouble();
   jsonData.Add(new DataPoint { Month = month, Value = sales });
} 

b) Load from CSV

Use StreamReader to parse CSV data:

using var stream = await FileSystem.OpenAppPackageFileAsync("RevenueData.csv");
using var reader = new StreamReader(stream);

// Skip header
await reader.ReadLineAsync();

var csvData = new ObservableCollection<DataPoint>();
string? line;
while ((line = await reader.ReadLineAsync()) != null)
{
   var parts = line.Split(',');
   if (parts.Length >= 2)
   {
       csvData.Add(new DataPoint
       {
           Month = parts[0].Trim(),
           Value = double.Parse(parts[1].Trim())
       });
   }
} 

c) Load from Excel

Use Syncfusion’s XlsIO library for easy Excel reading:

using Syncfusion.XlsIO;

using var stream = await FileSystem.OpenAppPackageFileAsync("ExpensesData.xlsx");
using var excelEngine = new ExcelEngine();
var application = excelEngine.Excel;
application.DefaultVersion = ExcelVersion.Xlsx;

var workbook = application.Workbooks.Open(stream);
var worksheet = workbook.Worksheets[0];

var excelData = new ObservableCollection<DataPoint>();
for (int row = 2; row <= worksheet.UsedRange.LastRow; row++)
{
   var month = worksheet.Range[row, 1].Text;
   var expenseCell = worksheet.Range[row, 2];
   if (!string.IsNullOrEmpty(month) && expenseCell.Value != null)
   {
       double expense = Convert.ToDouble(expenseCell.Value);
       excelData.Add(new DataPoint { Month = month, Value = expense });
   }
}
workbook.Close(); 

Step 3: Bind Data to SfSparkChart

Bind each data collection to a different .NET MAUI Spark Chart.

XAML Code Snippet

<sparkchart:SfSparkLineChart ItemsSource="{Binding JsonData}"
                           YBindingPath="Value"
                           ShowMarkers="True" />

<sparkchart:SfSparkAreaChart ItemsSource="{Binding CsvData}"
                            YBindingPath="Value"
                            ShowMarkers="True" />

<sparkchart:SfSparkColumnChart ItemsSource="{Binding ExcelData}"
                              YBindingPath="Value" /> 

C# Code Snippet

var sparkLine = new SfSparkLineChart
{
   ItemsSource = viewModel.JsonData,
   YBindingPath = "Value",
   ShowMarkers = true
};

var sparkArea = new SfSparkAreaChart
{
   ItemsSource = viewModel.CsvData,
   YBindingPath = "Value",
   ShowMarkers = true
};

var sparkColumn = new SfSparkColumnChart
{
   ItemsSource = viewModel.ExcelData,
   YBindingPath = "Value"
}; 

Output:

You will see three SfSparkCharts in your MAUI app, each visualizing data from a different source:

• SfSparkLineChart: Binds to JSON data (e.g., monthly sales)
• SfSparkAreaChart: Binds to CSV data (e.g., monthly revenue)
• SfSparkColumnChart: Binds to Excel data (e.g., monthly expenses)

Each chart updates automatically when its bound collection changes.

For more details, please refer to the project on GitHub sample.

Conclusion

I hope you found this article helpful and learned how to bind JSON, Excel, and CSV data to .NET MAUI SfSparkCharts. With these techniques, you can easily visualize data from a variety of sources in your MAUI applications.

You can refer to our .NET MAUI Sparkline Chart feature tour page to learn about its other powerful features. For detailed guidance, refer to our .NET MAUI Spark Chart documentation.

For current customers, check out our .NET MAUI offerings from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Spark Chart and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!