How to bind the SQLite Database to the Xamarin.Forms Chart?
This article demonstrates the connection establishment with the SQLite database, and bind the retrieving data from database to the Xamarin.Forms Chart (SfChart).
Let us start learning how to work with the Xamarin.Forms Chart using the SQLite database with the following steps:
Step 1: Add the SQLite reference in 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
{
…
public static ChartDatabase Database
{
get
{
if (database == null)
{
database = new ChartDatabase(Path.Combine(
Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
"ChartDataBase.db3"));
}
return database;
}
}
….
}
Step 3: Now, 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 Database to SfChart.
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<chart:SfChart x:Name="chart" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
…
<chart:SfChart.Series>
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue"
YBindingPath="YValue">
</chart:ColumnSeries>
</chart:SfChart.Series>
</chart:SfChart>
</StackLayout>
</ContentPage.Content>
Retrieving the database data of Chart as follows.
public partial class ChartSample : ContentPage
{
public ChartSample ()
{
InitializeComponent ();
(BindingContext as ViewModel).Data = App.Database.GetChartDataModel();
}
}
Output
Initial page to display the SQLite database data
Inserting an item to the database.
After inserting data into the database.
Display the chart with generated data
Download the complete sample here
Conclusion
I hope you enjoyed learning how to bind the SQLite Database to the Xamarin.Forms Chart.
You can refer to our Xamarin. Forms Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin. Forms Charts example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
