Weird behavior in RadChart (2011Q3) when specifying a max and min value

6 posts, 1 answers
  1. Boutemine
    Boutemine avatar
    7 posts
    Member since:
    Jun 2012

    Posted 20 Mar 2012 Link to this post

    Hello Telerik,
    I'm posting this topic to discuss an issue that I discovered in the Telerik Rad controls suit for WP7 version 2011Q3, and I'm hoping I can find an answer.
    I'm attaching a snapshot of our app that shows the problem,
    actually, we're having a set of points with values from 0 to 200 and we're trying to limit the shown values interval on the Y axis to 38, when we plot some points with values within that range, everything seem to be working fine, but when there is one or more points with values higher than 38, we get this strange UI, the xaml we're using is as follows :

    <telerikChart:RadCartesianChart x:Name="MainChart">
        <telerikChart:RadCartesianChart.Behaviors>
            <telerikChart:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal"/>
        </telerikChart:RadCartesianChart.Behaviors>
        <telerikChart:RadCartesianChart.VerticalAxis>
            <telerikChart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="2" />
        </telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:RadCartesianChart.HorizontalAxis>
            <telerikChart:CategoricalAxis LineStroke="{StaticResource PhoneDisabledBrush}"
                        TickThickness="1" LabelFitMode="Rotate" LabelInterval="1"
                        GapLength="0.10" LabelRotationAngle="0"
                        Title="{Binding LocalizedStrings.CycleDay, Source={StaticResource LocalizationService}}"
                        LabelFormat=""
                         >
                <!--<telerikChart:CategoricalAxis.LabelTemplate>
                    <DataTemplate>
                        <TextBlock Margin="0,4,0,0" Text="{Binding Converter={StaticResource LabelConverter}}" TextAlignment="Center" />
                    </DataTemplate>
                </telerikChart:CategoricalAxis.LabelTemplate> -->
            </telerikChart:CategoricalAxis>
        </telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:BarSeries x:Name="ColoredBarSeries" CategoryBinding="X" ValueBinding="Y" DataBindingComplete="ColoredBarSeries_DataBindingComplete">
            <telerikChart:BarSeries.PointTemplate>
                <DataTemplate>
                    <!--
                    <Rectangle Fill="{Binding Converter={StaticResource ColorConverter}}" />
                    -->
                    <Rectangle Fill="{Binding Background}" />
                </DataTemplate>
            </telerikChart:BarSeries.PointTemplate>
        </telerikChart:BarSeries>
        <telerikChart:LineSeries x:Name="LineSeries" CategoryBinding="X" ValueBinding="Y"  DataBindingComplete="LineSeries_DataBindingComplete">
            <telerikChart:LineSeries.PointTemplate>
                <DataTemplate>
                    <Grid>
                        <Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="10" Width="10" />
                        <Image Source="/Assets\Images\heart.png" Visibility="{Binding Converter={StaticResource ChartIntimateConverter}}" Height="26" Width="26"  Stretch="Uniform"/>
                    </Grid>
                </DataTemplate>
            </telerikChart:LineSeries.PointTemplate>
        </telerikChart:LineSeries>
    </telerikChart:RadCartesianChart>
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 26 Mar 2012 Link to this post

    Hello Boutemine,

    Thank you for writing.
    Please send the code you are using when the MonthView and WeekView buttons are pressed since the provided XAML is not sufficient to reproduce the line artifact on the attached image.

    I am looking forward to your reply.

    Kind regards,
    Victor
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Boutemine
    Boutemine avatar
    7 posts
    Member since:
    Jun 2012

    Posted 26 Mar 2012 Link to this post

    Hello guys, thanks for your answer, here is the code behind of the temperature chart page, the associated view model contains methods for loading data points and navigating through the set. I hope this helps, I also recall that one of the values on the vertical axis was 3750  (Mistakenly introduced instead of 37.50).

        public partial class TemperatureChart : PhoneApplicationPage
        {
            public TemperatureChart()
            {
                InitializeComponent();
                NextButton.Text = LocalizedStrings.Next;
                PreviousButton.Text = LocalizedStrings.Previous;
            }
             
            ApplicationBarIconButton NextButton
            {
                get return this.ApplicationBar.Buttons[0] as ApplicationBarIconButton; }
            }
     
            ApplicationBarIconButton PreviousButton
            {
                get return this.ApplicationBar.Buttons[1] as ApplicationBarIconButton; }
            }
     
            private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
            {
                if (DesignerProperties.IsInDesignTool)
                    return;
                LoadMinMaxValues();
                SwitchToWeekView();
            }
     
            private void LoadMinMaxValues()
            {
                var axis = (this.MainChart.VerticalAxis as LinearAxis);
                if (Settings.Instance.IsCelsiusTemperatureUnit)
                {
                    axis.Minimum = 35;
                    axis.Maximum = 40; // 38; // Increased the max to avoid the label cut off
                }
                else // Fahrenheit
                {
                    axis.Minimum = 96; 
                    axis.Maximum = 100; // 99;
                }
            }
     
            private TemperatureChartViewModel ViewModel
            {
                get return this.DataContext as TemperatureChartViewModel; }
            }
     
            private void btnWeekView_Checked(object sender, RoutedEventArgs e)
            {
                if (this.MainChart == null)
                    return;
                this.SwitchToWeekView();
            }
     
            private void btnMonthView_Checked(object sender, RoutedEventArgs e)
            {
                if (this.MainChart == null)
                    return;
                SwitchToMonthlyView();
            }
     
            private void SwitchToWeekView()
            {
                var count = this.ViewModel.DataPoints.Count();
                var zoomFactor = count / 7.0;
                if (zoomFactor < 1)
                    zoomFactor = 1;
                var panOffset = this.MainChart.PlotAreaClip.Width - zoomFactor * this.MainChart.PlotAreaClip.Width;
                this.MainChart.Zoom = new Size(zoomFactor, 1);
                this.MainChart.PanOffset = new Point(panOffset, 0);
                this.MainChart.HorizontalAxis.LabelRotationAngle = 0;
            }
     
            private void SwitchToMonthlyView()
            {
                var count = this.ViewModel.DataPoints.Count();
                var zoomFactor = count / 30.0;
                if (zoomFactor < 1)
                    zoomFactor = 1;
                var panOffset = this.MainChart.PlotAreaClip.Width - zoomFactor * this.MainChart.PlotAreaClip.Width;
                this.MainChart.Zoom = new Size(zoomFactor, 1);
                this.MainChart.PanOffset = new Point(panOffset, 0);
                this.MainChart.HorizontalAxis.LabelRotationAngle = 270;
            }
     
            private void NavigationInTransition_EndTransition(object sender, RoutedEventArgs e)
            {
                CurrentLineSeries.SetBinding(LineSeries.ItemsSourceProperty, new Binding("DataPoints"));
            }
     
            protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
                BusyService.Instance.IsBusy = true;
            }
     
            private LineSeries CurrentLineSeries
            {
                get return this.MainChart.Series.FirstOrDefault(s => s is LineSeries) as LineSeries; }
            }
     
     
            private BarSeries CurrentColoredBarSeries
            {
                get return this.MainChart.Series.FirstOrDefault(s => s is BarSeries) as BarSeries; }
            }
     
            private void LineSeries_DataBindingComplete(object sender, System.EventArgs e)
            {
                // Too slow ...
                //CurrentColoredBarSeries.SetBinding(BarSeries.ItemsSourceProperty, new Binding("ColoredDataPoints"));
                BusyService.Instance.IsBusy = false;
            }
     
            private void ColoredBarSeries_DataBindingComplete(object sender, System.EventArgs e)
            {
                BusyService.Instance.IsBusy = false;
            }
     
            private void btnNext_Click(object sender, System.EventArgs e)
            {
                this.ViewModel.MoveNext();
                this.MainChart.PanOffset = new Point(1, 0);
     
            }
     
            private void btnPrevious_Click(object sender, System.EventArgs e)
            {
                this.ViewModel.MovePrevious();
                double plotAreaWidth = this.MainChart.PlotAreaClip.Width;
                double zoomWidth = this.MainChart.Zoom.Width * plotAreaWidth;
                double maxOffsetX = plotAreaWidth - zoomWidth;
                this.MainChart.PanOffset = new Point(maxOffsetX, 0);
            }
        }
    }

  5. Answer
    Victor
    Admin
    Victor avatar
    1351 posts

    Posted 28 Mar 2012 Link to this post

    Hello Boutemine,

    Thanks for the code.

    In order to avoid this behavior you need to take two precautions. The first thing is to always sort your data points by date when you bind the chart to them. The second thing is that the collection of data, that the chart is bound to, should always contain data points that are inside the chart axes' min and max values. In your case, when you switch from month to week view and vice versa, you need to make sure that the data points in your data source fit within the new min/max date.

    Please write again if you need further assistance.

    Kind regards,
    Victor
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Ravind
    Ravind avatar
    1 posts
    Member since:
    Jan 2013

    Posted 16 Jan 2013 Link to this post

    I have a set of data that spans a year, but I am displaying it in a line chart by month. However, I would like each month's data to "connect" at the edges to the previous and next month.

    E.g. I may have data for 2,19, 2/25, 3/7, 3/12, 3/23, 4/5, 4/18 etc.

    While displaying the month of March, if I make sure my data source fits within the min/max date then I only show 3/7, 3/12 and 3/23 on the making it appear disconnected from adjacent months.

    What I would like to have a line from 3/7 to 3/1 (base on the value at 2/25) and a line from 3/23 to 3/31 (based on the value at 4/5).

    Any suggestions on how I can do this?
  7. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 21 Jan 2013 Link to this post

    Hi Ravind,

    Thanks for the feedback.
    Currently RadChart does not support this behavior. We will consider implementing it in a future release.
    You can try binding the chart to your whole data set and then zoom in. This way the line will be continuous and you can view different parts of the data by panning left and right.

    Regards,
    Victor
    the Telerik team
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner