Telerik Line series zooming technique.

4 posts, 1 answers
  1. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 07 Mar 2011 Link to this post

    I'm designing the one line series which is similar to the line series that u designed in the following link.
    http://demos.telerik.com/silverlight/#Chart/Sampling

    Everything working fine. Only problem is i dont understand the logic behind Zooming technique.
    Plz help me with this.

    The following given is my code. plz have a generous look.
    XAML Code
    <navigation:Page xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="AnalyticsReports.MultiLineSeries"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="1100" d:DesignHeight="600"
               Title="MultiLineSeries Page" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
        <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
     
            <Border telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True">
                 
            <telerik:RadChart  x:Name="radChart1" ItemsSource="{Binding tempData}">
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea EnableAnimations="True" EnableTransitionAnimations="True" LegendName="Measures">
                                <telerik:ChartArea.ZoomScrollSettingsX>
                                    <telerik:ZoomScrollSettings RangeEnd="0.25" MinZoomRange="0.001" ScrollMode="ScrollAndZoom" PropertyChanged="ZoomScrollSettingsX_PropertyChanged" />
                                </telerik:ChartArea.ZoomScrollSettingsX>
                                    <telerik:ChartArea.AxisX>
                                        
                                        <telerik:AxisX DefaultLabelFormat="MMMM yyyy" StepLabelLevelCount="2" StepLabelLevelHeight="15"
                                                       MajorGridLinesVisibility="Visible" />
                                    </telerik:ChartArea.AxisX>
                                    <telerik:ChartArea.AxisY>
                                        <telerik:AxisY  Title="Temperature in Celsius"
                                                       MajorGridLinesVisibility="Visible" MinorGridLinesVisibility="Visible" />
                                    </telerik:ChartArea.AxisY>
                                </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend Visibility="Collapsed" />
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle Content="MultiLine Series Measurements" />
                        </telerik:ChartDefaultView.ChartTitle>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
                 
                <telerik:RadChart.SeriesMappings>
                        <telerik:SeriesMapping>
                            <telerik:SeriesMapping.SeriesDefinition>
                                <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False"/>
                            </telerik:SeriesMapping.SeriesDefinition>
                            <telerik:SeriesMapping.ItemMappings>
                                <telerik:ItemMapping DataPointMember="XValue" FieldName="Datetaken"/>
                            </telerik:SeriesMapping.ItemMappings>
                        </telerik:SeriesMapping>
                            <telerik:SeriesMapping LegendLabel="A1C">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <!--<telerik:ItemMapping DataPointMember="XValue" FieldName="Date" />-->
                            <telerik:ItemMapping DataPointMember="YValue"  FieldName="A1C" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping LegendLabel="DBP">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="DBP" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping LegendLabel="HDL">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="HDL" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping LegendLabel="LDL">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="LDL" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping LegendLabel="SBP">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="SBP" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping LegendLabel="Weight">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="Weight" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                         
                    </telerik:RadChart.SeriesMappings>
            </telerik:RadChart>
            </Border>
            <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,5,0,0">
                <TextBlock Foreground="Black" VerticalAlignment="Center" Text="Time Period: " />
                <Button Click="OneYear_Click" Content="1 Year" />
                <Button Click="SixMonths_Click" Content="6 Months" />
                <Button Click="OneMonth_Click" Content="1 Month" />
                <Button Click="OneWeek_Click" Content="1 Week" />
            </StackPanel>
        </Grid>
    </navigation:Page>
    And This is Code behind.
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Navigation;
    using AnalyticsReports.MyWebServiceReference;
    using Telerik.Windows.Controls.Charting;
    using System.ServiceModel;
    using System.ComponentModel;
    using Telerik.Windows.Controls;
     
     
    namespace AnalyticsReports
    {
        public partial class MultiLineSeries : Page
        {
            List<MeasureData> tempData = new List<MeasureData>();
            public MultiLineSeries()
            {
                 
                InitializeComponent();
                 
                MyWebServiceReference.WebServiceSoapClient proxy = new MyWebServiceReference.WebServiceSoapClient();
                proxy.GetUserMeasureCompleted += new EventHandler<GetUserMeasureCompletedEventArgs>(proxy_GetUserMeasureCompleted);
                proxy.GetUserMeasureAsync(1, 145204);
            }
     
            void proxy_GetUserMeasureCompleted(object sender, GetUserMeasureCompletedEventArgs e)
            {
                foreach (var t in e.Result.lstMeasureData)
                {
                    tempData.Add(new MeasureData { Datetaken = t.Datetaken,  A1C= t.A1C, DBP = t.DBP,HDL=t.HDL,LDL = t.LDL,SBP=t.SBP,Weight=t.Weight });
                }
                 
                radChart1.ItemsSource = tempData;
            }
            private void ZoomScrollSettingsX_PropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                if (this.radChart1 == null)
                    return;
     
                double range = (sender as ZoomScrollSettings).Range;
     
                if (range > 0.7d)
                {
                    radChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "yyyy";
                    radChart1.DefaultView.ChartArea.AxisX.StepLabelLevelCount = 1;
                }
                else if (range > 1d / 12d)
                {
                    radChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "MMMM yyyy";
                    radChart1.DefaultView.ChartArea.AxisX.StepLabelLevelCount = 2;
                }
                else if (range > 1d / 12d / 30d)
                {
                    radChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "dd MMM yyyy";
                    radChart1.DefaultView.ChartArea.AxisX.StepLabelLevelCount = 2;
                }
                else
                {
                    radChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "dd-MMM (HH:mm)";
                    radChart1.DefaultView.ChartArea.AxisX.StepLabelLevelCount = 2;
                }
            }
     
            private void OneYear_Click(object sender, RoutedEventArgs e)
            {
                this.SetRange(1d / 12d);
            }
     
            private void SixMonths_Click(object sender, RoutedEventArgs e)
            {
                this.SetRange(1d / 24d);
            }
     
            private void OneMonth_Click(object sender, RoutedEventArgs e)
            {
                this.SetRange(1d / 144d);
            }
     
            private void OneWeek_Click(object sender, RoutedEventArgs e)
            {
                this.SetRange(1d / 625d);
            }
     
            private void SetRange(double newRange)
            {
                if (radChart1.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd + newRange > 1)
                    radChart1.DefaultView.ChartArea.ZoomScrollSettingsX.SetSelectionRange(1 - newRange, 1);
                else
                    radChart1.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd = radChart1.DefaultView.ChartArea.ZoomScrollSettingsX.RangeStart + newRange;
            }
        }
    }
  2. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 07 Mar 2011 Link to this post

    Plz Someone answer  this problem as soon as possible.
  3. DevCraft banner
  4. Answer
    Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 09 Mar 2011 Link to this post

    Hello Rahul,

    The logic in the sample uses standard zooming and scrolling along the xAxis. It provides view on the data, broken into groups, which can be changed by using the slider along the axis. More information is available inthe following article:

    http://www.telerik.com/help/silverlight/radchart-features-zooming-and-scrolling.html

    I hope this gets you started.

    Best wishes,
    Yavor
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 09 Mar 2011 Link to this post

    First of all Thanx for replying. Now i got the idea. I'll work on it.
Back to Top