ChartView 2013 Q2 Features demo

11 posts, 0 answers
  1. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 24 Jun 2013 Link to this post

    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
  2. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 26 Jun 2013 Link to this post

    Hello Telerik,

    I request you to please reply to my query asap.

    Waiting.

    Thanks,
    Nitin 
  3. DevCraft banner
  4. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 27 Jun 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  5. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 27 Jun 2013 Link to this post

    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

  6. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 02 Jul 2013 Link to this post

    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
  7. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 05 Jul 2013 Link to this post

    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
  8. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 10 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  9. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 11 Jul 2013 Link to this post

    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
  10. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 12 Jul 2013 Link to this post

    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 


  11. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 12 Jul 2013 Link to this post

    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.
  12. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 15 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner