how speed up a rendering of the radchart

[Sargis]

Hi,
I have created 3 charts with the data more of than 1000 records, where only 20 data points are shown, and I need to scroll them every 5 second.
I'm using scroll & zoom mechanism and on each clock event (5 seconds) I scroll it by one position.
My problem is that during rendering these 3 charts I'm getting a freeze effect (nearly 1 second).
Please can you help me to somehow speed up this rendering. I tried use threading mechanism, but it didn't help, as the rendering of UI is doing by one Silverlight UI Thread.

Thanks.

[Evgenia]

Hello Sargis,

Why don't you take a look at our Live Data demo with full source code? It updates the Series dynamically on every 0.5 sec by adding 1 DataPoint (the Chart looks like it's scrolling).

Kind regards,
Evgenia
the Telerik team

[Sargis]

Hi Evgenia,

Thanks for reply,
I took a look at this demo and found many interesting aspects which I used in my control, even I tried instead of my charts use the same chart as in this Live demo. For one instance it works properly, but when I add the second(third) instance of the same chart it starts again to freeze.

Regards,
Sargis

[Evgenia]

Hello Sargis,

We reccomend that you follow the Performance tips and tricks as described in our help topic. For Line series - turn off visibility of PointMarks and Labels.

Greetings,
Evgenia
the Telerik team

[Sargis]

Thank you Evgenia.

[Jordan]

Hi Evgenia, you have pointed us to here, thanks. On that page is the following hint. I am not clear how to accomplish this:

Simplify the chart ControlTemplate - If you cannot reduce the number of data points, you will need to simplify the chart ControlTemplate. For example the Bar Template contains masks which can be removed (as their purpose is to beautify the control but this slows down the performance when you have many data points in series). You can extract the templates from your current version of our controls using Expression Blend as shown in our help topic Editing Control Templates in Expression Blend.

I would like more step by step on how to extract the Bar Template, and what the masks are that can be removed. I did manage to extract the below, but I'm not sure if I extracted the right thing. I commented out almost all of it and got no performance improvement with my +1000 bars chart.

 

    <Style x:Key="BarStyleSimple" TargetType="{x:Type
telerik:Bar}"><BR>      <Setter
Property="Template"><BR>
   <Setter.Value><BR>
    <ControlTemplate TargetType="{x:Type
telerik:Bar}"><BR>         <Canvas
x:Name="PART_MainContainer" Opacity="0"><BR>
      <Canvas.RenderTransform><BR>
       <ScaleTransform
ScaleY="0"/><BR>
      </Canvas.RenderTransform><BR>
      <VisualStateManager.VisualStateGroups><BR>
       <VisualStateGroup
x:Name="HoverStates"><BR>
        <VisualState
x:Name="Normal"><BR>
         <Storyboard><BR>
          <DoubleAnimation
Duration="0:0:0.15" To="1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PART_MainContainer"/><BR>
         </Storyboard><BR>
        </VisualState><BR>
        <VisualState
x:Name="Hovered"><BR>
         <Storyboard><BR>
          <DoubleAnimation
Duration="0:0:0.15" To="1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PART_MainContainer"/><BR>
         </Storyboard><BR>
        </VisualState><BR>
        <VisualState
x:Name="Hidden"><BR>
         <Storyboard><BR>
          <DoubleAnimation
Duration="0:0:0.15" To="0.15" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PART_MainContainer"/><BR>
         </Storyboard><BR>
        </VisualState><BR>
       </VisualStateGroup><BR>
       <VisualStateGroup
x:Name="SelectionStates"><BR>
        <VisualState
x:Name="Unselected"/><BR>
        <VisualState
x:Name="Selected"><BR>
         <Storyboard><BR>
          <ObjectAnimationUsingKeyFrames
Duration="0:0:0.05" Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="PART_SelectedState"><BR>
           <DiscreteObjectKeyFrame
KeyTime="0"><BR>
            <DiscreteObjectKeyFrame.Value><BR>
             <SolidColorBrush
Color="#B2000000"/><BR>
            </DiscreteObjectKeyFrame.Value><BR>
           </DiscreteObjectKeyFrame><BR>
          </ObjectAnimationUsingKeyFrames><BR>
          <ObjectAnimationUsingKeyFrames
Duration="0:0:0.05" Storyboard.TargetProperty="StrokeThickness"
Storyboard.TargetName="PART_SelectedState"><BR>
           <DiscreteObjectKeyFrame
KeyTime="0"><BR>
            <DiscreteObjectKeyFrame.Value><BR>
             <System:Double>2</System:Double><BR>
            </DiscreteObjectKeyFrame.Value><BR>
           </DiscreteObjectKeyFrame><BR>
          </ObjectAnimationUsingKeyFrames><BR>
         </Storyboard><BR>
        </VisualState><BR>
       </VisualStateGroup><BR>
      </VisualStateManager.VisualStateGroups><BR>
      <Rectangle x:Name="PART_DefiningGeometry"
Height="{TemplateBinding ItemActualHeight}" RadiusY="0" RadiusX="0"
Style="{TemplateBinding ItemStyle}" Width="{TemplateBinding
ItemActualWidth}"/><BR>
      <Rectangle Height="{TemplateBinding
ItemActualHeight}" OpacityMask="Black" RadiusY="0" RadiusX="0"
Stroke="Transparent" StrokeThickness="0" Width="{TemplateBinding
ItemActualWidth}"><BR>
       <Rectangle.Fill><BR>
        <LinearGradientBrush
EndPoint="1,0.5" StartPoint="0,0.5"><BR>
         <GradientStop
Color="Transparent"/><BR>
         <GradientStop
Color="Transparent" Offset="1"/><BR>
         <GradientStop
Color="#19FFFFFF" Offset="0.2"/><BR>
         <GradientStop
Color="#B2FFFFFF" Offset="0.2"/><BR>
        </LinearGradientBrush><BR>
       </Rectangle.Fill><BR>
      </Rectangle><BR>
      <Rectangle x:Name="PART_SelectedState"
Fill="Transparent" Height="{TemplateBinding ItemActualHeight}" RadiusY="0"
RadiusX="0" Width="{TemplateBinding ItemActualWidth}"/><BR>
     </Canvas><BR>
    </ControlTemplate><BR>
   </Setter.Value><BR>
  </Setter><BR>     </Style>

[Sia]

Hello Jordan,

Below is the simplified bar series style:

<Style x:Key="CustomBar" TargetType="telerik:Bar">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:Bar">
                <Canvas Opacity="0"  x:Name="PART_MainContainer">
                    <Rectangle x:Name="PART_DefiningGeometry"
                        Height="{TemplateBinding ItemActualHeight}"
                        Width="{TemplateBinding ItemActualWidth}"
                        Style="{TemplateBinding ItemStyle}"/>
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                    </Canvas.RenderTransform>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Please do not forget to stop the animations by setting:

Chart.DefaultView.ChartArea.EnableAnimations = false;

Best wishes,
Sia
the Telerik team