Update Sample: Resolve the Database connection issue in the UWP Sample application

README.md

@@ -1,77 +1,100 @@
-# How to bind the SQL Database in UWP Chart (SfChart)?
+# How to bind the SQL Database in UWP Chart?
 
 This example illustrates how to establish the SQL connection and bind the retrieving data from database in a step by step process:
 
-**Step 1:** Retrieve the data table from the SQL DataSet using the connection string.
-```
+**Step 1:**  Create a ViewModel class that establishes a connection to your SQLite database, executes a query, and retrieves the data into an ObservableCollection<ChartDataItem>. The database file is created and seeded in the app’s local folder on first run in this example.
+```csharp
 public class ViewModel
 {
-    public ViewModel()
-    {
-        try
-        {
-            SqlConnection thisConnection = new SqlConnection(ConnectionString);
-            thisConnection.Open();
-            string Get_Data = "SELECT * FROM ChartData";
-            SqlCommand cmd = thisConnection.CreateCommand();
-            cmd.CommandText = Get_Data;
-            SqlDataAdapter sda = new SqlDataAdapter(cmd);
-            DataSet ds = new DataSet();
-            sda.Fill(ds);
-            var table = ds.Tables[0];
-            this.DataTable = table;
-        }
-        catch
-        {
-            return;
-        }
-    }
+    public ObservableCollection<ChartDataItem> DataTable { get; } = new ObservableCollection<ChartDataItem>();
 
-    public object DataTable { get; set; }
+    . . .
 
-    public static string ConnectionString
+    // Creates a SQLite DB in LocalFolder on first run and seeds simple rows
+    private static async Task<string> EnsureAndSeedDatabaseAsync(string dbFileName)
     {
-        get
+        var localFolder = ApplicationData.Current.LocalFolder;
+        var existing = await localFolder.TryGetItemAsync(dbFileName);
+        var dbPath = Path.Combine(localFolder.Path, dbFileName);
+
+        if (existing == null)
         {
-            string currentDir = System.Environment.CurrentDirectory;
-            currentDir = currentDir.Substring(0, currentDir.Length - 10) + "\\LocalDataBase";
-            return @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + currentDir + @"\SeriesItemsSource.mdf;Integrated Security=True";
+            using (var connection = new SqliteConnection($"Data Source={dbPath}"))
+            {
+                await connection.OpenAsync();
+
+                // Create table
+                using (var create = connection.CreateCommand())
+                {
+                    create.CommandText = @"
+                        CREATE TABLE IF NOT EXISTS ChartData (
+                            xValue REAL NOT NULL,
+                            yValue REAL NOT NULL
+                        );";
+                    await create.ExecuteNonQueryAsync();
+                }
+
+                // Seed a few sample points
+                using (var tx = connection.BeginTransaction())
+                using (var insert = connection.CreateCommand())
+                {
+                    insert.CommandText = "INSERT INTO ChartData (xValue, yValue) VALUES ($x, $y)";
+                    var px = insert.CreateParameter(); px.ParameterName = "$x"; insert.Parameters.Add(px);
+                    var py = insert.CreateParameter(); py.ParameterName = "$y"; insert.Parameters.Add(py);
+
+                    var points = new (double x, double y)[]
+                    {
+                        (1, 10), (2, 14), (3, 9), (4, 18), (5, 22), (6, 17), (7, 25)
+                    };
+
+                    foreach (var (x, y) in points)
+                    {
+                        px.Value = x;
+                        py.Value = y;
+                        await insert.ExecuteNonQueryAsync();
+                    }
+
+                    tx.Commit();
+                }
+            }
         }
+
+        return dbPath;
     }
 }
 ```
 
-**Step 2:** In the main page, initialize the SfChart control and bind the retrieved data.
-```
+**Step 2:** Set up the [SfChart](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Charts.SfChart.html) control with appropriate axes and bind the ItemsSource of a chart series to the DataTable property from your ViewModel. Specify the XBindingPath and YBindingPath to map to the respective columns in your database table.
+```xml
 <Grid>
-        <Grid.DataContext>
-            <local:ViewModel></local:ViewModel>
-        </Grid.DataContext>
-
-        <chart:SfChart Margin="10">
-
-            <chart:SfChart.PrimaryAxis>
-                <chart:NumericalAxis RangePadding="Additional"/>
-            </chart:SfChart.PrimaryAxis>
-
-            <chart:SfChart.SecondaryAxis>
-                <chart:NumericalAxis RangePadding="Additional"/>
-            </chart:SfChart.SecondaryAxis>
-
-            <chart:ScatterSeries ItemsSource="{Binding DataTable}"
-                                 XBindingPath="xVal" 
-                                 YBindingPath="yVal"/>
-        </chart:SfChart>
-
+    <Grid.DataContext>
+        <local:ViewModel/>
+    </Grid.DataContext>
+
+    <chart:SfChart Margin="10">
+
+        <chart:SfChart.PrimaryAxis>
+            <chart:NumericalAxis RangePadding="Additional" />
+        </chart:SfChart.PrimaryAxis>
+
+        <chart:SfChart.SecondaryAxis>
+            <chart:NumericalAxis RangePadding="Additional" />
+        </chart:SfChart.SecondaryAxis>
+
+        <chart:ScatterSeries ItemsSource="{Binding DataTable}"
+                             XBindingPath="XValue"
+                             YBindingPath="YValue" />
+    </chart:SfChart>
 </Grid>
 ```
 
