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

RadChart X Axis label format won't work if it is in a template

4 Answers 233 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Sunny
Top achievements
Rank 1
Sunny asked on 31 Oct 2011, 05:08 PM
I have a line chart set to display datetime for X-Axis to display DefaultLabelFormat="#VAL{hh:mm:ss}" If the radchart is directly set in the xaml it works fine. However if it is in a datatemplate and rendered through a contentpresenter, it won;t work. even the title and legend won't show up neither. It always display the full date string which getting overlap. See the upper chart. ( In my case I have to put it into a template as that is part of the content in an itemscontrol, I had a hard time to find out that the template gets into the way.) Anybody run into similar issue? what is the solution?


Window x:Class="WpfApplication3.MainWindow"  

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 Title="MainWindow" Height="521" Width="525"

 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<Window.Resources >

     <DataTemplate x:Key="GraphTemplate" >   

<Grid >

   <telerik:RadChart Height="264" ItemsSource="{Binding DataList}" Margin="34,21,0,0" x:Name="radChart1" VerticalAlignment="Top" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">

     <telerik:RadChart.SeriesMappings >

         <telerik:SeriesMapping LegendLabel="T" >

             <telerik:SeriesMapping.SeriesDefinition >

                 <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />

             </telerik:SeriesMapping.SeriesDefinition>

             <telerik:SeriesMapping.ItemMappings >

                 <telerik:ItemMapping DataPointMember="XValue" FieldName="Dt" />

                 <telerik:ItemMapping DataPointMember="YValue" FieldName="Data" />

             </telerik:SeriesMapping.ItemMappings>

         </telerik:SeriesMapping>

     </telerik:RadChart.SeriesMappings>

     
    <telerik:RadChart.DefaultView >

         <telerik:ChartDefaultView >

             <telerik:ChartDefaultView.ChartArea >

                 <telerik:ChartArea >

                     <telerik:ChartArea.AxisX >

                         <telerik:AxisX DefaultLabelFormat="#VAL{hh:mm:ss}" LabelRotationAngle="70" LabelStep="2" Title="Time1" />

                     </telerik:ChartArea.AxisX>

                 </telerik:ChartArea>

             </telerik:ChartDefaultView.ChartArea>

         </telerik:ChartDefaultView>

     </telerik:RadChart.DefaultView>

 </telerik:RadChart>

 </Grid>

 </DataTemplate>

</Window.Resources>

 
<Grid x:Name="maingrid" Loaded="Grid_Loaded">

    <Grid.RowDefinitions>

        <RowDefinition />

         <RowDefinition />

     </Grid.RowDefinitions>

 
<!--going through the template will not get x_axis in correct format-->

<ContentPresenter Grid.Row="0" ContentTemplate="{StaticResource GraphTemplate}" Content="{Binding }" />

 <!--this will get the x-axis correct. the code is the same as what in the template-->

 <telerik:RadChart Grid.Row="1" Height="264" ItemsSource="{Binding DataList}" Margin="34,21,0,0" x:Name="radChart1" VerticalAlignment="Top" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">

     <telerik:RadChart.SeriesMappings >

        <telerik:SeriesMapping LegendLabel="T" >

        <telerik:SeriesMapping.SeriesDefinition >

            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />

             </telerik:SeriesMapping.SeriesDefinition>

         <telerik:SeriesMapping.ItemMappings >

             <telerik:ItemMapping DataPointMember="XValue" FieldName="Dt" />

             <telerik:ItemMapping DataPointMember="YValue" FieldName="Data" />

         </telerik:SeriesMapping.ItemMappings>

     </telerik:SeriesMapping>

 </telerik:RadChart.SeriesMappings>

 

<telerik:RadChart.DefaultView >

     <telerik:ChartDefaultView >

         <telerik:ChartDefaultView.ChartArea >

                <telerik:ChartArea >

                     <telerik:ChartArea.AxisX >

                         <telerik:AxisX DefaultLabelFormat="#VAL{hh:mm:ss}" LabelRotationAngle="70" LabelStep="2" Title="Time1" />

                     </telerik:ChartArea.AxisX>

             </telerik:ChartArea>

         </telerik:ChartDefaultView.ChartArea>

 </telerik:ChartDefaultView>

 </telerik:RadChart.DefaultView>

 </telerik:RadChart>

 </Grid>

</

Window>

 

4 Answers, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 03 Nov 2011, 03:00 PM
Hello Sunny,

Unfortunately I should confirm that there is a known problem when setting some of the properties in RadChart when it is in a datatemplate. The issue is logged in our Public Issues Tracking System.

As a workaround I can suggest you to wrap RadChart in a UserControl.

Kind regards,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Sunny
Top achievements
Rank 1
answered on 04 Nov 2011, 04:39 PM
Thanks Sia.
Do you mean to wrap RadChart in a usercontrol instead of DataTemplate? I need it to be in data template is because I need to put into an ItemsControl. Without the Datatemplate I need to set each item specifically for a long list? basically each item is the same that is why I need to use item template. Can you get more detail on the workaround? sample code will be appreciated.
We actually have another different case to develop a user control that contains RadChart. The RadChart within the user control is exposed as dependency property, and the user control plan to let the client set the chart (serialmappings, defaultviews....) but the client has a hard time to set the chart in xaml. Another post says XAML doesn't support multi-level property element syntax so far. Any suggestions?
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/01672fc3-baed-469c-a819-61d12ac94329/
0
Sia
Telerik team
answered on 09 Nov 2011, 03:15 PM
Hi Sunny,

I mean to wrap your RadChart in a UserControl and after that to wrap that UserControl in the mentioned DataTemplate:
<UserControl x:Class="WPFApplication1.RadChartUC"
         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Grid>
        <telerik:RadChart ItemsSource="{Binding ChartData}" SeriesMappings="{Binding ChartSeries}" />
    </Grid>
</UserControl>

<DataTemplate x:Key="MyTemplate"><uc:RadChartUC DataContext="{Binding}" /></DataTemplate>

Greetings,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Sunny
Top achievements
Rank 1
answered on 09 Nov 2011, 08:14 PM
thanks Sia, it works now.
Tags
Chart
Asked by
Sunny
Top achievements
Rank 1
Answers by
Sia
Telerik team
Sunny
Top achievements
Rank 1
Share this question
or