Category / Section
How to bind the SQL Database to WPF Charts?
1 min read
This article explains 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.
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
{
MessageBox.Show("DataBase Error");
}
}
public object DataTable { get; set; }
public static string ConnectionString
{
get
{
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";
}
}
}
Step 2: In the main page, initialize the SfChart control and bind the retrieved data.
<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>
