ChartView 2013 Q2 Features demo

[Nitin Nitin]

Hello,

I am looking for an implementation at the following features for ChartView in the latest 2013 Q2 Telerik Silverlight release:

• Custom line annotations
  This will allow you to place an arbitrary line within the chart area.
• Scroll-to-zoom
  Allow the users to use the mouse scroll to zoom in and out
• Drag-to-pan
  Allow the users to click-and-hold and then drag the chart area in order to pan.

Can you please give us more insights about how to implement these features.

Best Regards,
Nitin R

[Nitin Nitin]

Hello Telerik,

I request you to please reply to my query asap.

Waiting.

Thanks,
Nitin 

[Rosko]

Hello Nitin Nitin,

RadControls are accompanied with a vast collection of online demos with source code included and online help documentation, both regarding many different topics.

How to do CustomLineAnnotations:

<telerik:RadCartesianChart.Annotations>
                <!--Each Of these properties define the positioning of the line-->
                <telerik:CartesianCustomLineAnnotation HorizontalFrom="0"
                                           HorizontalTo="10"
                                           VerticalFrom="0"
                                           VerticalTo="15"/>
</telerik:RadCartesianChart.Annotations>

Regarding scroll-to-zoom, you can check out this demo.

To enable drag to pan feature you need to do the following thing:

<telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior DragMode="Pan"/>
</telerik:RadCartesianChart.Behaviors>

Regards,
Rosko
Telerik

[Nitin Nitin]

Hello Rosko,

Thanks for your quick reply.

CustomLineAnnotations:

I need to know how can we allow the user to create the annotations dynamically via mouse-clicks.
I want to allow my user to create vertical lines on a single mouse click which they can drag and delete.

You may see this example the other charting tool has provided

http://www.scichart.com/Abt.Controls.SciChart.SL.ExampleTestPage.html#/Abt.Controls.SciChart.Example;component/Examples/IWantTo/AnnotateAChart/CreateAnnotationsDynamically/CreateAnnotationsDynamically.xaml

Select vertical line from the above link and try out.

Can we achieve this using telerik customr line annotations.

It would be great if you can send me a demo for this feature.

Thanks,
Nitin R

[Rosko]

Hello Nitin Nitin

Dragging the custom line annotation is not a feature that is supported out-of-the-box. Nevertheless, it can be achieved. I must warn you that this is an application specific scenario which is not extensively tested. It has been demonstrated in the attached project.

Also, in the attached project, you can find, how an annotation has been created programmatically. You can use this approach to create an annotation, for example, with a button click.

Regards,
Rosko
Telerik

[Nitin Nitin]

Hello Rosko,

Thanks for the solution. It helped me to get started.
Now, I have added vertical line on the radchartview.

I need to show the intersection points (x1,y1) near the vertical line just like the trackball.

I would really appreciate if you could send me a solution at the earliest

Also, to add a new vertical line, I need to implement a context menu on right click, which will show options of Add New Vertical Line and Delete existing line.


Thanks,
Nitin R

[Rosko]

Hi Nitin Nitin,

I suppose that you want to have those values appear whenever the custom line annotation intersects with one of the scatter line series. This can be achieved only  by using either the ChartCrosshairBehavior or ChartTrackBallBehavior.

<telerik:RadCartesianChart.Behaviors>
    <!--Use one of these two-->
    <telerik:ChartCrosshairBehavior/>
    <telerik:ChartTrackBallBehavior/>
</telerik:RadCartesianChart.Behaviors>

Regarding the context menu, you can use RadContextMenu, please refer to the corresponding online help topic and online demos with included source.

Also, I have edited the project from last time to demonstrate RadContextMenu and attached it to this post.

Regards,
Rosko
Telerik

[Nitin Nitin]

Hello,

Thanks for the solution.

When I try to create a custom annotation for a chartview where my x-axis denotes time(HH:mm) format, I am unable to see the custom line on the chart.

Can you pls show me with the same example where the x-axis would be time(HH:mm)?

Thanks,
Nitin

[Nitin Nitin]

Hello Rosko,

Following is my horizontal axis code using which I am unable to draw a vertical line using customannotationline

<telerik:RadCartesianChart.HorizontalAxis>
            <telerik:DateTimeCategoricalAxis PanZoomBarStyle="{StaticResource PanZoomBarStyle}"
                LineThickness="0"
                Margin="0,0,0,0"
                DateTimeComponent="Ticks"
                PlotMode="OnTicks"
                MajorTickInterval="180"
                ShowLabels="True"
                MajorTickStyle="{StaticResource tickStyle}"
                >
                  <telerik:DateTimeCategoricalAxis.LabelTemplate >
                    <DataTemplate>
                        <Border  BorderThickness="0">
                            <TextBlock Margin="32,0,5,0" Text="{Binding}" Style="{StaticResource AxisLabelTemplate}"/>
                        </Border>
                    </DataTemplate>
                </telerik:DateTimeCategoricalAxis.LabelTemplate>
            </telerik:DateTimeCategoricalAxis>

        </telerik:RadCartesianChart.HorizontalAxis>

Please help. I would be great if you show me how to add the custom line for datetimecategoricalaxis

Thanks,
Nitin 

[Nitin Nitin]

Hi Rosko,

I got the above problem resolved.

Dim annotation As New CartesianCustomLineAnnotation()
            annotatio_index += 1

            annotation.VerticalFrom = CDbl(0)
            annotation.VerticalTo = CDbl(50)
            annotation.HorizontalFrom = "9:00"  // adding the string value for these properties solved the problem for me
            annotation.HorizontalTo = "9:00"
            annotation.Stroke = New SolidColorBrush(Colors.Red)
            annotation.StrokeThickness = 3

We have added the context menu (Add VerticalLine & Delete Line) on which we are able to add/delete those lines.

I want to add vertical line on this position where user selects "Add Vertical Line" from context menu on the cartesianchart.

For example : If user right clicks at (x,y) = (10,50) then he gets a context menu there, when on selecting "Add vertical line", the line should be drawn at x=10 which we are currently hard coded as HorizontalTo=2 & HorizontalFrom=2 

Could you please advise me or send a small solution.

Thanks,
Nitin

Thanks.

[Rosko]

Hi,

Again, you can take advantage of the conversion API, already used in annotation_MouseLeftButtonDown event.

private void RadContextMenu_ItemClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    Point mousePosition = (sender as RadContextMenu).MousePosition;
    //tuple contains the coordinates of the context menu in terms of chart data
    //already demonstrated in annotation_MouseLeftButtonDown
    var tuple = chart.ConvertPointToData(mousePosition);

    var clickedItem = (e.Source as RadMenuItem);
    var header = clickedItem.Header.ToString();
    if (header == "Add New Vertical Line")
    {
        //Add a line
    }
    else if (header == "Delete Existing Line")
    {
        //Remove a line
    }
}

Regards, Rosko
Telerik