DataTimeContinuousAxis - minimum and maximum not working

[Gary Burgess]

Hi
I am trying to produce a graphic view of ocean tides (high, low, etc).  I found an issue using the RadCartesianChart where it doesn't seem to obey the minimum and maximum in the way I think it should.

Here's my simple GraphDataItem class :

Public Class GraphDataItem

    Public Property DateTime As Date
    Public Property Value As Double
    Public Sub New(itemDateTime As Date, itemValue As Double)
        DateTime = itemDateTime
        Value = itemValue
    End Sub

End Class

And the collection (GraphData) used by the graph, including the values I am testing with:

Public Class GraphData

    Public Property Items As List(Of GraphDataItem)

    Public Sub New()
        Items = New List(Of GraphDataItem)
        Items.Add(New GraphDataItem(CDate("13-Feb-2011 18:30:00"), 1.2))
        Items.Add(New GraphDataItem(CDate("13-Feb-2011 23:33:00"), 0.43))
        Items.Add(New GraphDataItem(CDate("14-Feb-2011 03:50:00"), 1.4))
        Items.Add(New GraphDataItem(CDate("14-Feb-2011 11:16:00"), 0.4))
        Items.Add(New GraphDataItem(CDate("14-Feb-2011 17:35:00"), 0.9))
        Items.Add(New GraphDataItem(CDate("14-Feb-2011 22:11:00"), 0.7))
        Items.Add(New GraphDataItem(CDate("15-Feb-2011 03:00:00"), 1.45))
        Items.Add(New GraphDataItem(CDate("15-Feb-2011 09:27:00"), 0.35))
    End Sub

End Class

The XAML for the chart is listed here:

<telerik:RadCartesianChart DataContext="{Binding Items}" >
    <telerik:RadCartesianChart.Grid>
        <telerik:CartesianChartGrid MajorLinesVisibility="X"
                                    >
            <telerik:CartesianChartGrid.MajorYLineStyle>
                <Style TargetType="Line">
                    <Setter Property="Shape.Stroke" Value="Gray" />
                </Style>
            </telerik:CartesianChartGrid.MajorYLineStyle>
        </telerik:CartesianChartGrid>
    </telerik:RadCartesianChart.Grid>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeContinuousAxis LabelFormat="dd MMM htt"
                                        FontSize="12"
                                        Margin="0"
                                        MajorStepUnit="Day"
                                        MajorStep="0.25"
                                        PlotMode="OnTicks"
                                        LabelInterval="1">
        </telerik:DateTimeContinuousAxis>
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis  LabelInterval="1"
                             Minimum="0"
                             MaxHeight="2">
        </telerik:LinearAxis>
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:LineSeries CombineMode="None"
                            ItemsSource="{Binding}"
                     >
        <telerik:LineSeries.ValueBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="Value"  />
        </telerik:LineSeries.ValueBinding>
        <telerik:LineSeries.CategoryBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="DateTime" />
        </telerik:LineSeries.CategoryBinding>
    </telerik:LineSeries>

</telerik:RadCartesianChart>

The above code produces the attached file "graphwithalldata.png"

When you change the graph and apply minimum and maximum properties to the DateTimeContinuousAxis as show below the graph goes rather weird:

<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:DateTimeContinuousAxis LabelFormat="dd MMM htt"
                                    FontSize="12"
                                    Margin="0"
                                    MajorStepUnit="Day"
                                    MajorStep="0.25"
                                    Minimum="2011-02-14 0:00:00"
                                    Maximum="2011-02-15 0:00:00"
                                    PlotMode="OnTicks"
                                    LabelInterval="1">
    </telerik:DateTimeContinuousAxis>
</telerik:RadCartesianChart.HorizontalAxis>

The graph showing the strange results in attached as "graphwithminmax.png".

I am expecting the graph to ignore data points outside of the minimum / maximum date range and certainly for it not to plot them over the top of the real data.  It seems to ignore the "date" part of the date/time and plots by the "time" part. 

I have a second issue which is a real world example where I am plotting tide heights and want to show a single day per chart.  As I am sure you are aware, the first tide for a day can be as late as 6:00am.  This means the chart is missing a nice curve (especially when using the SplineAreaSeries - which is my plan) at the start.  It abruptly starts at 6:00am.  What I would like to do is provide the previous day's last tide (at perhaps 23:00) and use this to create the opening curve.  It was upon doing this that I discovered the issue reported above.

Is there a way I can use your chart to produce this sort of tide graphic ?  I was using another vendors chart, which did it fine - but I was changing over all of my controls for my Windows 8 app to Telerik, until I hit this show stopper.

Any ideas would be appreciated.

Regards

Gary

