RadChart not drawing all points, or

4 posts, 1 answers
  1. Jeroen
    Jeroen avatar
    49 posts
    Member since:
    Feb 2012

    Posted 19 Apr 2012 Link to this post

    I've got a RadChart with datetime values on the X axis (defined as double, converted with ToOADate), and doubles on the Y axis.

    <telerik:RadChart telerik:StyleManager.Theme="Expression_Dark"
                                                  HorizontalAlignment="Left"
                                                  Name="ChartJam"
                                                  VerticalAlignment="Stretch"
                                                  PaletteBrushesUseSolidColors="True"
                                                  Loaded="ChartJam_Loaded"
                                                       Height="Auto" MinHeight="100"
                                                       Width="Auto" MinWidth="200"
                                              Margin="0" BorderThickness="0"
                                                       Cursor="Hand">
                            <telerik:RadChart.DefaultView>
                                <telerik:ChartDefaultView>
                                    <telerik:ChartDefaultView.ChartArea>
                                        <telerik:ChartArea EnableAnimations="False" x:Name="MyChartArea"
                                                                   ItemToolTipOpening="ChartArea_ItemToolTipOpening">
                                            <telerik:ChartArea.AxisY >
                                                <telerik:AxisY Title="" AutoRange="True"
                                                                   StripLinesVisibility="Visible" MajorGridLinesVisibility="Visible">
                                                </telerik:AxisY>
                                            </telerik:ChartArea.AxisY>
                                            <telerik:ChartArea.Annotations>
                                            </telerik:ChartArea.Annotations>
                                            <telerik:ChartArea.AxisX>
                                                <telerik:AxisX IsDateTime="True"
                                                                   MajorGridLinesVisibility="Visible" MinorGridLinesVisibility="Visible"
                                                                   Title=""
                                                                   LabelRotationAngle="45"
                                                                   DefaultLabelFormat="HH:mm"
                                                                   AutoRange="True"
                                                                   LabelStep="1"
                                                                   TicksDistance="20">                                                              
                                                </telerik:AxisX>
                                            </telerik:ChartArea.AxisX>
                                        </telerik:ChartArea>
                                    </telerik:ChartDefaultView.ChartArea>                               
                                </telerik:ChartDefaultView>
                            </telerik:RadChart.DefaultView>
                        </telerik:RadChart>

    In the ChartJam_Loaded I then define my chart:

    ChartJam.DefaultView.ChartArea.AxisX.AxisStyles.ItemLabelStyle = App.Current.Resources["ChartLabel"] as Style;           
                ChartJam.DefaultView.ChartArea.AxisY.AxisStyles.ItemLabelStyle = App.Current.Resources["ChartLabel"] as Style;
     
                ChartJam.DefaultView.ChartArea.Annotations.Clear();
                ChartJam.DefaultView.ChartArea.EnableAnimations = false;
     
                ChartJam.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;
                ChartJam.DefaultSeriesDefinition = new AreaSeriesDefinition()
                {
                    Appearance = new SeriesAppearanceSettings()
                    {
                        Stroke = Utilities.StringToSolidColorBrush("93D427"),
                        StrokeThickness = 1.0,
                        Fill = new SolidColorBrush(Colors.Black)
                    },
                    ShowPointMarks = false,
                    ShowItemLabels = false,
                    ShowItemToolTips = true
                };
     
                SeriesMapping seriesMapping = new SeriesMapping();
                seriesMapping.ItemMappings.Add(new ItemMapping("JamLength", DataPointMember.YValue));
                seriesMapping.ItemMappings.Add(new ItemMapping("DtJamLength", DataPointMember.XValue));
     
                ChartJam.SeriesMappings.Add(seriesMapping);
     
                ChartJam.ItemsSource = _chartsJamGuardVM.LineData;
                 
                _chartsJamGuardVM.DownloadChartJam();

    The ViewModel then downloads the data and builds the LineData list with objects of the following class:

    public class JamLengthData : ViewModelBase
        {
            private double _dtJamLength;
            public double DtJamLength { get { return _dtJamLength; } set { _dtJamLength = value; RaisePropertyChanged("DtJamLength"); } }
            private double _jamLength;
            public double JamLength { get { return _jamLength; } set { _jamLength = value; RaisePropertyChanged("JamLength"); } }
     
            public JamLengthData(double dtJamLength, double jamLength)
            {
                this.DtJamLength = dtJamLength;
                this.JamLength = (double) jamLength / 1000.0;
            }
     
            public JamLengthData() { }
        }




    Now, the problem. I know that the highest Y value in the entire range data which spans about a day, is 15966, at 19h16.
    When I limit the data to a range of 3 hours (which corresponds to 180 points since I've got data for every minute), the chart looks ok. The peak Y value is displayed correctly at +/- 16000.

    However, if I draw a larger period, say spanning 10 hours from 13h00 to 23h00 (561 points for this period in the database), it looks like all the points in the chart are very loosely drawn and only "approaching" the actual values in the collection. Where the peak is supposed to be, the actual point drawn is around 14400 (not even close!). Even worse, I can see several other peaks in the chart that are drawn HIGHER than the highest point in my collection.

    What's going on here?
  2. Jeroen
    Jeroen avatar
    49 posts
    Member since:
    Feb 2012

    Posted 19 Apr 2012 Link to this post

    It's apparently caused by the amount of points. If I have a collection of 1000 points, the chart is drawn incorrectly. If I reduce the amount of points (e.g. I only draw the highest point of every group of 5 points), the chart looks fine.

    How is it possible that this chart is unable to handle 1000 points?
  3. DevCraft banner
  4. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 24 Apr 2012 Link to this post

    Hi Jeroen,

    The reason for this behavior is in a feature called Sampling. Please, find the details in the following help topic:

    http://www.telerik.com/help/silverlight/radchart-features-sampling.html

    Best regards,
    Ves
    the Telerik team

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

  5. Jeroen
    Jeroen avatar
    49 posts
    Member since:
    Feb 2012

    Posted 18 May 2012 Link to this post

    Hey Ves,

    Thanks for the pointer. It's working now the way I need it to (using a Max SamplingFunction), but it took me some struggling.

    The documentation says: "When binding without series mappings, the value of the RadChart.SamplingSettings.SamplingFunction determines the pattern. When binding with series mappings, the value of the pattern is determined by the value of the ItemMapping.SamplingFunction. " 

    Looking at it now it makes perfect sense, but it wasn't immediately clear to me what that meant. I'd suggest maybe adding some sample code to the documentation for setting the SamplingFunction when using binding with series mappings. Every example code I've found always uses the other implementation. I found it very confusing having to set the threshold on the RadChart object, but having to define the used sampling function in the item mapping.

    Anyway, for future reference, this bit of code made the sampling work correctly for me:

    ItemMapping itemMapping = new ItemMapping("JamLength", DataPointMember.YValue);
    itemMapping.SamplingFunction = ChartSamplingFunction.Max;

    ChartJam.SamplingSettings.SamplingThreshold = 100;
Back to Top