Skip to content

Instantly share code, notes, and snippets.

@garyjohnson

garyjohnson/gist:2997211

Created June 26, 2012 17:20
Show Gist options
  • Save garyjohnson/2997211 to your computer and use it in GitHub Desktop.
Save garyjohnson/2997211 to your computer and use it in GitHub Desktop.
Download ZIP
Chart Control Example - Telerik - Grid lines for axis
Raw
gistfile1.xml
<UserControl x:Class="Telerik.Windows.Examples.ChartView.Palettes.Example"
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:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:charting="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
xmlns:vm="clr-namespace:Telerik.Windows.Examples.ChartView.Palettes"
Loaded="UserControl_Loaded"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.DataContext>
<vm:ThemingViewModel />
</UserControl.DataContext>
<UserControl.Resources>
<Style x:Key="legendStyle" TargetType="StackPanel">
<Setter Property="Margin" Value="10,6,10,0" />
</Style>
<Style x:Key="legendItemStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="11" />
<Setter Property="Foreground" Value="#FF767676" />
<Setter Property="Margin" Value="4,2,4,2" />
</Style>
<Style x:Key="titleStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="#FF767676" />
<Setter Property="Margin" Value="0,7" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</UserControl.Resources>
<Border telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Browser Usage" Style="{StaticResource titleStyle}" />
<chart:RadCartesianChart x:Name="BarChart" Palette="{Binding Palette}" Grid.Row="1">
<chartView:BarSeries ValueBinding="Value" CategoryBinding="TimeStamp" ItemsSource="{Binding BarData[0]}" />
<chartView:BarSeries ValueBinding="Value" CategoryBinding="TimeStamp" ItemsSource="{Binding BarData[1]}" />
<chartView:BarSeries ValueBinding="Value" CategoryBinding="TimeStamp" ItemsSource="{Binding BarData[2]}" />
<chartView:BarSeries ValueBinding="Value" CategoryBinding="TimeStamp" ItemsSource="{Binding BarData[3]}" />
<chartView:BarSeries ValueBinding="Value" CategoryBinding="TimeStamp" ItemsSource="{Binding BarData[4]}" />
<chart:RadCartesianChart.HorizontalAxis>
<chartView:DateTimeCategoricalAxis DateTimeComponent="Year" LabelFormat="yyyy" />
</chart:RadCartesianChart.HorizontalAxis>
<chart:RadCartesianChart.VerticalAxis>
<chartView:LinearAxis LabelFormat="p0" />
</chart:RadCartesianChart.VerticalAxis>
<chart:RadCartesianChart.Grid>
<chartView:CartesianChartGrid MajorLinesVisibility="Y" />
</chart:RadCartesianChart.Grid>
</chart:RadCartesianChart>
<StackPanel x:Name="BarLegend" Style="{StaticResource legendStyle}" Grid.Row="1" Grid.Column="1">
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Firefox" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Chrome" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="IE" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Safari" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Opera" />
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="OS" Style="{StaticResource titleStyle}" />
<chart:RadCartesianChart x:Name="LineChart" Palette="{Binding Palette}" Grid.Row="1">
<chartView:LineSeries ValueBinding="Value" CategoryBinding="Category" ItemsSource="{Binding LineData[0]}" />
<chartView:LineSeries ValueBinding="Value" CategoryBinding="Category" ItemsSource="{Binding LineData[1]}" />
<chartView:LineSeries ValueBinding="Value" CategoryBinding="Category" ItemsSource="{Binding LineData[2]}" />
<chartView:LineSeries ValueBinding="Value" CategoryBinding="Category" ItemsSource="{Binding LineData[3]}" />
<chartView:LineSeries ValueBinding="Value" CategoryBinding="Category" ItemsSource="{Binding LineData[4]}" />
<chart:RadCartesianChart.HorizontalAxis>
<chartView:CategoricalAxis />
</chart:RadCartesianChart.HorizontalAxis>
<chart:RadCartesianChart.VerticalAxis>
<chartView:LinearAxis LabelFormat="p0" />
</chart:RadCartesianChart.VerticalAxis>
<chart:RadCartesianChart.Grid>
<chartView:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y">
<chartView:CartesianChartGrid.YStripeBrushes>
<SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
<SolidColorBrush Color="Transparent" />
</chartView:CartesianChartGrid.YStripeBrushes>
</chartView:CartesianChartGrid>
</chart:RadCartesianChart.Grid>
</chart:RadCartesianChart>
<StackPanel x:Name="LineLegend" Style="{StaticResource legendStyle}" Grid.Row="1" Grid.Column="1">
<StackPanel Orientation="Horizontal">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="WinXP" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Win7" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Vista" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="MacOSX" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Linux" />
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Search Market Share, September 2011" Style="{StaticResource titleStyle}" />
<chart:RadPieChart x:Name="PieChart" Palette="{Binding Palette}" Grid.Row="1">
<chartView:PieSeries ValueBinding="Value" ItemsSource="{Binding Data}" RadiusFactor="0.77">
<chartView:PieSeries.LabelDefinitions>
<chartView:ChartSeriesLabelDefinition Margin="-8,0,0,0" />
</chartView:PieSeries.LabelDefinitions>
<chartView:PieSeries.AngleRange>
<charting:AngleRange StartAngle="270" SweepAngle="360" />
</chartView:PieSeries.AngleRange>
</chartView:PieSeries>
</chart:RadPieChart>
<StackPanel x:Name="PieLegend" Style="{StaticResource legendStyle}" Grid.Row="1" Grid.Column="1">
<StackPanel Orientation="Horizontal">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Google" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Yahoo!" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Baidu" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Others" />
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="User Distribution" Style="{StaticResource titleStyle}" />
<chart:RadPolarChart x:Name="PolarChart" Palette="{Binding Palette}" Grid.Row="1">
<chartView:PolarAreaSeries AngleBinding="Angle" ValueBinding="Value" ItemsSource="{Binding PolarData[0]}"/>
<chartView:PolarAreaSeries AngleBinding="Angle" ValueBinding="Value" ItemsSource="{Binding PolarData[1]}"/>
<chartView:PolarAreaSeries AngleBinding="Angle" ValueBinding="Value" ItemsSource="{Binding PolarData[2]}"/>
<chart:RadPolarChart.RadialAxis>
<chartView:NumericRadialAxis />
</chart:RadPolarChart.RadialAxis>
<chart:RadPolarChart.PolarAxis>
<chartView:PolarAxis />
</chart:RadPolarChart.PolarAxis>
<chart:RadPolarChart.Grid>
<chartView:PolarChartGrid GridLineVisibility="Both" StripesVisibility="Both">
<chartView:PolarChartGrid.PolarStripeBrushes>
<SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
<SolidColorBrush Color="Transparent" />
</chartView:PolarChartGrid.PolarStripeBrushes>
<chartView:PolarChartGrid.RadialStripeBrushes>
<SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
<SolidColorBrush Color="Transparent" />
</chartView:PolarChartGrid.RadialStripeBrushes>
</chartView:PolarChartGrid>
</chart:RadPolarChart.Grid>
</chart:RadPolarChart>
<StackPanel x:Name="PolarLegend" Style="{StaticResource legendStyle}" Grid.Row="1" Grid.Column="1">
<StackPanel Orientation="Horizontal">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Yearly" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Monthly" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2">
<Rectangle Width="12" Height="12" />
<TextBlock Style="{StaticResource legendItemStyle}" Text="Daily" />
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Border>
<telerikQuickStart:QuickStart.ConfigurationPanel>
<StackPanel Margin="3">
<TextBlock Text="Choose palette:" Margin="0,0,0,2" />
<ListBox Width="180" ItemsSource="{Binding Palettes}" SelectedValue="{Binding Palette, Mode=TwoWay}" HorizontalAlignment="Left"
ScrollViewer.HorizontalScrollBarVisibility="Hidden" Margin="0,4" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,3">
<TextBlock Text="{Binding Name}" FontWeight="Bold" MinWidth="62" />
<Border Padding="1,1,0,1" Background="White">
<StackPanel Orientation="Horizontal">
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[0].Fill}" />
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[1].Fill}" />
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[2].Fill}" />
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[3].Fill}" />
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[4].Fill}" />
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[5].Fill}" />
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[6].Fill}" />
<Rectangle Width="12" Height="12" Margin="0,0,1,0" Fill="{Binding GlobalEntries[7].Fill}" />
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</telerikQuickStart:QuickStart.ConfigurationPanel>
</UserControl>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment