Skip to content

This repository contains sample for how to bind the SQLite Database to the WinUI Chart (SfCartesianChart)

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-bind-the-SQLite-Database-to-the-WinUI-Chart-SfCartesianChart-

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

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

This example demonstrates how to show the SQLite database data to Chart. Please refer KB link for more details,

KB article - How to bind the SQLite Database to the WinUI Chart (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 : ContentPage
{
      public ChartSample ()
      {
             InitializeComponent ();
             (DataContext as ViewModel).Data = App.Database.GetChartDataModel();
      }
}

Output:

Displaying the database data in a ListView

Initial page to display the SQLite database data

Inserting an data item in the database

Inserting an item into the database

Output after inserting a data into the database

After inserting data into the database

Chart output based on the database data

Display the chart with generated data

See also

Refer our feature tour page to know more features available in our charts.

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages