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

Multiple Axes and shared with multiple series

6 Answers 135 Views
Chart for XAML
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jesper Vind
Top achievements
Rank 1
Jesper Vind asked on 27 Mar 2013, 10:58 AM
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.

6 Answers, 1 is accepted

Sort by
0
Accepted
Giuseppe
Telerik team
answered on 01 Apr 2013, 10:49 AM
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
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Jesper Vind
Top achievements
Rank 1
answered on 03 Apr 2013, 10:12 AM
That worked like charm and fixed my Problem.

Thank you very much.
0
Dennis
Top achievements
Rank 1
answered on 12 Apr 2013, 06:33 AM
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 
0
Ivaylo Gergov
Telerik team
answered on 15 Apr 2013, 07:18 AM
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
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Antonio
Top achievements
Rank 1
answered on 14 Jun 2013, 10:35 PM
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.
0
Ivaylo Gergov
Telerik team
answered on 17 Jun 2013, 01:40 PM
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
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Tags
Chart for XAML
Asked by
Jesper Vind
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Jesper Vind
Top achievements
Rank 1
Dennis
Top achievements
Rank 1
Ivaylo Gergov
Telerik team
Antonio
Top achievements
Rank 1
Share this question
or