I was thinking how to add a marker on a telerik chart.
After doing a lot of research I found that there is a layer in the ChartArea to
add MarkedZones. However, this did not allow me to add a marker image and it
had entirely a different usage. Please check the telerik site to know more about the MarkedZones. There
might be other ways to do what i wanted to, but this is the approach which i took...
A marked zone is actually a rectangle which takes up the
chart coordinates and creates a rectangle using them. So, all we have to do is create a rectangle
with the x and y points of the chart and fill the resulting rectangle with an
image brush.Simple!!! :)
Here is the code to create a MarkedZone on chart item Click
Code:
MarkedZone markedZone = new MarkedZone();
markedZone.StartY = e.DataPoint.YValue;
markedZone.EndY = e.DataPoint.YValue + ((Axis)(((((ChartArea)(sender)))).AxisY)).ActualStep;
markedZone.StartX = e.DataPoint.XValue;
markedZone.EndX = e.DataPoint.XValue + ((Axis)(((((ChartArea)(sender)))).AxisX)).ActualStep;
BitmapImage bitmap = new BitmapImage(new Uri("/Pointer.png", UriKind.RelativeOrAbsolute));
ImageBrush imageBrush = new ImageBrush();
imageBrush.AlignmentX = AlignmentX.Left;
imageBrush.AlignmentY = AlignmentY.Bottom;
imageBrush.Stretch = Stretch.None;
imageBrush.ImageSource = bitmap;
markedZone.Background = imageBrush;
LineChart.DefaultView.ChartArea.Annotations.Add(markedZone);
All I have done is create a rectangle using the coordinates
and used image brush to fill it... the result was like this.
Now that our pointer is
in place lets work to make it look beautiful. As you can see the pointer is
just behind the label or item point mark. It is because the layer for marked
zone(PART_AnnotationLayer) is below the layer for the item point mark(PART_LabelsPanel).
All we have to do now is change the layers by styling the chart area. You can see how it is done here. Once that is done here is what it looks like..
0 comments:
Post a Comment