DataTimeContinuousAxis - minimum and maximum not working

6 posts, 0 answers
  1. Gary Burgess
    Gary Burgess avatar
    1 posts
    Member since:
    Aug 2005

    Posted 04 Feb 2013 Link to this post

    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



  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 08 Feb 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Todd
    Todd avatar
    9 posts
    Member since:
    Mar 2013

    Posted 09 Mar 2013 Link to this post

    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

  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 11 Mar 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. Todd
    Todd avatar
    9 posts
    Member since:
    Mar 2013

    Posted 11 Mar 2013 Link to this post

    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
  7. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 12 Mar 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner