This is a migrated thread and some comments may be shown as answers.

Grid Lines for multiple y-axis

18 Answers 567 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

18 Answers, 1 is accepted

answered on 04 Jul 2013, 12:58 PM

Untitled.png

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">
            
            <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.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 x:Name="horizontalAxis"/>
            </telerik:RadCartesianChart.HorizontalAxis>
        </telerik:RadCartesianChart>

    </Grid>

</UserControl>

Please do reply ASAP.

answered on 20 Nov 2013, 03:39 PM

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 >>

answered on 27 May 2015, 09:31 AM

capture.png

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

answered on 28 May 2015, 07:57 AM

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

answered on 28 May 2015, 10:32 AM

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

answered on 28 May 2015, 10:50 AM

capture.png

capture1.png

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.

answered on 02 Jun 2015, 06:12 AM

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