How to bind the SQLite Database to the WinUI Chart (SfCartesianChart)?

2 mins read

This article demonstrates the connection establishment with the SQLite database and binds the retrieving data from the database to the WinUI Charts (SfCartesianChart).

Follow these steps to learn how to work with the WinUI Chart using the SQLite database.

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
{
    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: 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 the Database to the Chart.

<Page.DataContext>
    <local:ViewModel/>
</Page.DataContext>
 
<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: Retrieving the database data of Chart as follows.

public partial class ChartSample : Page
{
 public ChartSample()
 {
          InitializeComponent();
                        (DataContext as ViewModel).Data = App.Database.GetChartDataModel();
              }
}