[Solved] Adding a new Y Axis

[Sajida]

Hi Tsvyatko,

 

I already have a radcartesian chart and want to add a new Y axis to it. So as specified by you (in another thread) to use a series chart, I took a bar series inside the radcartesian chart.But still I am unable to add the new axis. Below is the code that I am using. Please let me know where I am going wrong. If not xaml please provide me code behind sample for adding new Y axis in C#.

<telerik:RadCartesianChart x:Name="barChart">  

<telerik:RadCartesianChart.HorizontalAxis>

 

<telerik:CategoricalAxis LabelFitMode="MultiLine"/> 

</telerik:RadCartesianChart.HorizontalAxis>

 

<telerik:RadCartesianChart.VerticalAxis>

 

<telerik:LinearAxis Maximum="100" Minimum="0" LineStyle="{StaticResource TransparentLine}" MajorTickStyle="{StaticResource TransparentRectangle}">

</telerik:LinearAxis>

 

</telerik:RadCartesianChart.VerticalAxis>

 

 <telerik:BarSeries>

<telerik:BarSeries.VerticalAxis>

<telerik:LinearAxis Maximum="100" Minimum="0" LineStyle="{StaticResource TransparentLine}" MajorTickStyle="{StaticResource TransparentRectangle}"/>

</telerik:BarSeries.VerticalAxis>

</telerik:BarSeries>

 

</telerik:RadCartesianChart>

 

Thanks in advance..

[Tsvyatko]

Hi Sajida,

 I have prepared sample project demonstrating  how to setup second axis. Note the following:

If series have its own axis defined, it will render according it. The axis defined in the chart will automatically attach to any series that have no axis defined. That being said if all series have its axes defined, the main axis will not render. So, If, for e.g., you want to render one series with two axes, you will need the following setup:

<telerik:RadCartesianChart x:Name="barChart" PaletteName="DefaultDark">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis LabelFitMode="MultiLine"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Maximum="100" Minimum="0" >
        </telerik:LinearAxis>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:BarSeries ItemsSource="{Binding Data2}" CombineMode="Cluster">
        <telerik:BarSeries.ValueBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="Amount"/>
        </telerik:BarSeries.ValueBinding>
        <telerik:BarSeries.CategoryBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="Category"/>
        </telerik:BarSeries.CategoryBinding>

    </telerik:BarSeries>
    <telerik:BarSeries>
        <telerik:BarSeries.VerticalAxis>
            <telerik:LinearAxis Maximum="100" Minimum="0" MajorStep="20"/>
        </telerik:BarSeries.VerticalAxis>
    </telerik:BarSeries>
</telerik:RadCartesianChart>

We are still considering some improvements in this direction, so this behavior might change for the official release (providing more intuitive option).

If you have any further questions or issues do not hesitate to contact us.
Regards,
Tsvyatko
the Telerik team

[Sajida]

Hi Tsvyatko,

I have tried to achieve the same functionality through C# code behind but I am getting an exception error. Please find below the xaml and C# code that I am using and let me know where I am going wrong. The bar is getting added for the data but I want the axis on the right hand side.

Xaml:

            <telerik:RadCartesianChart x:Name="barChart" >

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:CategoricalAxis LabelFitMode="MultiLine"/>  

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis Maximum="100" Minimum="0" LineStyle="{StaticResource TransparentLine}" MajorTickStyle="{StaticResource TransparentRectangle}">  

</telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

</telerik:RadCartesianChart>

C# code:

BarSeries series = new BarSeries();

series.CategoryBinding = new PropertyNameDataPointBinding("Date");

series.ValueBinding = new PropertyNameDataPointBinding("Value");

series.CombineMode = ChartSeriesCombineMode.Stack;

series.Transitions = transitions;

BarSeries s1 = new BarSeries();

s1.CategoryBinding = new PropertyNameDataPointBinding("Date");

s1.ValueBinding = new PropertyNameDataPointBinding("Value");

s1.Transitions = transitions;

//(AxisType)s1.VerticalAxis = AxisType.Second;

 for (int i = 0; i < indicator.Count; i++)

{

value = Math.Round(indicator[i].Value);

if (value < 2)

{

value = random.Next(5, 10);

}

 series.DataPoints.Add(new CategoricalDataPoint() { Value = value, Category = MainViewModel.Instance.SelectedCountries[i].Name });

s1.DataPoints.Add(new CategoricalDataPoint() { Value = value, Category = MainViewModel.Instance.SelectedCountries[i].Name });

}

s1.VerticalAxis.VerticalLocation = AxisVerticalLocation.Top;

s1.VerticalAxis.HorizontalLocation = AxisVerticalLocation.Right;

this.barChart.Series.Add(s1);

this.barChart.Series.Add(series);

Please find below the attached screenshot of my requirement. I am using the beta release version and presently need to continue in beta version only as I have already started my work in beta release and cannot go to public release version right now.

Thanks in advance..

[Tsvyatko]

Hello Sajida,

The problem you were facing was due to the fact that the series defined had no axis attached and were still not attached to the chart. Thus this line throws null reference, since vertical was null:

s1.VerticalAxis.VerticalLocation = AxisVerticalLocation.Top;

Based on the code posted I have prepared sample project demonstrating how to achieve the desired result.

Let ask now if you have any further issues. All the best,
Tsvyatko
the Telerik team

[Sajida]

Hi Tsvyatko,

This is working fine now. Thank you :) .The problem was that I was initializing the axis in a different way so was unable to create it. Thank you very much for the help.