RadChart Binding SeriesMapping and UseDefaultLayout=False results in "No Data Series"

3 posts, 1 answers
  1. Aaron Jackson
    Aaron Jackson avatar
    4 posts
    Member since:
    Apr 2010

    Posted 17 Apr 2013 Link to this post

    When using the RadChart with UseDefaultLayout="True" the data binding works great.   Here is the successful XAML:
    <telerik:RadChart Grid.Row="0" ItemsSource="{Binding ChartData}" SeriesMappings="{Binding SeriesMappings}" UseDefaultLayout="True">
        <telerik:RadChart.DefaultView>
            <telerik:ChartDefaultView>
                <telerik:ChartDefaultView.ChartArea>
                    <telerik:ChartArea LegendName="chartLegend">
                        <telerik:ChartArea.AxisX>
                            <telerik:AxisX LabelRotationAngle="-45" DefaultLabelFormat="{Binding GraphXAxisLabelFormat}" />
                        </telerik:ChartArea.AxisX>
                        <telerik:ChartArea.AdditionalYAxes>
                            <telerik:AxisY Title="Dollars ($)" AxisName="AxisY_LineAccountGroup" />
                        </telerik:ChartArea.AdditionalYAxes>
                    </telerik:ChartArea>
                </telerik:ChartDefaultView.ChartArea>
                <telerik:ChartDefaultView.ChartLegend>
                    <telerik:ChartLegend x:Name="chartLegend" />
                </telerik:ChartDefaultView.ChartLegend>
            </telerik:ChartDefaultView>
        </telerik:RadChart.DefaultView>
    </telerik:RadChart>

    However, when UseDefaultLayout="False" and a layout is provided the chart doesn't bind correctly and I just get "No Data Series" message.  Here is the code that is broken:

    <telerik:RadChart Grid.Row="0"
              ItemsSource="{Binding ChartData}"  UseDefaultLayout="False" SeriesMappings="{Binding SeriesMappings}">
     
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
      
            <telerik:RadExpander IsExpanded="False" ExpandDirection="Right"
                                 HorizontalAlignment="Left" VerticalContentAlignment="Stretch"
                                 MaxWidth="250" Grid.Column="0" >
                <telerik:RadExpander.Header>
                    <TextBlock Text="Legend" />
                </telerik:RadExpander.Header>
                <telerik:RadExpander.Content>
                    <ScrollViewer>
                        <telerik:ChartLegend x:Name="lineGraphLegend" Header="" VerticalAlignment="Stretch"  />
                    </ScrollViewer>
                </telerik:RadExpander.Content>
            </telerik:RadExpander>
         
            <Grid Margin="10,10,10,10" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
         
                <telerik:ChartTitle Margin="0,0,0,0" HorizontalAlignment="Center"
                                Grid.Row="0" Grid.Column="0" BorderThickness="0" Background="Transparent" Foreground="Black" BorderBrush="Transparent" OuterBorderThickness="0">
                    <telerik:ChartTitle.Content>
                        <TextBlock FontSize="18" Text="{Binding ElementName=PerformanceMeasuresLargeViewControl, Path=DataContext.ChartTitle}" />
                    </telerik:ChartTitle.Content>
                </telerik:ChartTitle>
                 
                <telerik:ChartArea x:Name="lineGraphChartArea" LegendName="lineGraphLegend"
                               HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                               Grid.Row="1" Grid.Column="0">
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX LabelRotationAngle="-45" DefaultLabelFormat="{Binding GraphXAxisLabelFormat}" />
                    </telerik:ChartArea.AxisX>
                    <telerik:ChartArea.AdditionalYAxes>
                        <telerik:AxisY Title="Dollars ($)" AxisName="AxisY_LineAccountGroup" />
                    </telerik:ChartArea.AdditionalYAxes>
                </telerik:ChartArea>
            </Grid>
        </Grid>
    </telerik:RadChart>
  2. Answer
    Peshito
    Admin
    Peshito avatar
    496 posts

    Posted 19 Apr 2013 Link to this post

    Hello,

    There is an issues when databinding the chart in some non-default layout scenarios.

    Could you please try setting the SeriesMapping.ItemsSource property for each individual series mapping instead of using RadChart.ItemsSource, thus populating each series separately.

    Hope this helps.

    Kind regards,
    Peshito
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Aaron Jackson
    Aaron Jackson avatar
    4 posts
    Member since:
    Apr 2010

    Posted 19 Apr 2013 Link to this post

    Thank you! That fixed it.

    For those interested this is the fixed XAML:

    <telerik:RadChart Grid.Row="0" UseDefaultLayout="False">
           
                  <Grid>
                      <Grid.RowDefinitions>
                          <RowDefinition />
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto"/>
                          <ColumnDefinition />
                      </Grid.ColumnDefinitions>
                
                      <telerik:RadExpander IsExpanded="False" ExpandDirection="Right"
                                           HorizontalAlignment="Left" VerticalContentAlignment="Stretch"
                                           MaxWidth="250" Grid.Column="0" >
                          <telerik:RadExpander.Header>
                              <TextBlock Text="Legend" />
                          </telerik:RadExpander.Header>
                          <telerik:RadExpander.Content>
                              <ScrollViewer>
                                  <telerik:ChartLegend x:Name="lineGraphLegend" Header="" VerticalAlignment="Stretch"  />
                              </ScrollViewer>
                          </telerik:RadExpander.Content>
                      </telerik:RadExpander>
                   
                      <Grid Margin="10,10,10,10" Grid.Column="1">
                          <Grid.RowDefinitions>
                              <RowDefinition Height="Auto" />
                              <RowDefinition Height="*" />
                          </Grid.RowDefinitions>
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition />
                          </Grid.ColumnDefinitions>
                   
                          <telerik:ChartTitle Margin="0,0,0,0" HorizontalAlignment="Center"
                                          Grid.Row="0" Grid.Column="0" BorderThickness="0" Background="Transparent" Foreground="Black" BorderBrush="Transparent" OuterBorderThickness="0">
                              <telerik:ChartTitle.Content>
                                  <TextBlock FontSize="18" Text="{Binding ElementName=PerformanceMeasuresLargeViewControl, Path=DataContext.ChartTitle}" />
                              </telerik:ChartTitle.Content>
                          </telerik:ChartTitle>
     
                          <telerik:ChartArea x:Name="lineGraphChartArea"
                                                 HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                                 Grid.Row="1" Grid.Column="0">
                              <telerik:ChartArea.AxisX>
                                  <telerik:AxisX LabelRotationAngle="-45" DefaultLabelFormat="{Binding GraphXAxisLabelFormat}" />
                              </telerik:ChartArea.AxisX>
                              <telerik:ChartArea.AdditionalYAxes>
                                  <telerik:AxisY Title="Dollars ($)" AxisName="AxisY_LineAccountGroup" />
                              </telerik:ChartArea.AdditionalYAxes>
                          </telerik:ChartArea>
                      </Grid>
                  </Grid>
           
                  <telerik:RadChart.SeriesMappings>
                       
                      <telerik:SeriesMapping LegendLabel="Data Points" ChartAreaName="lineGraphChartArea"
                                     ItemsSource="{Binding ElementName=PerformanceMeasuresLargeViewControl, Path=DataContext.DataPointSeries}" >
                          <telerik:SeriesMapping.SeriesDefinition>
                              <telerik:LineSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True"
                                                            ItemToolTipFormat="Series: #SERIESLABEL\r\nDate: #DATAITEM.MonthYear{MMM yyyy}\r\nValue: #Y{#,###.##}" />
                          </telerik:SeriesMapping.SeriesDefinition>
                          <telerik:ItemMapping FieldName="MonthYear" DataPointMember="XCategory" />
                          <telerik:ItemMapping FieldName="Value" DataPointMember="YValue" />
                          <telerik:ItemMapping FieldName="MonthYear" DataPointMember="LegendLabel" />
                      </telerik:SeriesMapping>
     
                      <telerik:SeriesMapping LegendLabel="Line Account Group" ChartAreaName="lineGraphChartArea"
                                             ItemsSource="{Binding ElementName=PerformanceMeasuresLargeViewControl, Path=DataContext.LineAccountGroupSeries}" >
                          <telerik:SeriesMapping.SeriesDefinition>
                              <telerik:LineSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True"
                                                                    ItemToolTipFormat="Series: #SERIESLABEL\r\nDate: #DATAITEM.MonthYear{MMM yyyy}\r\nValue: #Y{#,###.##}" />
                          </telerik:SeriesMapping.SeriesDefinition>
                          <telerik:ItemMapping FieldName="MonthYear" DataPointMember="XCategory" />
                          <telerik:ItemMapping FieldName="Value" DataPointMember="YValue" />
                          <telerik:ItemMapping FieldName="MonthYear" DataPointMember="LegendLabel" />
                      </telerik:SeriesMapping>
     
                      <telerik:SeriesMapping LegendLabel="Benchmark" ChartAreaName="lineGraphChartArea"
                                                     ItemsSource="{Binding ElementName=PerformanceMeasuresLargeViewControl, Path=DataContext.BenchmarkSeries}" >
                          <telerik:SeriesMapping.SeriesDefinition>
                              <telerik:LineSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True"
                                                                            ItemToolTipFormat="Series: #SERIESLABEL\r\nDate: #DATAITEM.MonthYear{MMM yyyy}\r\nValue: #Y{#,###.##}" />
                          </telerik:SeriesMapping.SeriesDefinition>
                          <telerik:ItemMapping FieldName="MonthYear" DataPointMember="XCategory" />
                          <telerik:ItemMapping FieldName="Value" DataPointMember="YValue" />
                          <telerik:ItemMapping FieldName="MonthYear" DataPointMember="LegendLabel" />
                      </telerik:SeriesMapping>
     
          </telerik:RadChart.SeriesMappings>
     
           
     
      </telerik:RadChart>
Back to Top