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

Telerik Line series zooming technique.

3 Answers 121 Views

Chart

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

This question is locked. New answers and comments are not allowed.

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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="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

Accepted