How to bind the SQLite Database to the .NET MAUI Chart?
This article demonstrates how to establish a connection with an SQLite database and bind the retrieved data from the database to the .NET MAUI Charts.
Follow these steps to learn how to work with the .NET MAUI Chart using the SQLite database.
Step 1: Add the SQLite reference to your project.
Step 2: Create the database access class as follows.
public class ChartDatabase
{
readonly SQLiteConnection _database;
public ChartDatabase(string dbPath)
{
_database = new SQLiteConnection(dbPath);
_database.CreateTable<ChartDataModel>();
}
//Get the list of ChartDataModel items from the database
public List<ChartDataModel> GetChartDataModel()
{
return _database.Table<ChartDataModel>().ToList();
}
//Insert an item in the database
public int SaveChartDataModelAsync(ChartDataModel chartDataModel)
{
if (chartDataModel == null)
{
throw new Exception("Null");
}
return _database.Insert(chartDataModel);
}
//Delete an item in the database
public int DeleteChartDataModelAsync(ChartDataModel chartDataModel)
{
return _database.Delete(chartDataModel);
}
}
public partial class App : Application
{
static ChartDatabase database;
…
public static ChartDatabase Database
{
get
{
if (database == null)
{
database = new ChartDatabase(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "ChartDataBase.db3"));
}
return database;
}
}
}
Step 3: Create the following Model for the Chart data.
public class ChartDataModel
{
[PrimaryKey]
public string XValue { get; set; }
public double YValue { get; set; }
}
Step 4: Bind the retrieved data from the Database to the Chart.
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<chart:SfCartesianChart>
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
</chart:SfCartesianChart>
Step 5: Retrieve the database data and bind it to the chart.
public partial class ChartSample : ContentPage
{
public ChartSample()
{
InitializeComponent();
(BindingContext as ViewModel).Data = App.Database.GetChartDataModel();
}
}
Output:
The initial page to display the SQLite database data
Inserting an item into the database
After inserting data into the database
Display the chart with the generated data
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to bind an SQLite Database to a .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Charts 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!
