This is a migrated thread and some comments may be shown as answers.

Draw area of specific height on ChartView

4 Answers 95 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Dwight
Top achievements
Rank 1
Dwight asked on 13 Feb 2013, 10:19 AM
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

4 Answers, 1 is accepted

Sort by
0
Petar Kirov
Telerik team
answered on 15 Feb 2013, 08:16 AM
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.

0
Dwight
Top achievements
Rank 1
answered on 19 Feb 2013, 09:05 AM
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
0
Petar Kirov
Telerik team
answered on 22 Feb 2013, 11:08 AM
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.

0
Dwight
Top achievements
Rank 1
answered on 26 Apr 2013, 02:22 PM
Setting the value to infinity did the trick.
Tags
ChartView
Asked by
Dwight
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Dwight
Top achievements
Rank 1
Share this question
or