We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind the SQLite Database to the Xamarin.Forms Chart?

Platform: Xamarin.Forms |
Control: SfChart |
Published Date: March 23, 2020 |
Last Revised Date: May 7, 2020

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

 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 to 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

Download the complete sample here

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile