Charting DateTime Axis

Hi,

I've just started using the phone elements controls and I'm struggling to get to grips with the working with a datetime axis.

I'd like to be able to display an axis which starts at the first of the month and then has an interval of the first of the month every month after that.

Is there anyway of doing this?

I've tried specifying a Minimum and Maximum on the axis in the xaml and code, but they are getting ignored. I've also tried binding the Interval to my view model which specifies the interval of 30days in ticks, but this caused an exception.

Do you have any examples of how I could achieve this?

Thanks.

Hello

At the moment we don't have a sample for this senario in PhoneElements, but you can find a sample in the free trial of WPF Elements: http://www.mindscapehq.com/products/wpfelements/download.The ChartingSampleExplorer project has a sample of this on the CustomAxisScale page. This also works in PhoneElements.

Here is how to achieve it:

Create a class to store the data for a single data point. This should simply contain a DateTime property (to map to the X axis) and a double property (to map to the Y axis). I'll call this DateTimeDouble.
When you fill the chart with data, fill it with instances of your DateTimeDouble class. The date time values can be the 1st of each month. The double values are the data for those months.
In the XAML, you can set the XBinding and YBinding properties of the data series you are using. These can be bindings to a property on the DateTimeDouble objects. For example: XBinding="{Binding DateTime}", YBinding="{Binding Double}". Where "DateTime" and "Double" are the properties on DateTimeDouble.
Then the last thing you need to do is tell the chart how to create an axis scale using the date time values. This is done by setting the ValueConverter property on the XAxis to be an instance of the MonthAxisValueConverter class that we provide.

Here is a summery of what the XAML could look like:

<ms:MonthAxisValueConverter x:Key="MonthConverter" />

<ms:Chart Name="Chart2" Margin="20" Title="Month scale" Grid.Column="1">
    <ms:BarSeries XBinding="{Binding DateTime}" YBinding="{Binding Double}" />
    <ms:Chart.BackgroundElements>
        <ms:ChartGrid VerticalGridLineBrush="Transparent" />
    </ms:Chart.BackgroundElements>
    <ms:Chart.XAxis>
        <ms:ChartAxis Title="X Axis" LabelFormat="{}{0:MMM / yyyy}" LabelLevelCount="2"
                      ValueConverter="{StaticResource MonthConverter}" LabelLayout="Inside" />
    </ms:Chart.XAxis>
</ms:Chart>

Please let us know if you need further help with this.
 - Jason

Hi Jason,

Thanks for the reply.

That fixed the display of the months on the Axis, but its not quite what I wanted. I have the following dataset

[

  {

        Data = 84,

        Label = "09/07/2011"

    },

    {

        Data = 78,

        Label = "03/08/2011"

    },

    {

        Data = 68,

        Label = "17/08/2011"     

    },

    {

        Data = 73,

        Label = "28/08/2011"     

    },

    {

        Data = 78,

        Label = "22/09/2011"     

    }

]

Where the Y axis will display the Label (date) and X axis the Data point

So I want the axis to display: 3 labels, 1st Jul, 1st Aug, 1st Sep

And then for the data points on the graph to displayed within the Y axis timeline on the date they occur on, but your graphs seems to want to evently space out all the data points, but for datetimes that are not evently spaced this makes no sense.

Hello

Sorry I didn't realize your actual data would be made up of both months and days. The MonthAxisValueConverter only has monthly precision and doesn't know about days which is why the data is being evenly spaced. For this kind of data you can use the DateTimeAxisValueConverter instead. This has precision right down to milliseconds which will display your data exactly as it is.

The problem now is that if you want the axis to display the 1st of each month, the tick marks and axis labels would need to have different spacing. This is because different months have a different number of days. Unfortunatly our chart axes only supports evenly spaced tick marks. The best you can get is by setting the tick spacing to be some number of days (such as 30 as you mentioned before). When using the DateTimeAxisValueConverter, you can set the tick spacing in code by creating a new TimeSpan object and then setting the MajorTickSpacing property of the axis to be the Ticks property of that TimeSpan.

Let us know what you think
 - Jason