This is a migrated thread and some comments may be shown as answers.

Telerik Line series zooming technique.

3 Answers 70 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 2
Rahul asked on 07 Mar 2011, 06:08 AM
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;
        }
    }
}

3 Answers, 1 is accepted

Sort by
0
Rahul
Top achievements
Rank 2
answered on 07 Mar 2011, 12:08 PM
Plz Someone answer  this problem as soon as possible.
0
Accepted
Yavor
Telerik team
answered on 09 Mar 2011, 10:35 AM
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!
0
Rahul
Top achievements
Rank 2
answered on 09 Mar 2011, 01:53 PM
First of all Thanx for replying. Now i got the idea. I'll work on it.
Tags
Chart
Asked by
Rahul
Top achievements
Rank 2
Answers by
Rahul
Top achievements
Rank 2
Yavor
Telerik team
Share this question
or