<phone:PhoneApplicationPage x:Class="RadControlsWindowsPhoneApp1.Page1"
xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
d:DesignHeight="768"
d:DesignWidth="480"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
shell:SystemTray.IsVisible="True"
SupportedOrientations="Portrait"
mc:Ignorable="d">
<!-- LayoutRoot is the root grid where all page content is placed -->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- TitlePanel contains the name of the application and page title -->
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle"
Style="{StaticResource PhoneTextNormalStyle}"
Text="MY APPLICATION" />
<TextBlock x:Name="PageTitle"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"
Text="page name" />
</StackPanel>
<!-- ContentPanel - place additional content here -->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<chart:RadCartesianChart x:Name="chart">
<chart:RadCartesianChart.HorizontalAxis>
<chart:DateTimeCategoricalAxis DateTimeComponent="Date"
LabelFormat="MM-yy"
PlotMode="OnTicks"/>
</chart:RadCartesianChart.HorizontalAxis>
<chart:RadCartesianChart.VerticalAxis>
<chart:LinearAxis Maximum="200" />
</chart:RadCartesianChart.VerticalAxis>
<chart:RadCartesianChart.Series>
<chart:LineSeries Loaded="LineSeries_Loaded"
Stroke="Orange"
StrokeThickness="2" />
<chart:LineSeries Loaded="LineSeries_Loaded"
Stroke="Blue"
StrokeThickness="2" />
<chart:LineSeries Loaded="LineSeries_Loaded"
Stroke="Red"
StrokeThickness="2" />
<chart:LineSeries Loaded="LineSeries_Loaded"
Stroke="DarkGreen"
StrokeThickness="2" />
</chart:RadCartesianChart.Series>
</chart:RadCartesianChart>
</Grid>
</Grid>
<!-- Sample code showing usage of ApplicationBar -->
<!--
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
-->
</phone:PhoneApplicationPage>
--------------------------------------------------------------------------------------------------------------------------------
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 Microsoft.Phone.Controls;
using Telerik.Windows.Controls;
namespace RadControlsWindowsPhoneApp1
{
public partial class Page1 : PhoneApplicationPage
{
public Page1()
{
InitializeComponent();
}
private void LineSeries_Loaded( object sender, RoutedEventArgs e )
{
DateTime lastDate = DateTime.Now;
double lastVal = 20;
int noPoints = ( 24 / 6 ) * 365; // I know that 24 / 6 is 4 :)
List<ChartDataObject> dataSource0 = new List<ChartDataObject>();
List<ChartDataObject> dataSource1 = new List<ChartDataObject>();
for ( int i = 0 ; i < noPoints ; ++i )
{
ChartDataObject obj0 = new ChartDataObject
{
Date = lastDate.AddHours( 6 ),
Value = lastVal + 0.1
};
ChartDataObject obj1 = new ChartDataObject
{
Date = obj0.Date,
Value = obj0.Value + 50
};
dataSource0.Add( obj0 );
dataSource1.Add( obj1 );
lastDate = obj0.Date;
lastVal = obj0.Value;
}
chart.HorizontalAxis.LabelInterval = ( ( ( noPoints / 4 ) / 8 ) / 30 ) * 30;
chart.HorizontalAxis.LabelFitMode = Telerik.Charting.AxisLabelFitMode.Rotate;
chart.HorizontalAxis.LabelRotationAngle = 270;
LineSeries series0 = (LineSeries)this.chart.Series[0];
LineSeries series1 = (LineSeries)this.chart.Series[1];
series0.CategoryBinding = new PropertyNameDataPointBinding()
{
PropertyName = "Date"
};
series0.ValueBinding = new PropertyNameDataPointBinding()
{
PropertyName = "Value"
};
series1.CategoryBinding = new PropertyNameDataPointBinding()
{
PropertyName = "Date"
};
series1.ValueBinding = new PropertyNameDataPointBinding()
{
PropertyName = "Value"
};
series0.ItemsSource = dataSource0;
series1.ItemsSource = dataSource1;
}
}
public class ChartDataObject
{
public DateTime Date
{
get;
set;
}
public double Value
{
get;
set;
}
}
}
I created a test application that is attached. I have large test data (one sample every 6 hours) for one year.
1. The graph is drawn OK but the X axis show too many ticks that I would like to reduce so they can mean something?!
2. Not sure I understand what is the difference between the
3. Can a DateTime chart slide to the left like your Stocks example?
4. The labels of the X Axis are a bit cut on the buttom. How can I fix that?