Q: I want to build a line chart where each line represents a time period. Each line must be parallel to the X-axis and the axis shows time stamps.
A: You can use the capabilities of the control to handle DateTime values in order to set the necessary time data. First, you must configure the X-axis to show DateTime values. In the sample code we set the X-axis to show 10 days between February, 8th and February 18th.
//set the start and end dates for the axis. lineChart1.XAxisSettings.MinValue = new DateTime(2013, 2, 8).ToOADate(); lineChart1.XAxisSettings.MaxValue = new DateTime(2013, 2, 18).ToOADate(); //the axis will have 10 intervals lineChart1.XAxisSettings.Interval = (lineChart1.XAxisSettings.MaxValue - lineChart1.XAxisSettings.MinValue) / 10; //format the labels lineChart1.XAxisSettings.LabelFormat = "MM-dd-yy"; //tell the control this will be DateTime values lineChart1.XAxisSettings.ValueFormat = ValueFormat.DateTime; lineChart1.XAxisSettings.LabelType = LabelType.AutoScale;
Then you must add the correct data for the chart. You have three options to add DateTime values – as DateTime values, converted to ToOADate or converted to long. We have chosen to convert the values to long:
LineSeries series0 = new LineSeries(); //create the necessary DateTime values DateTime d1 = new DateTime(2013, 2, 9); DateTime d2 = new DateTime(2013, 2, 12); //convert them to long numbers series0.XData = new List{ d1.Ticks, d2.Ticks }; series0.YData = new List { 6, 6 }; //make the line thicker series0.StrokeThickness = 4; //add a red brush series0.Fills = new List (); series0.Fills.Add(new SolidColorBrush(Colors.Red)); //set the start and end dates for the axis. lineChart1.XAxisSettings.MinValue = new DateTime(2013, 2, 8).ToOADate(); lineChart1.XAxisSettings.MaxValue = new DateTime(2013, 2, 18).ToOADate(); lineChart1.Series.Add(series0);
Here we create a LineSeries that is drawn parallel to the X-axis at the height of 6.