Speed Chart with ControlTemplate

10 posts, 0 answers
  1. hal broad
    hal broad avatar
    7 posts
    Member since:
    May 2010

    Posted 07 Jul 2011 Link to this post

    I have a chart with one basic line series with 3500 points. I am using data binding and set the ItemsSource to my list of objects. I have turned off the labels, pointmarks and tooltips but  It still takes up to 15 seconds to render. I have read that I can remove some things using a control template and that this would speed it up. I dont know how to do this. Does anyone have an example?
    Thanks
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 13 Jul 2011 Link to this post

    Hi Hal Broad,

    This will usually render much much faster. Can you please post some code, ideally a small runnable sample so we can investigate what's going on?

    Best wishes,
    Vladimir Milev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for WPF is Visual Studio 2017 Ready
  4. Greg
    Greg avatar
    6 posts
    Member since:
    Mar 2011

    Posted 21 Jul 2011 Link to this post

    We, too, are looking for ways to simplify whichever control template we must to boost performance. Ours has multiple line series, around 10-15, each ending up with around 300 datapoints. They don't start out at 300 though, it takes a couple hours to get there. However, lag becomes noticeable at around 80 or so datapoints.

    We don't need any of the fluff - animations, tooltips, labels, etc. Just colored lines. We're not sure which template we should be overriding, though, nor how to do it.

    Do we make a new LineSeries control template? Or a DataPoint control template? Are there any examples of simple templates one could apply?

  5. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 26 Jul 2011 Link to this post

    Hi Greg,

    No need to edit a template. If you turn off animations, itemlabels, itemtooltips, pointmarks and turn off click events the chart will only generate a single polyline for each line series making the rendering process much faster.

    Best wishes,
    Vladimir Milev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. hal broad
    hal broad avatar
    7 posts
    Member since:
    May 2010

    Posted 26 Jul 2011 Link to this post

    Here is the xaml and code that i am using. I believe I am doing most of what you mentioned and it is still very slow (as i indicated in the original post). Please advise as to what I need to do to speed up the rendering. Thanks.

     <telerik:RadChart x:Name="radChart" UseDefaultLayout="False">
                                <telerikChart:RadChart.SamplingSettings>
                                    <telerikCharting:SamplingSettings SamplingThreshold="0" />
                                </telerikChart:RadChart.SamplingSettings>

                                <Grid x:Name="grdChart" Margin="10,10,0,20">
                                   <Grid.RowDefinitions>
                                    <RowDefinition x:Name="grdRowEC" Height="Auto" />
                                    <RowDefinition Height="8" />
                                    <RowDefinition x:Name="grdRowTemp" Height="Auto" />
                                    <RowDefinition Height="8" />
                                    <RowDefinition x:Name="grdRowMoist" Height="3*" />
                                </Grid.RowDefinitions>


                                    <Grid Grid.Row="0" x:Name="grdEC" Visibility="Collapsed" MinHeight="25">
                                        <telerik:ChartArea x:Name="chartEC" EnableAnimations="False" NoDataString="none">
                                            <telerik:ChartArea.AxisX>
                                                <telerik:AxisX x:Name="ecAxisX" AutoRange="False" Visibility="Collapsed" />
                                            </telerik:ChartArea.AxisX>
                                        </telerik:ChartArea>
                                        <Border CornerRadius="4" Background="{StaticResource ConductivityBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" Padding="3,0,3,0">
                                            <TextBlock Text="EC" FontWeight="Bold" Style="{StaticResource TextBlockDataLight}" />
                                        </Border>
                                    </Grid>
                                    <Thumb Grid.Row="1" x:Name="thumbEC" Height="8" Cursor="SizeNS" Background="{StaticResource MainWindowBackground}" DragDelta="thumbEC_DragDelta" Visibility="Collapsed"/>
                                    <Grid Grid.Row="2" x:Name="grdTemp" Visibility="Collapsed" MinHeight="25">
                                        <telerik:ChartArea x:Name="chartTemp" EnableAnimations="False" NoDataString="none">
                                            <telerik:ChartArea.AxisX>
                                                <telerik:AxisX AutoRange="False" x:Name="tempAxisX" Visibility="Collapsed"/>
                                            </telerik:ChartArea.AxisX>
                                        </telerik:ChartArea>
                                        <Border CornerRadius="4" Background="{StaticResource TemperatureBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" Padding="3,0,3,0">
                                            <TextBlock Text="Temperature" FontWeight="Bold" Style="{StaticResource TextBlockDataLight}" />
                                        </Border>
                                    </Grid>
                                    <Thumb Grid.Row="3" x:Name="thumbTemp" Height="8" Cursor="SizeNS" Background="{StaticResource MainWindowBackground}" DragDelta="thumbTemp_DragDelta" Visibility="Collapsed"/>
                                    <Grid Grid.Row="4" x:Name="grdMoist" Visibility="Visible" MinHeight="50">
                                        <telerik:ChartArea x:Name="chartMoist" EnableAnimations="False" NoDataString="none">
                                            <telerik:ChartArea.AxisX>
                                                <telerik:AxisX AutoRange="False" x:Name="moistAxisX" IsDateTime="True" DefaultLabelFormat="dd-MMM HH:mm" LabelRotationAngle="45" Step="0.2" LabelStep="2"/>
                                            </telerik:ChartArea.AxisX>
                                            <telerik:ChartArea.AxisY>
                                                <telerik:AxisY x:Name="axisMoist" AxisName="MoistureAxis" Visibility="Visible"/>
                                            </telerik:ChartArea.AxisY>
                                            <telerik:ChartArea.AdditionalYAxes>
                                                <telerik:AxisY x:Name="axisWaterCycle" AxisName="WaterCycleAxis" Visibility="Collapsed"/>
                                            </telerik:ChartArea.AdditionalYAxes>
                                        </telerik:ChartArea>
                                        <Border CornerRadius="4" Background="{StaticResource MoistureBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" Padding="3,0,3,0">
                                            <TextBlock Text="{lex:LocText AIM:History:Moisture}" FontWeight="Bold" Style="{StaticResource TextBlockDataLight}" />
                                        </Border>
                                    </Grid>
                                </Grid>
                                <telerikChart:RadChart.SeriesMappings>
                                    <telerik:SeriesMapping ChartAreaName="chartMoist" x:Name="seriesAutoWaterMapping">
                                        <telerik:SeriesMapping.SeriesDefinition>
                                            <telerik:StackedBar100SeriesDefinition x:Name="seriesAutoWater" ShowItemLabels="False" ShowItemToolTips="True" Visibility="Collapsed" ItemToolTipFormat="#DATAITEM.ToolTipText" AxisName="WaterCycleAxis">
                                            </telerik:StackedBar100SeriesDefinition >
                                        </telerik:SeriesMapping.SeriesDefinition>
                                        <telerik:ItemMapping DataPointMember="YValue" FieldName="Duration"  />
                                        <telerik:ItemMapping DataPointMember="XValue" FieldName="LogDateTime"/>
                                    </telerik:SeriesMapping>
                                    <telerik:SeriesMapping ChartAreaName="chartMoist" x:Name="seriesManualWaterMapping">
                                        <telerik:SeriesMapping.SeriesDefinition>
                                            <telerik:StackedBar100SeriesDefinition x:Name="seriesManualWater" ShowItemLabels="False" ShowItemToolTips="True" Visibility="Collapsed" ItemToolTipFormat="#DATAITEM.ToolTipText" AxisName="WaterCycleAxis">
                                            </telerik:StackedBar100SeriesDefinition >
                                        </telerik:SeriesMapping.SeriesDefinition>
                                        <telerik:ItemMapping DataPointMember="YValue" FieldName="Duration"  />
                                        <telerik:ItemMapping DataPointMember="XValue" FieldName="LogDateTime"/>
                                    </telerik:SeriesMapping>
                                    <telerik:SeriesMapping ChartAreaName="chartMoist" x:Name="seriesMoistureMapping" >
                                        <telerik:SeriesMapping.SeriesDefinition >
                                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" ShowItemToolTips="False" AxisName="MoistureAxis">
                                            </telerik:LineSeriesDefinition>
                                        </telerik:SeriesMapping.SeriesDefinition>
                                        <telerik:SeriesMapping.ItemMappings>
                                            <telerik:ItemMapping DataPointMember="YValue" FieldName="Acclima_Moisture"/>
                                            <telerik:ItemMapping DataPointMember="XValue" FieldName="LogDateTime"/>
                                        </telerik:SeriesMapping.ItemMappings>
                                    </telerik:SeriesMapping>
                                    <telerik:SeriesMapping ChartAreaName="chartTemp" x:Name="seriesTemperatureMapping">
                                        <telerik:SeriesMapping.SeriesDefinition >
                                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" ShowItemToolTips="False" >
                                            </telerik:LineSeriesDefinition>
                                        </telerik:SeriesMapping.SeriesDefinition>
                                        <telerik:SeriesMapping.ItemMappings>
                                            <telerik:ItemMapping DataPointMember="YValue" FieldName="Acclima_Temperature"/>
                                            <telerik:ItemMapping DataPointMember="XValue" FieldName="LogDateTime"/>
                                        </telerik:SeriesMapping.ItemMappings>
                                    </telerik:SeriesMapping>
                                    <telerik:SeriesMapping ChartAreaName="chartEC" x:Name="seriesConductivityMapping" >
                                        <telerik:SeriesMapping.SeriesDefinition >
                                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" ShowItemToolTips="False" >
                                            </telerik:LineSeriesDefinition>
                                        </telerik:SeriesMapping.SeriesDefinition>
                                        <telerik:SeriesMapping.ItemMappings>
                                            <telerik:ItemMapping DataPointMember="YValue" FieldName="Acclima_Conductivity"/>
                                            <telerik:ItemMapping DataPointMember="XValue" FieldName="LogDateTime"/>
                                        </telerik:SeriesMapping.ItemMappings>
                                    </telerik:SeriesMapping>
                                </telerikChart:RadChart.SeriesMappings>
                            </telerik:RadChart>


    I am assigning click events so that i can see the underlying data :
               chartMoist.ItemClick += new EventHandler<ChartItemClickEventArgs>(ChartArea_ItemClick);
                chartTemp.ItemClick += new EventHandler<ChartItemClickEventArgs>(ChartArea_ItemClick);
                chartEC.ItemClick += new EventHandler<ChartItemClickEventArgs>(ChartArea_ItemClick);

    I am also using a timebar to allow the user top select date ranges on the chart. When the date range is changed, I call the following method to display the data on the chart:
    private void ShowData(Device dev)
            {
                try
                {
                    Cursor = Cursors.Wait;
                    brdrSensorReading.Visibility = System.Windows.Visibility.Collapsed; //areas to show underlying data
                    brdrWaterCycle.Visibility = System.Windows.Visibility.Collapsed;

                    if (dev != null)
                    {
                        chartMoist.NoDataString = AIM.Resources.History.LoadingData;
                        chartTemp.NoDataString = AIM.Resources.History.LoadingData;
                        chartEC.NoDataString = AIM.Resources.History.LoadingData;
                        
                        List<SensorLog> logs = GetData(dev.Id, timeBarChart.SelectionStart, timeBarChart.SelectionEnd);

                        moistAxisX.MinValue = timeBarChart.SelectionStart.ToOADate();
                        moistAxisX.MaxValue = timeBarChart.SelectionEnd.ToOADate();
                        ecAxisX.MinValue = moistAxisX.MinValue;
                        ecAxisX.MaxValue = moistAxisX.MaxValue;
                        tempAxisX.MinValue = moistAxisX.MinValue;
                        tempAxisX.MaxValue = moistAxisX.MaxValue;

                        radChart.ItemsSource = logs;
                    }
                }
                catch (Exception ex)
                {
                    log.ErrorFormat("ShowData err:{0}", ex.Message);
                }
                Cursor = Cursors.Arrow;
            }

  7. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 29 Jul 2011 Link to this post

    Hi Hal Broad,

    Ok Thanks for posting that. In addition to what I said in the last post please also turn off all item click events and make sure you don't add any interactivity settings. The reason for this is there is a piece of code inside RadChart which decides whether it can switch to the fast rendering mode. The check currently involves the following:

    return pointMarkDefinition.ShowItemLabels ||
                       pointMarkDefinition.ShowItemToolTips ||
                       pointMarkDefinition.ShowPointMarks ||
                       pointMarkDefinition.InteractivitySettings.SelectionScope != InteractivityScope.None ||
                       pointMarkDefinition.InteractivitySettings.HoverScope != InteractivityScope.None ||
                       this.ChartArea.ItemClickSubscribed > 0;

    So you see, if all the conditions I mentioned are met then "fast mode" (basically meaning that no individual series items will be generated) will be chosen for the rendering of the series. Give it a try and let me know how it works.

    P.S. You can verify it works by using a tool such as "Snoop" to check if the series have items generated at runtime.

    Best wishes,
    Vladimir Milev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  8. hal broad
    hal broad avatar
    7 posts
    Member since:
    May 2010

    Posted 29 Jul 2011 Link to this post

    How do I "turn off all item click events"? Do you mean that i shouldnt subscribe to them or is there another way?

    I want to allow the user to click on the series and see the data at that point in the series. If I turn off tooltips and disable all click events, is there a way to access the data for each point? 
  9. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 03 Aug 2011 Link to this post

    Hi Hal Broad,

    You shouldn't subscribe to the events. If you turn off all events and tooltips then you will not be able to access the datapoint which is under the mouse cursor. You will still have access to all chart elements and all datapoints and tickpoints, however, you will not know which ones the user has clicked/hovered.

    We are sincerely sorry if this causes any inconvenience. We are working on a long term solution to this problem.

    Kind regards,
    Vladimir Milev
    the Telerik team

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

  10. hal broad
    hal broad avatar
    7 posts
    Member since:
    May 2010

    Posted 03 Aug 2011 Link to this post

    The charting was the main reason I purchased the telerik suite and now I have to revert to winforms MSChart to get acceptable performance. That is very frustrating. You should refund my money.
  11. Hristo
    Admin
    Hristo avatar
    408 posts

    Posted 04 Aug 2011 Link to this post

    Hi Hal Broad,

    I clearly understand your point and I'm very sorry to hear that you are not satisfied with the current capabilities of RadChart for WPF. I should say that at first place our chart control was designed and developed to cover the common needs of our clients. Unfortunately that meant a chart control which should show simple scenarios (small sets of data, no frequent updates in the means of milliseconds, etc.) but at the same time very customizable. At the end we have very customizable appearance but this means performance hits when it comes to complex scenarios like in your case. The proposed resolutions till now are the best we can "squeeze" from RadChart for the time being.

    The good news is that we are planning great improvements in RadChart to address special cases like yours. We are optimistic that till the end of this year we will definitely have a lot better performing charts. I would greatly appreciate if you share with us all your requirements and needs in your project regarding the charting control. These will be very useful for us defining our future development plans.

    Thank you for your patience and understanding.

    Best wishes,
    Hristo
    the Telerik team

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

Back to Top
UI for WPF is Visual Studio 2017 Ready