Seamlessly Load Data from Different Data Sources into WPF Charts
Tags: wpf, chart, datavisualization
Published: 2023-03-03 14:59:38

---
title: Seamlessly Load Data from Different Data Sources into WPF Charts
published: true
date: 2023-03-03 11:00:00 UTC
tags: wpf, chart, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/different-data-source-wpf-charts.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh36geisvdhb8yhxul9g.png
---
The Syncfusion [WPF Charts](https://www.syncfusion.com/wpf-controls/charts "Syncfusion WPF Charts") control is optimized to visualize a huge volume of data elegantly. Its rich feature set includes functionalities like data binding, multiple axes, legends, animations, data labels, annotations, trackballs, tooltips, gradients, technical indicators, zooming, and more.

In this article, we’ll see how to load data from different data sources in the WPF Charts control. 

Before proceeding, you need to know three essential properties of the WPF Charts to configure the data:

- [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource "ItemsSource property of WPF Charts"): Collects the data points used to generate the chart.
- [XBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath "XBindingPath property of WPF Charts"): A bindable property that gets the property path of x-axis data in ItemsSource to render the chart series.
- [YBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html?tabs=tabid-1#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath "YBindingPath property of WPF Charts"): A bindable property that gets the property path of y-axis data in ItemsSource to render the chart series.

Let’s get started!

## Key data sources

Syncfusion WPF Charts offers over 45 chart types. All the chart types support loading data from the following data sources:

- [IEnumerable](#IEnumerable)
- [DataTable](#DataTable)
- [Array](#Array)
- [SQL](#SQL)
- [JSON](#JSON)
- [CSV](#CSV)

### <a name="IEnumerable">Load IEnumerable data in WPF Charts</a>

Let’s start with the [IEnumerable](https://learn.microsoft.com/en-us/dotnet/api/system.collections.ienumerable?view=net-7.0 "IEnumerable interface") data source. It supports all non-generic data collections that can be enumerated.

Here, we’ll populate the data collection with predefined class properties and specify the x-axis and y-axis adaptive fields to our WPF Charts control’s [XBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath "XBindingPath property of WPF Charts") and [YBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html?tabs=tabid-1#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath "YBindingPath property of WPF Charts"), respectively. In addition, we’ll use the following data collection types in the IEnumarable data source:

- List
- ObservableCollection
- Dictionary

Let’s see how to populate IEnumarable data for the WPF Charts control:

1. Create an object (Patient) for data creation. Here, we are going to load data in the form of patients’ names and height details in the chart.
```csharp
public class Patient
{
    public Patient(string currentName, double currentHeight)
    {
        Name = currentName;
        Height = currentHeight;
    }
 
    public string Name { get; set; }
 
    public double Height { get; set; }
}
```
2.Create a ViewModel class for the patient details.
```csharp
public class PatientViewModel
{
   public PatientViewModel()
   {
       PatientData = new ObservableCollection<Patient>();
 
       PatientData.Add(new Patient("Johnson Godwin", 176));
       PatientData.Add(new Patient("Peter Jackman", 163.3));
       PatientData.Add(new Patient("James Oliver", 177));
       ..
 
       PatientDetails = new Dictionary<string, double>();
       PatientDetails.Add("Johnson Godwin", 176);
       PatientDetails.Add("Peter Jackman", 163.3);
       …
   }
 
   public ObservableCollection<Patient> PatientData
   {
       get;
       set;
   }
 
   public Dictionary<string,double> PatientDetails
   {
       get;
       set;
   }
}
```
3.Bind the list data collection to the **ItemSource** property of the chart.
```xml
< Chart:SfChart>
  …
  < chart:ColumnSeries ItemsSource=”{Binding PatientData}” XBindingPath=”Name” YBindingPath=”Height” />
 
</Chart:SfChart>
```
4.Or, bind the dictionary data collection to the **ItemSource** property.
```xml
< Chart:SfChart>
  …
  < chart:ColumnSeries ItemsSource=”{Binding PatientDetails}” XBindingPath=”Key” YBindingPath=”Value” />
 
</Chart:SfChart>
```

The resulting chart is shown in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Loading-IEnumerable-Data-in-WPF-Charts-1.webp" alt="Loading IEnumerable Data in WPF Charts" style="width:100%">

  <figcaption>Loading IEnumerable Data in WPF Charts</figcaption>

</figure>

We can also populate our Charts with the following data collection types:

- [Tuple](https://www.syncfusion.com/kb/11645/how-to-bind-a-list-of-tuple-in-wpf-charts "How to bind a list of Tuple in WPF Charts?")
- [KeyValuePair](https://www.syncfusion.com/kb/10449/how-to-bind-keyvaluepair-collection-in-wpf-sfchart "How to bind KeyValuePair collection in WPF Charts?")

### <a name="DataTable">Load DataTable in WPF Charts</a>

The next data we’ll try is a [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-7.0 "DataTable class") collection, which provides a collection of columns and rows to store data in grid form. We’ll assign the column names to our Charts control’s [XBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath "XBindingPath property of WPF Charts") and [YBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html?tabs=tabid-1#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath "YBindingPath property of WPF Charts") properties.

Let’s see how to configure a DataTable collection in WPF Charts:

1. Create a DataTable business object. In this example, we are going to load data for product sales and target details.
```csharp
ChartDataTable = new DataTable();
 
ChartDataTable.Columns.Add("Product", typeof(string));
ChartDataTable.Columns.Add("Percentage", typeof(double));
 
ChartDataTable.Rows.Add("Data Cable", 65);
ChartDataTable.Rows.Add("Charger", 60);
ChartDataTable.Rows.Add("Smartwatch", 75);
ChartDataTable.Rows.Add("Earphone", 80);
 
ChartDataTable2 = new DataTable();
 
ChartDataTable2.Columns.Add("Product", typeof(string));
ChartDataTable2.Columns.Add("Percentage", typeof(double));
 
ChartDataTable2.Rows.Add("Data Cable", 60);
ChartDataTable2.Rows.Add("Charger", 55);
ChartDataTable2.Rows.Add("Smartwatch", 70);
ChartDataTable2.Rows.Add("Earphone", 77);
```
2.Bind the DataTable object fields to the Charts control.
```xml
< Chart:SfChart>
  …
  <chart:ColumnSeries ItemsSource=”{Binding ChartDataTable}” XBindingPath=”Product” YBindingPath=”Percentage”/>
  <chart:ColumnSeries ItemsSource=”{Binding ChartDataTable2}” XBindingPath=”Product” YBindingPath=”Percentage”/>
                   
 </Chart:SfChart>
```

The resulting chart is shown in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Loading-DataTable-in-WPF-Charts-1.webp" alt="Loading DataTable in WPF Charts" style="width:100%">

  <figcaption>Loading DataTable in WPF Charts</figcaption>

</figure>

**Note:** For more details, refer to [how to bind a DataTable in WPF Charts](https://www.syncfusion.com/kb/5515/how-to-bind-data-table-in-wpf-chart-sfchart "How to bind data table in WPF Charts ?").

### <a name="Array">Load an array in WPF Charts</a>

An array stores multiple values of the same data type. Configure the WPF Charts [XBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath "XBindingPath property of WPF Charts") or [YBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html?tabs=tabid-1#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath "YBindingPath property of WPF Charts") with an indexed array path.

Follow these steps to populate WPF Charts with an array collection:

1. Create a business object class with an array collection. In this example, we’ll populate the chart with monthly sales counts for products.
```csharp
public class Model
{
   private DateTime month;
 
   public DateTime Month
   {
       get { return month; }
       set { month = value; }
   }
 
   private double[] saleCount;
 
   public double[] SaleCount
   {
       get { return saleCount; }
       set { saleCount = value; }
   }
 
       
}
 
public class ViewModel
{
   public ViewModel()
   {
      var date = new DateTime(2015, 1, 1);
 
      Data = new ObservableCollection<Model>();
 
      Data.Add(new Model(date.AddMonths(1), new double[] { 698, 948 }));
      Data.Add(new Model(date.AddMonths(2), new double[] { 903, 1203 }));
      Data.Add(new Model(date.AddMonths(3), new double[] { 807, 1107 }));
      Data.Add(new Model(date.AddMonths(4), new double[] { 1058, 1408 }));
      Data.Add(new Model(date.AddMonths(5), new double[] { 954, 1154}));
   }
 
   public ObservableCollection<Model> Data { get; set; }
}
```
2.Bind data to the Charts control with an indexed array field.
```xml
< Chart:SfChart>
  …
  <chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath=" Month " YBindingPath=" SaleCount[0]"/>
  <chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath=" Month " YBindingPath=" SaleCount[1]"/>
 
< Chart:SfChart>
```

The output chart is shown in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Loading-Array-Data-in-WPF-Charts-1.webp" alt="Loading Array Data in WPF Charts" style="width:100%">

  <figcaption>Loading Array Data in WPF Charts</figcaption>

</figure>

**Note:** For more details, refer to [how to bind array data to WPF Charts](https://www.syncfusion.com/kb/4923/how-to-bind-the-array-property-in-wpf-chart-sfchart "How to bind the array property in WPF Charts?").

### <a name="SQL">Load a SQL collection in WPF Charts</a>

Let’s see how to retrieve data from a SQL data set and configure it with the WPF Charts. We’ll set the SQL data set field names to the **XBindingPath** and **YBindingPath** properties of the Charts control. To do so, follow these steps:

1. Retrieve data from the SQL data set and store it in the local DataTable object. In this example, we’ll handle data concerning yearly computer server performance.
```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;
      }
   } 
}
```
2.Bind the data to the Charts control with the local DataTable fields.
```xml
< Chart:SfChart>
  …
  <chart:SplineSeries ItemsSource=”{Binding DataTable}” XBindingPath=”xval” YbindingPath=”yval”/>
 
< Chart:SfChart>
```

The resulting chart is shown in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Loading-SQL-Data-in-WPF-Charts.webp" alt="Loading SQL Data in WPF Charts" style="width:100%">

  <figcaption>Loading SQL Data in WPF Charts</figcaption>

</figure>

**Note:** For more details, refer to [how to load SQL data in WPF Charts](https://www.syncfusion.com/kb/11595/how-to-bind-the-sql-database-to-wpf-charts "How to bind the SQL Database to WPF Charts?").

### <a name="JSON">Load JSON data in WPF Charts</a>

JSON (JavaScript Object Notation) is a lightweight data-interchange format file. It allows data to be stored by separating individual data points with commas. Just like with other data formats, we’ll set the locally converted field names as the **XBindingPath** and **YBindingPath**.

Let’s see how to retrieve JSON data about monthly oil consumption and plot it in a chart.

1. Read data from the JSON file, deserialize it, and then assign it to the local business object ( **Model** ).
```csharp
public class ViewModel
{
    public List<Model> Items { get; set; }
 
    public ViewModel()
    {
       using (var stream = GetType().Assembly.GetManifestResourceStream("JsonDataBinding.Capacities.json"))
       using (TextReader textStream = new StreamReader(stream))
       {
            var text = textStream.ReadToEnd();
            Items = JsonConvert.DeserializeObject<List<Model>>(text);
       }
    }       
}
```
2.Bind the data to the WPF Charts control with the local business object and its fields.
```xml
< Chart:SfChart>
  …
  <chart:ColumnSeries XBindingPath="Date" YBindingPath="CapacityUsed" ItemsSource="{Binding Items}"/>
 
</Chart:SfChart>
```

The final chart is shown in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Loading-JSON-Data-in-WPF-Charts-Control.webp" alt="Loading JSON Data in WPF Charts Control" style="width:100%">

  <figcaption>Loading JSON Data in WPF Charts Control</figcaption>

</figure>

**Note:** For more details, refer to how to [load JSON data in WPF Charts](https://www.syncfusion.com/kb/10929/how-to-bind-the-json-data-in-wpf-chart "How to bind the JSON data in WPF Charts?").

### <a name="CSV">Load CSV data in WPF Charts</a>

CSV (comma-separated values) is a prevalent import and export data format used in spreadsheets and databases. Each line in a CSV file is a data record. Each record consists of one or more fields, separated by commas. For the chart, we’ll assign the locally converted field names as the **XBindingPath** and **YBindingPath**.

Let’s learn how to retrieve CSV data about monthly appointment details and configure it for a chart.

1. Read the data from CSV files and deserialize it. Then assign the data to the local business object ( **Model** ).
```csharp
public class ViewModel
{
    public List<Model> Data { get; set; }
 
    public ViewModel()
    {
       Data = new List<Model>(ReadCSV("..\\..\\ChartData"));
    }
 
    public IEnumerable<Model> ReadCSV(string fileName)
    {
         List<string> lines = File.ReadAllLines(System.IO.Path.ChangeExtension(fileName, ".csv")).ToList();
         //First row contains the column names
         lines.RemoveAt(0);
 
         return lines.Select(line =>
         {
             string[] data = line.Split(',');
             return new Model(Convert.ToString(data[0]), Convert.ToDouble(data[1]));
          });
     }
}
```
2.Bind the data to the WPF Charts control with the local business object and its fields.
```xml
<Chart:SfChart>
 
  <chart:DoughnutSeries XBindingPath="Month" YBindingPath="Appointments" ItemsSource="{Binding Data}"/>
 
</Chart:SfChart>
```

The following image shows the resulting chart.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Loading-CSV-Data-in-WPF-Charts-Control.webp" alt="Loading CSV Data in WPF Charts Control" style="width:100%">

  <figcaption>Loading CSV Data in WPF Charts Control</figcaption>

</figure>

You can also use the [complex binding feature](https://help.syncfusion.com/wpf/charts/databinding#binding-complex-property-to-the-chart "Binding complex property to the WPF Charts") to access nested object reference property values to render the charts.

**Note:** For more details, refer to [how to load CSV data in WPF Charts](https://www.syncfusion.com/kb/13732/how-to-bind-the-csv-data-in-wpf-chart-sfchart "How to bind the CSV data in WPF Charts?").

## GitHub reference

You can check out the complete code examples from this article [on GitHub](https://github.com/SyncfusionExamples/WPF_Chart_Binding_Samples "Load data from multiple data source in Syncfusion WPF Charts GitHub demo").

## Conclusion

Thanks for reading! In this blog, we have seen how to load data from various data sources in [WPF Charts](https://www.syncfusion.com/wpf-controls/charts "Syncfusion WPF Charts"). Try them out and leave your feedback in the comments section below!

You can explore our [WPF Charts examples](https://github.com/syncfusion/wpf-demos "Syncfusion WPF Charts GitHub demos") to learn more about the supported chart types and how easy it is to configure them for stunning visual effects.

The latest version of the WPF Charts control is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and downloads page of Essential Studio") page. If you are not a Syncfusion customer, try our [30-day free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check it out.

Also, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/wpf "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Give Your WPF Application a Fresh Look with New Windows 11 Themes](https://www.syncfusion.com/blogs/post/give-your-wpf-application-a-fresh-look-with-new-windows-11-themes.aspx "Blog: Give Your WPF Application a Fresh Look with New Windows 11 Themes")
- [Creating an Organizational Chart Using the WPF Diagram Control: An Overview](https://www.syncfusion.com/blogs/post/creating-an-organizational-chart-using-the-wpf-diagram-control-an-overview.aspx "Blog: Creating an Organizational Chart Using the WPF Diagram Control: An Overview")
- [Show and Hide Annotations Based on Author in WPF PDF Viewer](https://www.syncfusion.com/blogs/post/show-and-hide-annotations-based-on-author-in-wpf-pdf-viewer.aspx "Blog: Show and Hide Annotations Based on Author in WPF PDF Viewer")
- [Easily Create Repeating or Recurring Appointments Using WPF Scheduler](https://www.syncfusion.com/blogs/post/easily-create-repeating-or-recurring-appointments-using-wpf-scheduler.aspx "Blog: Easily Create Repeating or Recurring Appointments Using WPF Scheduler")