Creating a Range Bar Temperature Chart for the Windows Store

Temperature graphs, as seen in the Bing Weather app for Windows, are a variation of a High-Low or a Gantt chart sometimes called a range bar chart. Each plot point has two Y values, a high and a low. In this blog post I discuss how you can create this type of chart using ComponentOne Chart for WinRT XAML.

Defining the Chart

First, create an empty chart by adding a C1Chart control to your page and removing the default data series. Name the control “c1Chart1” and then your XAML should look like this:

<c1:C1Chart x:Name="c1Chart1" Palette="Concourse">  
    <c1:C1ChartLegend Position="Right" VerticalContentAlignment="Center"/>  
</c1:C1Chart>  

Defining the Data

Next you need to define the data set that will populate the chart. Consider the following WeatherData class that will give us a high temperature, low temperature and date values.

public class WeatherData  
{  
    public DateTime Date { get; set; }  
    public double TempHigh { get; set; }  
    public double TempLow { get; set; }  
}  

Create a collection of WeatherData objects that you will later bind to the C1Chart control.

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 });  

Binding the Chart to the Data

In your solution the data may look very different. Regardless of how you populate the collection of data in the previous step the data binding will be similar. The chart will only have one series so define a HighLowSeries class from the C1.Xaml.Chart namespace. Then you can set or bind the weatherDataList to the ItemsSource of the data series. Then set the HighValueBinding to the path of the field containing the high temperature values (TempHigh). Also set the LowValueBinding and XValueBinding accordingly. In our solution, the X axis will display date time information.

// 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, configure the C1Chart control by setting the chart type and axis settings. For this type of chart we will choose Gantt, which represents a bar chart with high and low values. Also, we invert the axes while setting the X axis to display date time labels. Finally, add the HighLowSeries to the chart’s data collection.

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

// add data series to chart  
c1Chart1.Data.Children.Add(series);  

Optionally, you can adjust the width of the bars by simply setting the SymbolStroke property on the HighLowSeries object. For this type of series, the height has no effect so we just set the width to the desired size.

// optional: set width of bars  
 series.SymbolSize = new Size(30, 0);  

Conclusion

Using the C1Chart control we can create advanced graphs that display more useful information than standard bar, line and pie charts. Knowing more that the control can do will help you discover more capabilities for your XAML apps. You can download the complete sample below. Download ChartWeather.zip