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

[Aaron Jackson]

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>

[Peshito]

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

[Aaron Jackson]

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>