Friday, January 27, 2012

Adding a Marker point on Telerik chart


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