Migrating RadCharts to Q3 2011

[Aaron]

Hi,

I just downloaded and updated my Telerik (Silverlight) controls library to the latest drop (Q3 2011) for an existing project which was using the Q1 2011 assemblies prior to the upgrade. The project compiles without any errors but unfortunately all the RadCharts are now broken. I have not changed any codes or configurations and cannot see any run-time errors int the "Output" log.

On some charts, I also got a ChartException during run-time.

Theming: Required resource not found. Please, make sure you referenced all necessary themes and resources.

These charts I have noticed, have their DataSeries declared in the ViewModel and bound to the RadChart.

Things I have tried:
1. The Telerik Silverlight upgrade wizard (no warnings or errors).
2. Clean + rebuild project.
3. Removed all Telerik assembly references + re-added.
4. Created a new project with a sample chart from http://www.telerik.com/help/silverlight/radchart-getting-started-create-data-bound-chart.html and this seems to work as the example but I could not replicate it in my existing project.

I have also attached two images showing the before and after upgrade.

[Sia]

Hello Aaron,

The experienced issue is due to some changes in the styling mechanism in the latest version of the control. When creating the chart instance in code-behind you would need to move the configuration code to the RadChart.Loaded event handler.

RadChart chart = new RadChart();
chart.Loaded += (sender, args) =>
{
    ....
   chart.DefaultView.ChartArea.DataSeries.Add(series);
};

Please excuse us for the inconvenience caused and let us know whether this solves your problem.

Kind regards,
Sia
the Telerik team

[Aaron]

Hi,

Unfortunately, the suggested solution has not worked for the following reasons:

1. The charts that throws the ChartException binds to a SeriesMappingCollection in my ViewModel (see code snippet).
2. The charts that do not throw the ChartException is still broken.

// View Model
private SeriesMappingCollection _barSeries;
public SeriesMappingCollection BarSeries
{
  get { return _barSeries; }
  set
  {
    if (_barSeries != value)
    {
      _barSeries = value;
      RaisePropertyChanged(() => BarSeries); // ChartException was throw here.
    }
  }
}

// View
<telerik:RadChart SeriesMapping="{Binding BarSeries}" ... />

Things I have tried since the initial post:

1. I was using a custom theme (using the Telerik approach), so instead of my theme, I set the application theme to a Telerik built-in theme. This seems to work for the charts that do not throw the ChartException. So how can I get my custom theme to work with the Q3 2011 RadCharts?

// From this (EcoviewDark is my custom theme)
StyleManager.ApplicationTheme = new EcoviewDark();

// To this...
StyleManager.ApplicationTheme = new Expression_DarkTheme();

2. I review the tutorial on creating a custom theme for RadChart but found that this did not help because my custom theme does not override the existing theme (ie. Expression_Dark) but simply links to the the built-in theme (see code/image).

<!-- Telerik.Windows.Controls.Charting.xaml -->
<ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Expression_Dark;Component/Themes/Expression/Dark/Charting.xaml" />
        <ResourceDictionary Source="/Telerik.Windows.Themes.Expression_Dark;Component/Themes/Expression/Dark/Charting.3D.xaml" />
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

3. Moved all charts configuration into the Loaded event to no avail. Chart still throws exception.

[Aaron]

Are there any solutions or work-around to this problem? Would appreciate any suggestions.

[Sia]

Hello,

Please excuse us for the late reply. Unfortunately the problem with the missing bars is caused by change in our code which was needed.

Now in order to get your bars visible, you need to:

1. Extract the storyboards related to the animations in a new resource dictionary
2. Merge them in the chart's resources.

   <telerikCharting:RadChart.Resources>
       <ResourceDictionary>
           <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="/MyTheme;component/Themes/Resources.xaml" />
           </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>
   </telerikCharting:RadChart.Resources>

Please try this and share with us the result.

Regards,
Sia
the Telerik team

[Aaron]

I have copied the animation storyboards across but the chart is still throwing the

