Step 2 of 3: Adding Code

In this step, you'll add to your application's code file to create an ObservableCollection of new weather data, bind that data to the chart, and to customize the chart's appearance.

Right-click the page and select View Code from the context menu. The MainPage.xaml.cs code file will open.
Add the following namespace to the top of your page:

C#	Copy Code
using System.Collections.ObjectModel;

Add the following ObservableCollection and sample data directly below the InitializeComponent() method:

C#	Copy Code
ObservableCollection<WeatherData> weatherDataList = new ObservableCollection<WeatherData>(); // create sample data weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 1, 1), TempHigh =37, TempLow = 21 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 2, 1), TempHigh = 40, TempLow = 22 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 3, 1), TempHigh = 50, TempLow = 30 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 4, 1), TempHigh = 63, TempLow = 40 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 5, 1), TempHigh = 72, TempLow = 49 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 6, 1), TempHigh = 80, TempLow = 58 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 7, 1), TempHigh = 83, TempLow = 62 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 8, 1), TempHigh = 82, TempLow = 61 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 9, 1), TempHigh = 75, TempLow = 54 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 10, 1), TempHigh = 64, TempLow = 43 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 11, 1), TempHigh = 52, TempLow = 35 }); weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 12, 1), TempHigh = 40, TempLow = 25 });

Copy Code

ObservableCollection<WeatherData> weatherDataList = new ObservableCollection<WeatherData>();
// create sample data
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 1, 1), TempHigh =37, TempLow = 21 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 2, 1), TempHigh = 40, TempLow = 22 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 3, 1), TempHigh = 50, TempLow = 30 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 4, 1), TempHigh = 63, TempLow = 40 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 5, 1), TempHigh = 72, TempLow = 49 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 6, 1), TempHigh = 80, TempLow = 58 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 7, 1), TempHigh = 83, TempLow = 62 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 8, 1), TempHigh = 82, TempLow = 61 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 9, 1), TempHigh = 75, TempLow = 54 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 10, 1), TempHigh = 64, TempLow = 43 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 11, 1), TempHigh = 52, TempLow = 35 });
weatherDataList.Add(new WeatherData() { Date = new DateTime(2013, 12, 1), TempHigh = 40, TempLow = 25 });

Directly below the sample data, add the following code that will bind the data to the chart:

C#	Copy Code
// bind data to chart C1.Xaml.Chart.HighLowSeries series = new C1.Xaml.Chart.HighLowSeries(); series.ItemsSource = weatherDataList; series.HighValueBinding = new Binding() { Path = new PropertyPath("TempHigh") }; series.LowValueBinding = new Binding() { Path = new PropertyPath("TempLow") }; series.XValueBinding = new Binding() { Path = new PropertyPath("Date") };

Copy Code

// bind data to chart
C1.Xaml.Chart.HighLowSeries series = new C1.Xaml.Chart.HighLowSeries();
series.ItemsSource = weatherDataList;
series.HighValueBinding = new Binding() { Path = new PropertyPath("TempHigh") };
series.LowValueBinding = new Binding() { Path = new PropertyPath("TempLow") };
series.XValueBinding = new Binding() { Path = new PropertyPath("Date") };

Next, you'll set the chart type and invert the view:

C#	Copy Code
// set chart type c1Chart1.ChartType = C1.Xaml.Chart.ChartType.Gantt; c1Chart1.View.Inverted = true; c1Chart1.View.AxisX.IsTime = true;

Once you've set the chart type, add the following code to add the data series to the chart. This will also set the width of the bars:

C#	Copy Code
// add data series to chart c1Chart1.Data.Children.Add(series); // optional: set width of bars series.SymbolSize = new Size(30, 0); } }

The last section of code adds the following WeatherData class:

C#	Copy Code
public class WeatherData { public DateTime Date { get; set; } public double TempHigh { get; set; } public double TempLow { get; set; } }

In this step, you added the code to create sample data, set the chart type, and add the data to the chart. In the next step, you'll run your application.