-## Output:
+## Output
+<img width="1139" height="682" alt="image" src="https://github.com/user-attachments/assets/150d7535-ff50-436a-8fcb-0d9f4ec39bdf" />
 
-![SQL DataBinding to UWP SfChart](https://user-images.githubusercontent.com/53489303/200761566-1e210d5c-0740-4a08-9b58-8cc264ff0691.png)
+## Troubleshooting
 
-KB article - [How to bind the SQL Database in UWP Chart (SfChart)?](https://www.syncfusion.com/kb/11664/how-to-bind-the-sql-database-in-uwp-chart)
+### Path Too Long Exception
 
-## See also
+If you are facing a "Path too long" exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
 
-[How to bind the SQL Database to WPF Charts](https://www.syncfusion.com/kb/11595/how-to-bind-the-sql-database-to-wpf-charts)
+Refer to the knowledge base article [How to bind the SQL Database in UWP Chart](https://support.syncfusion.com/kb/article/10133/how-to-bind-the-sql-database-in-uwp-chart).

SQLwithChartUWP/App.xaml → SQLiteChartBinding_UWP/App.xaml

@@ -1,7 +1,7 @@
-<Application
-    x:Class="SQLLiteChartBinding.App"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:SQLLiteChartBinding">
-
-</Application>
+<Application
+    x:Class="SQLiteChartBinding_UWP.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:SQLiteChartBinding_UWP">
+
+</Application>

SQLwithChartUWP/App.xaml.cs → SQLiteChartBinding_UWP/App.xaml.cs

@@ -1,100 +1,100 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using Windows.ApplicationModel;
-using Windows.ApplicationModel.Activation;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
-using Windows.UI.Xaml.Data;
-using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
-using Windows.UI.Xaml.Navigation;
-
-namespace SQLLiteChartBinding
-{
-    /// <summary>
-    /// Provides application-specific behavior to supplement the default Application class.
-    /// </summary>
-    sealed partial class App : Application
-    {
-        /// <summary>
-        /// Initializes the singleton application object.  This is the first line of authored code
-        /// executed, and as such is the logical equivalent of main() or WinMain().
-        /// </summary>
-        public App()
-        {
-            this.InitializeComponent();
-            this.Suspending += OnSuspending;
-        }
-
-        /// <summary>
-        /// Invoked when the application is launched normally by the end user.  Other entry points
-        /// will be used such as when the application is launched to open a specific file.
-        /// </summary>
-        /// <param name="e">Details about the launch request and process.</param>
-        protected override void OnLaunched(LaunchActivatedEventArgs e)
-        {
-            Frame rootFrame = Window.Current.Content as Frame;
-
-            // Do not repeat app initialization when the Window already has content,
-            // just ensure that the window is active
-            if (rootFrame == null)
-            {
-                // Create a Frame to act as the navigation context and navigate to the first page
-                rootFrame = new Frame();
-
-                rootFrame.NavigationFailed += OnNavigationFailed;
-
-                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
-                {
-                    //TODO: Load state from previously suspended application
-                }
-
-                // Place the frame in the current Window
-                Window.Current.Content = rootFrame;
-            }
-
-            if (e.PrelaunchActivated == false)
-            {
-                if (rootFrame.Content == null)
-                {
-                    // When the navigation stack isn't restored navigate to the first page,
-                    // configuring the new page by passing required information as a navigation
-                    // parameter
-                    rootFrame.Navigate(typeof(MainPage), e.Arguments);
-                }
-                // Ensure the current window is active
-                Window.Current.Activate();
-            }
-        }
-
-        /// <summary>
-        /// Invoked when Navigation to a certain page fails
-        /// </summary>
-        /// <param name="sender">The Frame which failed navigation</param>
-        /// <param name="e">Details about the navigation failure</param>
-        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
-        {
-            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
-        }
-
-        /// <summary>
-        /// Invoked when application execution is being suspended.  Application state is saved
-        /// without knowing whether the application will be terminated or resumed with the contents
-        /// of memory still intact.
-        /// </summary>
-        /// <param name="sender">The source of the suspend request.</param>
-        /// <param name="e">Details about the suspend request.</param>
-        private void OnSuspending(object sender, SuspendingEventArgs e)
-        {
-            var deferral = e.SuspendingOperation.GetDeferral();
-            //TODO: Save application state and stop any background activity
-            deferral.Complete();
-        }
-    }
-}
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.ApplicationModel;
+using Windows.ApplicationModel.Activation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace SQLiteChartBinding_UWP
+{
+    /// <summary>
+    /// Provides application-specific behavior to supplement the default Application class.
+    /// </summary>
+    sealed partial class App : Application
+    {
+        /// <summary>
+        /// Initializes the singleton application object.  This is the first line of authored code
+        /// executed, and as such is the logical equivalent of main() or WinMain().
+        /// </summary>
+        public App()
+        {
+            this.InitializeComponent();
+            this.Suspending += OnSuspending;
+        }
+
+        /// <summary>
+        /// Invoked when the application is launched normally by the end user.  Other entry points
+        /// will be used such as when the application is launched to open a specific file.
+        /// </summary>
+        /// <param name="e">Details about the launch request and process.</param>
+        protected override void OnLaunched(LaunchActivatedEventArgs e)
+        {
+            Frame rootFrame = Window.Current.Content as Frame;
+
+            // Do not repeat app initialization when the Window already has content,
+            // just ensure that the window is active
+            if (rootFrame == null)
+            {
+                // Create a Frame to act as the navigation context and navigate to the first page
+                rootFrame = new Frame();
+
+                rootFrame.NavigationFailed += OnNavigationFailed;
+
+                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
+                {
+                    //TODO: Load state from previously suspended application
+                }
+
+                // Place the frame in the current Window
+                Window.Current.Content = rootFrame;
+            }
+
+            if (e.PrelaunchActivated == false)
+            {
+                if (rootFrame.Content == null)
+                {
+                    // When the navigation stack isn't restored navigate to the first page,
+                    // configuring the new page by passing required information as a navigation
+                    // parameter
+                    rootFrame.Navigate(typeof(MainPage), e.Arguments);
+                }
+                // Ensure the current window is active
+                Window.Current.Activate();
+            }
+        }
+
+        /// <summary>
+        /// Invoked when Navigation to a certain page fails
+        /// </summary>
+        /// <param name="sender">The Frame which failed navigation</param>
+        /// <param name="e">Details about the navigation failure</param>
+        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
+        {
+            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
+        }
+
+        /// <summary>
+        /// Invoked when application execution is being suspended.  Application state is saved
+        /// without knowing whether the application will be terminated or resumed with the contents
+        /// of memory still intact.
+        /// </summary>
+        /// <param name="sender">The source of the suspend request.</param>
+        /// <param name="e">Details about the suspend request.</param>
+        private void OnSuspending(object sender, SuspendingEventArgs e)
+        {
+            var deferral = e.SuspendingOperation.GetDeferral();
+            //TODO: Save application state and stop any background activity
+            deferral.Complete();
+        }
+    }
+}