ChartException "Theming: Required resource not found. Please, make sure you referenced all necessary themes and resources."

How do I fix this?

[Sia]

Hello Aaron,

Please open a formal support ticket with a sample project attached. In that way we will be able to find what causes your problem in a timely manner.

Thank you in advance,
Sia
the Telerik team

[Aaron]

Hi there,

I have finally found the solution to migrating RadCharts to Q3 2011. Below will be the step-by-step process I took for anyone else that are experiencing the same problems. I will also list the symptoms that people might encounter with RadChart during their migration to Q3 2011 and the solution following.

Custom Theme for RadChart Q3 2011

Symptom: When using custom themes (Telerik approach), bar, pie or lines are not visible even when the chart contains data and seems to have loaded without any errors or exceptions.

Diagnosis: From what I have been made aware of the Q3 2011 release is that there has been changes made to the theming mechanism of Telerik controls. This means that you will be required to perform an additional step when using custom themes for RadChart. The step is indeed mentioned here in Telerik's documentation, however, the documentation is not completely clear (IMO).

Solution: Here are the steps you need to take to migrate custom themes for RadChart to Q3 2011.

1. Create a new resource file in your theme project and give it a meaningful name (e.g. Telerik.Windows.Controls.Charting.Resources.xaml).
2. Copy and paste all the XAML animation code from here into that resource file.
3. Find and replace the string sequence "My" with the name of your custom theme (omitting "Theme" if your theme name ends with "Theme"). This step is also mentioned in the documentation.
4. Open your Silverlight application's App.xaml and merge the newly created resource in. See code sample below.

<ResourceDictionary.MergedDictionaries>
    <!--Animations for charts backwards compatibility -->
    <ResourceDictionary Source="/MyCustomTheme;Component/Themes/Telerik.Windows.Controls.Charting.Resources.xaml" />
</ResourceDictionary.MergedDictionaries>

Custom RadChart for Q3 2011

Symptom: Custom charts (user custom control that inherit or extends RadChart) will not load and throws an exception.

Diagnosis: The style of RadChart has changed from Q3 2011 to previous versions, now requiring additional resources and containing more "named parts". This means that if you have created a custom control (AKA. templated control) that inherit from RadChart, you will need to also update your control style and template accordingly. Failing to do so will reward you with the following run-time exception:

ChartException "Theming: Required resource not found. Please, make sure you referenced all necessary themes and resources."

Solution: Here I will try to keep the steps as simple and as clear as possible because this solution will be different for each case and is dependent on the complexity of your styling.

1. Open your custom control style (typically located under Themes/MyCustomChart.xaml of your control library) and compare it to the default styling of the RadChart in Q3 2011. You will notice that there are a few differences in the chart's control template.
2. Depending on how complex you have styled your custom chart, try to merge the differences between your style and the default RadChart style in Q3 2011. You can use a "diff tool" such as WinMerge to assist you. In my case, my custom style was not complex so my best option was to completely copy the default style (including any resources) for RadChart and make the modifications required to get it back to my original chart style.
3. Make certain that the new style targets your custom control and not the default "telerik:RadChart". See code sample below.

<Style TargetType="charts:MyCustomChart" >

This concludes my RadChart migration guide. I hope you find this helpful and please comment/add on any additional hints and gotchas that you may find to help others that are experiencing the same issues relating to migrating RadChart to Q3 2011.

[Sia]

Hello Aaron,

We are happy to hear that you managed to resolve your problems.
Please find your telerik points updated in acknowledgment of your detailed feedback.

Kind regards,
Sia
the Telerik team

[Alessio]

Hi,
i have the same problem with a ChartArea embedded in a custom ContentControl.
When i try to add dataseries i get the same exception..
I didn't apply any custom theme...is there any solution?

[Sia]

Hello,

As mentioned below you need to move the configuration code to the RadChart.Loaded event handler. If this does not help, please send us a small runnable project, which reproduces the discussed problem.

Greetings,
Sia
the Telerik team