Grid Lines for multiple y-axis

19 posts, 0 answers
  1. Supriya
    Supriya avatar
    13 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    I require grid lines on my graph. My graph contains multiple y-axis and single x-axis.
    I am getting vertical grid lines on my graph but unable to get grid lines horizontally for mapping vertical axis.
    Can u help me to get that  grid lines vertically? please provide an example.
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 27 Mar 2013 Link to this post

    Hi Supriya,

     Unfortunately additional axes of RadChartView cannot have gridlines by default. However you may achieve this with Custom Gridlines and more specially CartesianGridline annotations.

    Greetings,
    Evgenia
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Supriya
    Supriya avatar
    13 posts
    Member since:
    Mar 2013

    Posted 31 Mar 2013 Link to this post

    can u explain cartesian chart annotation with an example so that i can generate lies dynamically.
  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 04 Apr 2013 Link to this post

    Hi Supriya,

     You can get to know the Cartesian Annotations from the help topic provided in my previous post as well as this online demo. You can dynamically create annotations by adding them to RadCartesianChart.Annotations collection.

    Kind regards,
    Evgenia
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Supriya
    Supriya avatar
    13 posts
    Member since:
    Mar 2013

    Posted 06 Apr 2013 Link to this post

    thanks
  7. Supriya
    Supriya avatar
    13 posts
    Member since:
    Mar 2013

    Posted 04 Jul 2013 Link to this post

    hi,
    i have got a graph with multiple y-axis which are created dynamically and the points are added dynamically to it. I need to show both horizontal and vertical grid lines for the multiple y-axis graph. The y-axis minimum and maximum values are decided dynamically and each y-axis is having maximum 10 ticks. We want to show the grid lines on button command.How can we show the grid lines both horizontally and vertically on the graph depending only on the first y-axis irrespective of multiple y-axis? And does telerik provides open source code which we can modify according to our requirement?

    Below is the code and  the image attached of the graph.

      <UserControl.Resources>
            <BooleanToVisibilityConverter x:Key="boolToVisible"/>

            <Style TargetType="{x:Type ContextMenu}">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ContextMenu}">
                            <Border BorderThickness="10" x:Name="Border"  >
                                <StackPanel ClipToBounds="True" Orientation="Vertical"
                         IsItemsHost="True"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter TargetName="Border" Property="Background" Value="#5082a4" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type MenuItem}">
                <Setter Property="Background"
                    Value="#0f3c5a"></Setter>
                <Setter Property="Foreground"
                    Value="White"></Setter>
                <Style.Triggers>
                    <Trigger Property="IsHighlighted"
                         Value="True">
                        <Setter Property="Background"
                            Value="Black"></Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled"
                         Value="False">
                        <Setter Property="Foreground"
                            Value="LightGray"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </UserControl.Resources>
       
            <Grid Height="auto">
            <Canvas x:Name="dragSelectionCanvas"
        Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center">
                <!--<Border x:Name="dragSelectionBorder" BorderBrush="Blue" BorderThickness="1" Background="LightBlue" CornerRadius="1" Opacity="0.5" Width="100" Height="100" />-->
                <Rectangle x:Name="selectionBox" StrokeDashArray="0.5 1.0 0.3" Stroke="Black" StrokeThickness="2" RadiusX="10" RadiusY="10"  Visibility="Collapsed"/>
            </Canvas>


            <telerik:RadCartesianChart x:Name="xCartesianGraph">
                <telerik:RadCartesianChart.ContextMenu>
                    <ContextMenu Background="Cyan">
                        <ContextMenu.Items>
                            <MenuItem Header="AutoScale" Command="{Binding AutoScaleCommand}" />
                            <MenuItem Header="Grid" Command="{Binding GraphCommand}" />
                            <MenuItem Header="Cursor" Command="{Binding CursorCommand}"  />
                        </ContextMenu.Items>
                    </ContextMenu>
                </telerik:RadCartesianChart.ContextMenu>

                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartPanAndZoomBehavior PanMode="Both" ZoomMode="Both" />
                </telerik:RadCartesianChart.Behaviors>

                <!--<telerik:RadCartesianChart.TrackBallLineStyle>
                    <Style TargetType="Polyline" >
                        <Setter Property="Visibility" Value="Visible"  />
                    </Style>

                </telerik:RadCartesianChart.TrackBallLineStyle>-->
                <telerik:RadCartesianChart.TrackBallInfoStyle>
                    <Style TargetType="telerik:TrackBallInfoControl">
                        <Setter Property="DataPointInfoTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <StackPanel Background="Lavender" Orientation="Horizontal" >
                                        <TextBlock Text="{Binding Path=DisplayHeader}" Margin="6" FontFamily="Segoe UI" Foreground="DarkBlue" />
                                        <TextBlock Text=":" Margin="6" Foreground="Brown" />
                                        <TextBlock Text="{Binding Path=DataPoint.Value}" Margin="6" FontFamily="Segoe UI" Foreground="DarkBlue" />
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="HeaderTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <StackPanel Background="Lavender" Orientation="Horizontal">
                                        <TextBlock Text="{Binding}"  FontFamily="Segoe UI" Foreground="DarkBlue"  />
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </telerik:RadCartesianChart.TrackBallInfoStyle>

              
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid>
                        <telerik:CartesianChartGrid.Style>
                            <Style TargetType="telerik:CartesianChartGrid">
                                <Setter Property="MajorXLineDashArray" Value="10,5"/>
                                <Setter Property="MajorYLineDashArray" Value="10,5"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=DisplayGridLines}" Value="True">
                                        <Setter Property="MajorLinesVisibility" Value="XY"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </telerik:CartesianChartGrid.Style>
                     
                        <telerik:CartesianChartGrid.MajorXLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Stroke" Value="DarkGray"/>
                            </Style>
                            
                        </telerik:CartesianChartGrid.MajorXLineStyle>
                        
                        <telerik:CartesianChartGrid.MajorYLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Stroke" Value="DarkGray"/>
                            </Style>
                        </telerik:CartesianChartGrid.MajorYLineStyle>
                    </telerik:CartesianChartGrid>
                </telerik:RadCartesianChart.Grid>

                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="verticalAxis"/>
                </telerik:RadCartesianChart.VerticalAxis>
            
                    <telerik:RadCartesianChart.HorizontalAxis>
                    <!--<telerik:CategoricalAxis Title="Time" Foreground="Black" MajorTickInterval="500"/>-->
                    <!--<telerik:CategoricalAxis Title="Time" Foreground="Black" MajorTickInterval="5"/>-->
                    <telerik:CategoricalAxis x:Name="horizontalAxis"/>
                </telerik:RadCartesianChart.HorizontalAxis>
            </telerik:RadCartesianChart>

        </Grid>
        
    </UserControl>

    Please do reply ASAP.
  8. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 09 Jul 2013 Link to this post

    Hi Supriya,

     By default Cartesian Gridlines are drawn for the default (the first) Vertical Axis of your chart. So it won't be difficult to you to turn on the major lines visibility on Button click. All you have to do is to set the MajorLinesVisibility enum to XY. You can read more about CartesianChartGrid Striplines and Gridlines in our documentation here.

    Regards,
    Evgenia
    Telerik

    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    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. Ashok
    Ashok avatar
    1 posts
    Member since:
    Nov 2013

    Posted 17 Nov 2013 Link to this post

    how to draw dash line graph
  10. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 20 Nov 2013 Link to this post

    Hi Ashok,

    You can use Custom line annotation to achieve that. Besides the HorizontalFrom/To and VerticalFrom/To properties that are used for defining the line, the CartesianCustomLineAnnotation exposes DashArray property that is a collection of System.Double values that indicate the pattern of dashes and gaps that is used to outline the border of the marked zone. For example:

    <telerik:CartesianCustomLineAnnotation HorizontalFrom="0.0" VerticalFrom="2.25"
                                           HorizontalTo="3.75" VerticalTo="2.25"
                                           Stroke="CornflowerBlue"
                                           StrokeThickness="3"
                                           DashArray="8 4 2 3"/>

    Regards,
    Evgenia
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    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 >>
  11. Richard
    Richard avatar
    11 posts
    Member since:
    Jul 2014

    Posted 28 Oct 2014 in reply to Evgenia Link to this post

    This link is broken! 
    http://www.telerik.com/help/silverlight/radchartview-features-annotations.html#annotationTypes-GridLine-Comparison
  12. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 29 Oct 2014 Link to this post

    Hello Richard,

    Thank you for the report.

    You can find the GridLine Annotations article on the following link.

    Regards,
    Martin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 27 May 2015 in reply to Martin Link to this post

    Hi,

     

    I am uisng cartesian chart.

     

    please find the attached screenshot.

     

    i wan tto add always one additional y axis point in my graph.

     

    like 0,50,100,150,200  ..i want to add one more 250.

    please help me on this

  14. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 28 May 2015 Link to this post

    Hi Sai,

    You can control the range of the chart's LinearAxis (the vertical axis in your case) by using its Minimum, Maximum and MajorStep properties. To add label on 250 you can set the Maximum to 250. However, keep in mind that the chart will distribute its labels evenly. If you want to have a label that is positioned on a value which is not multiple of the MajorStep you can use a custom annotation instead.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 28 May 2015 in reply to Martin Link to this post

    I am creating the chart dynamically.

     

    i this case howw i can control setting minimum and maximum.?

  16. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 28 May 2015 in reply to Martin Link to this post

    please let me know how to raduce the space between the graph and label.

     

    please check attached screenshot

  17. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 28 May 2015 Link to this post

    Hi Sai,

    If you have any questions that are not related to the original question in this forum thread (Grid Lines for multiple y-axis) I would ask you to open a new forum and ask it there. Also, if you have several questions that are not related to one another I recommend you to open new forums for each one. This way our community will be organized better and the search in the forums will be easier.

    About your requirements:
    • I am creating the chart dynamically. In this case howw i can control setting minimum and maximum.?
      You can set the Maximum property in code in the following manner: 
      var verticalAxis = new LinearAxis();
      // code for defining the axis and setting it on the chart
      verticalAxis.Maximum = 250;
    • please let me know how to raduce the space between the graph and label.
      The space between the data point (the bar in this case) and its label is determined by the Margin of the series' label definition. To reduce the space you will need to define a LabelDefinition for the series and set its Margin to the desired value. For example:
      var definition = new ChartSeriesLabelDefinition() { Margin = new Thickness(0, 0, 0, 5) };
      series.LabelDefinitions.Add(definition);

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 28 May 2015 in reply to Martin Link to this post

    Hi Martin,

     i will follow as per your work nature.

    Tanx for your quick responce.

     

    the space issue is fixed with your solution.thanks alot

     

    but the other issue.providing additioanl level of y axis.your solution didnt help me more.

     

    please find the attached screen shots.

     

    i ma creating charts dynamically in code behind.using radcartesian chart.

     

    i cant fix the maximum .

     

    but always i need one additional y axis level in the charts.

  19. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 02 Jun 2015 Link to this post

    Hello Sai,

    I am afraid that without setting the Maximum of the axis you won't be able to extend it ("include additional level"). If you want to achieve this because the series' labels are clipped, you can consider setting the ClipToPlotArea property of the series to False. This way the labels won't be clipped when they reach the end of the plot area. 
    <telerik:BarSeries ClipToPlotArea="False" />
    Another approach that you can use is to apply a smart labels strategy.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  20. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 04 Jun 2015 in reply to Martin Link to this post

    Thank you.

     

    Its worked fine

Back to Top
UI for WPF is Visual Studio 2017 Ready