Grid Lines for multiple y-axis

[Supriya]

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.

[Evgenia]

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

[Supriya]

can u explain cartesian chart annotation with an example so that i can generate lies dynamically.

[Evgenia]

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

[Supriya]

thanks

[Supriya]

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.

[Evgenia]

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

[Ashok]

how to draw dash line graph

[Evgenia]

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

[Richard]

This link is broken! 
http://www.telerik.com/help/silverlight/radchartview-features-annotations.html#annotationTypes-GridLine-Comparison

[Martin Ivanov]

Hello Richard,

Thank you for the report.

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

Regards,
Martin
Telerik

 

 

[sai]

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

[Martin Ivanov]

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

[sai]

I am creating the chart dynamically.

 

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

[sai]

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

 

please check attached screenshot

[Martin Ivanov]

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

[sai]

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.

[Martin Ivanov]

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

[sai]

Thank you.

 

Its worked fine