# Draw area of specific height on ChartView

1. ##### Dwight
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
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

3. ##### Dwight
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
4. ##### Petar Kirov
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