Draw area of specific height on ChartView

5 posts, 0 answers
  1. Dwight
    Dwight avatar
    12 posts
    Member since:
    Feb 2013

    Posted 13 Feb 2013 Link to this post

    Hi,

    I'm facing a rather nasty problem here with the ChartView.

    I want to draw 4 zones on the chart which show the user if a signal is off, kind of like quality zones. See attached image for an example.
    The first zone is running from +infinity on Y-axis to a given Y-value, the second zone starts from this Y-value down to another Y-value.
    Then there is a "normal" zone, which doesn't need to be drawn and then starting from a third Y-value down to a fourth Y-value is the third zone. Finally the fourth zone starts from the fourth Y-value up unto -infinity on Y-axis.

    You'll get something like this:
    -------------------------------------------------- + INFINITY
    ZONE 1
    -------------------------------------------------- Y-value 1
    ZONE 2
    -------------------------------------------------- Y-value 2
    NORMAL ZONE
    -------------------------------------------------- Y-value 3
    ZONE 3
    -------------------------------------------------- Y-value 4
    ZONE 4
    -------------------------------------------------- - INFINITY

    I tried using the area series and this works, but it's not really nice. I need to draw the series on top off each other and the normal zone needs to be drawn too, but then in white. Doing so doesn't make the rulers show. Making the normal zone more transparent, is just awful!

    So I placed a Canvas on top of the ChartView and wanted to render rectangles over the ChartView. I finally came up with a transformation algorithm since there is no method on the ChartView to convert a data-point to a pixel coordinate. Right now I'm at the point that I have this working, but... now I need to correct for the zooming & scrolling too.

    This feels so wrong and hope someone can shed a light on this problem and guide me towards another path?
    Bottom line, am I missing something or is my method with the Canvas the only way?

    Kind regards,
    Dwight
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 15 Feb 2013 Link to this post

    Hi Dwight,

    I believe that the easiest way to meet your requirements is to use PlotBand Annotations. Here is an example:
    <telerik:RadCartesianChart.Annotations>
        <telerik:CartesianPlotBandAnnotation
            Axis="{Binding ElementName=calibrationChart, Path=VerticalAxis}"
            From="10000" To="[Y-value 2]"/>
        <telerik:CartesianPlotBandAnnotation
            Axis="{Binding ElementName=calibrationChart, Path=VerticalAxis}"
            From="[Y-value 1]" To="[Y-value 2]"/>               
                     
                     
        <telerik:CartesianPlotBandAnnotation
            Axis="{Binding ElementName=calibrationChart, Path=VerticalAxis}"
            From="[Y-value 3]" To="[Y-value 4]"/>
        <telerik:CartesianPlotBandAnnotation
            Axis="{Binding ElementName=calibrationChart, Path=VerticalAxis}"
            From="[Y-value 4]" To="-1000"/>
    </telerik:RadCartesianChart.Annotations>
    Just make sure that you replace 10000 and -10000 with something that should be outside of the normally visible range.

    That way you can skip altogether the complex approach with manually drawing rectangles or overlaying area series.

    I hope this helps.

    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Dwight
    Dwight avatar
    12 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    Hi,

    Thanks for the reply, I was able to implement what I wanted using the proposed solution.

    I have just one more question, how do I reset the annotation, setting from and to to null does not seem to do the trick.

    Kind regards,
    Dwight
  5. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 22 Feb 2013 Link to this post

    Hi Dwight,

    I'm not quite sure what do you mean by "reset". If you need to hide an annotation, you can set its opacity to 0, or you can remove it from the annotations collection.

    Could you elaborate if this is what you are looking for?
     

    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Dwight
    Dwight avatar
    12 posts
    Member since:
    Feb 2013

    Posted 26 Apr 2013 Link to this post

    Setting the value to infinity did the trick.
Back to Top
UI for WPF is Visual Studio 2017 Ready