Multiple Axes and shared with multiple series

[Jesper Vind]

Hi

I have a RadCartesianChart with 6 LineSeries, now i want to add more VerticalAxis / LinearAxis.
I know i can add one VerticalAxis to one LineSeries by doing this, however i want two LineSeries to share one VerticalAxis.

Overall that would be 3 VerticalAxis in one RadCartesianChart, with 6 LineSeries in a group of 2 by 2

I tried to add a LinearAxis into the Resources:

<Chart:RadCartesianChart Grid.Row="1" PaletteName="DefaultDark" >
           <Chart:RadCartesianChart.Resources>
               <Chart:LinearAxis x:Name="foo">
               </Chart:LinearAxis>
           </Chart:RadCartesianChart.Resources>
           <Chart:RadCartesianChart.HorizontalAxis>
               <Chart:DateTimeContinuousAxis MaximumTicks="15" LabelFormat="{}{0:dd. MMM}"/>
           </Chart:RadCartesianChart.HorizontalAxis>
           <Chart:RadCartesianChart.VerticalAxis >
               <Chart:LinearAxis>
               </Chart:LinearAxis>
           </Chart:RadCartesianChart.VerticalAxis>

           <Chart:LineSeries CombineMode="None" StrokeDashArray="2" Stroke="#FFC200" ItemsSource="{Binding ElectroResult, Mode=TwoWay}">
               <Chart:LineSeries.ValueBinding>
                   <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
               </Chart:LineSeries.ValueBinding>
               <Chart:LineSeries.CategoryBinding>
                   <Chart:PropertyNameDataPointBinding PropertyName="Date"/>
               </Chart:LineSeries.CategoryBinding>

           </Chart:LineSeries>
           <Chart:LineSeries CombineMode="None" Stroke="#FFC200" ItemsSource="{Binding ElectroResult, Mode=TwoWay}" >
               <Chart:LineSeries.ValueBinding>
                   <Chart:PropertyNameDataPointBinding PropertyName="BudgetValue"/>
               </Chart:LineSeries.ValueBinding>
               <Chart:LineSeries.CategoryBinding>
                   <Chart:PropertyNameDataPointBinding PropertyName="Date"/>
               </Chart:LineSeries.CategoryBinding>
           </Chart:LineSeries>

         ........
</Chart:RadCartesianChart>

However, it i add the new LinearAxis to a LineSeries the programm chrashes on startup with an unidentified error.

<Chart:LineSeries CombineMode="None" StrokeDashArray="2" Stroke="#FFFF2A00" ItemsSource="{Binding HeatResult, Mode=TwoWay}" VerticalAxis="{StaticResource foo}">

Is it possible to share additional LinearAxis with multiple LineSeries?

Thanks in advance.

[Giuseppe]

Hello Henrik,

Thank you for your interest.

You can achieve the desired effect with the following XAML syntax or alternatively make the axis association in code behind:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="LayoutRoot">
    <Grid.Resources>
        <local:AxisCollection x:Key="axisCollection">
            <telerik:LinearAxis HorizontalLocation="Right" />
            <telerik:LinearAxis HorizontalLocation="Right" />
        </local:AxisCollection>
    </Grid.Resources>

    <telerik:RadCartesianChart x:Name="RadChart1" PaletteName="DefaultDark">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>

        <telerik:LineSeries>
            <telerik:LineSeries.DataPoints>
                <charting:CategoricalDataPoint Category="a" Value="1" />
                <charting:CategoricalDataPoint Category="a2" Value="2" />
                <charting:CategoricalDataPoint Category="a3" Value="3" />
                <charting:CategoricalDataPoint Category="a4" Value="4" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
        <telerik:LineSeries>
            <telerik:LineSeries.DataPoints>
                <charting:CategoricalDataPoint Category="a" Value="5" />
                <charting:CategoricalDataPoint Category="a2" Value="3" />
                <charting:CategoricalDataPoint Category="a3" Value="2" />
                <charting:CategoricalDataPoint Category="a4" Value="7" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>

        <telerik:LineSeries VerticalAxis="{Binding Source={StaticResource axisCollection}, Path=[0]}">
            <telerik:LineSeries.DataPoints>
                <charting:CategoricalDataPoint Category="a" Value="10" />
                <charting:CategoricalDataPoint Category="a2" Value="20" />
                <charting:CategoricalDataPoint Category="a3" Value="70" />
                <charting:CategoricalDataPoint Category="a4" Value="40" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
        <telerik:LineSeries VerticalAxis="{Binding Source={StaticResource axisCollection}, Path=[0]}">
            <telerik:LineSeries.DataPoints>
                <charting:CategoricalDataPoint Category="a" Value="20" />
                <charting:CategoricalDataPoint Category="a2" Value="30" />
                <charting:CategoricalDataPoint Category="a3" Value="50" />
                <charting:CategoricalDataPoint Category="a4" Value="10" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>

        <telerik:LineSeries VerticalAxis="{Binding Source={StaticResource axisCollection}, Path=[1]}">
            <telerik:LineSeries.DataPoints>
                <charting:CategoricalDataPoint Category="a" Value="200" />
                <charting:CategoricalDataPoint Category="a2" Value="210" />
                <charting:CategoricalDataPoint Category="a3" Value="270" />
                <charting:CategoricalDataPoint Category="a4" Value="240" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
        <telerik:LineSeries VerticalAxis="{Binding Source={StaticResource axisCollection}, Path=[1]}">
            <telerik:LineSeries.DataPoints>
                <charting:CategoricalDataPoint Category="a" Value="320" />
                <charting:CategoricalDataPoint Category="a2" Value="330" />
                <charting:CategoricalDataPoint Category="a3" Value="250" />
                <charting:CategoricalDataPoint Category="a4" Value="310" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>

    </telerik:RadCartesianChart>

</Grid>

Note that AxisCollection class is not part of the chart control but is part of the example and looks like this:

public class AxisCollection : Collection<Axis>
{
}

Hope this helps.

 

All the best,
Giuseppe
the Telerik team

[Jesper Vind]

That worked like charm and fixed my Problem.

Thank you very much.

[Dennis]

Hi,

I started working in Metro apps just now, it's totally new for  me in my dashboard i want to display combinational chart ( bar and line chart) i am using telerik xaml charts i get pie chart and bar charts, do you have any sample code for the combination charts in telerik pls share with some basics.

Thanks,
dennis kashi 

[Ivaylo Gergov]

Hi Dennis,

Thank you for contacting us.

I have attached a runnable sample application for RadCartesianChart with two series - BarSeries and LineSeries. To combine the series what you need is just to add their instances in one RadChart. Note that if you have multiple BarSeries or LineSeries instances you can control the way they combine through the CombineMode property (in this case BarSeries.CombineMode or LineSeries.CombineMode). You can also check our online help in order to get familiar with the architecture of our RadChart control.

I hope this information is useful. Let me know if you need further assistance.

 

Kind regards,
Ivaylo Gergov
the Telerik team

[Antonio]

Do you have a question?

As I make a graphic, type line.series, but that is his, which is filled with a list and with different color, that when you change the list also changes the lines.

Please I await your response.

Best regards.

[Ivaylo Gergov]

Hello Antonio,

As I am not sure what exactly you are trying to achieve, could you please clarify if this is related with the current thread? If not - could you please open another thread with more details about this matter? Also, a sample project with the current progress would be appreciated.

I am looking forward to your reply.

 

Regards,
Ivaylo Gergov
Telerik