Telerik 2012.3 for Windows Phone 8

[Victor]

Hi Gary,

Thanks for writing.
This is the default behavior of the axis. The axis itself currently does not filter data, it simply does not process data points that are outside its range so the they remain at [0,0] which is why the line to the last point returns to the beginning. For now I suggest that you filter you data (using linq for example) so that all data points are inside the axis range.

We are currently working on many chart improvements and this behavior will be revised since other users also reported this to be confusing. The new improvements will be available for the Q2 release this year or sooner.

Please write again if you have other questions.

Regards,
Victor
the Telerik team

[Todd]

Gary,
I'm doing something very similar with a Spline chart for tides on a single day. What I'm doing is grabbing the last tide from the night before and the next tide for the day after (more on this in a minute) and just calculating where the tide would be at 12:00 am and 11:59pm and adding those as points in the chart.

Using your code, a simplistic example for a midnight example would be something like this with the variable "valueAtMidnight" being the tide height value you want to add to a TideItem for midnight.

Module Module1
    Sub Main()
        Dim gd = New GraphData
        Dim lastNightTide = New GraphDataItem(CDate("13-Feb-2011 23:00:00"), 10.0)
        Dim nextDayTide = New GraphDataItem(CDate("14-Feb-2011 01:00:00"), 5.0)
        Dim midnight = CDate("14-Feb-2011 00:00:00")

        Dim heightDifferenceBetweenTides As Double = nextDayTide.Height - lastNightTide.Height
        Dim totalhoursSpan As Double = (nextDayTide.DateTime - lastNightTide.DateTime).TotalHours
        Dim hoursFromLastTideToMidnight As Double = (midnight - lastNightTide.DateTime).TotalHours
        Dim percentageOfTimeFromLastTideToMidnight = hoursFromLastTideToMidnight / totalhoursSpan
        Dim valueAtMidnight As Double = (heightDifferenceBetweenTides * percentageOfTimeFromLastTideToMidnight) + lastNightTide.Height
    End Sub
End Module

Public Class GraphDataItem
    Public Property DateTime As Date
    Public Property Height As Double
    Public Sub New(itemDateTime As Date, itemHeight As Double)
        DateTime = itemDateTime
        Height = itemHeight
    End Sub
End Class

Public Class GraphData
    Public Property Items As List(Of GraphDataItem)
    Public Sub New()
        Items = New List(Of GraphDataItem)
        With Items
            .Add(New GraphDataItem(CDate("13-Feb-2011 23:33:00"), 0.43))
            .Add(New GraphDataItem(CDate("14-Feb-2011 03:50:00"), 1.4))
            .Add(New GraphDataItem(CDate("14-Feb-2011 11:16:00"), 0.4))
            .Add(New GraphDataItem(CDate("14-Feb-2011 22:11:00"), 0.7))
            .Add(New GraphDataItem(CDate("15-Feb-2011 03:00:00"), 1.45))
        End With
    End Sub
End Class

On getting the last tide of yesterday and the next day of tomorrow, if you have an IEnumerable of the tides for those days, you can use .Max and .Min on a collection of dates. I just hard coded in the dates/times in the example above, but what I'm doing is this. So, you could do something like Dim latestTideYesterday As DateTime = (From e in YesterdayItems Select e.Date).Max assuming your YesterdayItems are GraphDataItems consisting of only yesterday's tides.

Now, I have a question. Do you know how to display a point on the Telerik chart, like an Ellipse, at a specified time/value. For example, if it is today's tide, I'm looking at displaying an ellipse on the spline chart for the current time/feet of the tide (basically, where you in relation to today's tides). I haven't been able to find any examples on that.

Cheers,
Todd

[Victor]

Hi Gary,

Thanks for writing.
Your series has a PointTemplateSelector property. You can set it to a class that inherits from DataTemplateSelector. You should return null from SelectTemplate method except for the point which you want to highlight. For this point you can return any DataTemplate you want (ellipse in your case). The SelectTemplate method is called for every visible data point.

I hope this helps.

Greetings,
Victor
the Telerik team

[Todd]

Hi Victor,
This is Todd you responded to, not Gary.

I guess I'm confused - I don't want to add a data point to the binding series as the ellipse I want to add is the current time (and then want it to be displayed at the height for that time on the spline). Is there anyway to add just an ellipse and assign it's category as the current time and have it show up on the spline in the right location?

Cheers,
Todd

[Victor]

Hi Todd,

I understand now.
Currently RadChart does not support such modification. However, we are in the process of updating the chart and it will have many new features for the Q2 2013 release. One of these features will be Annotations which should be the solution for your problem. Our Windows 8 chart supports annotations, you can find more information here.

Regards,
Victor
the Telerik team