In my previous Article we have seen how we can access the data from database using Data Access. Whatever the case, the data visualization or representation is more important. Here I would like to present how we can represent the data in the form of charts. In Silverlight we have extensive charting controls available, coding is much simpler than other technologies.
The different chart types we have is,
1. ColumnSeries
2. PieSeries
3. Area Series
4. Bar Series
5. Line Series
6. Scatter Series
7. Bubble Series
8. Dynamic Series
Below the XAML code to place the control and .cs code to bind the source to the chart control.
Column Series -- XAML Code
Data can be represents in a control that contains a data series to be rendered in column format.
<UserControl xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="ChartingExample.MainPage"
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"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<chartingToolkit:Chart x:Name="clmseries" Width="500" Height="350">
<chartingToolkit:Chart.Series>
<chartingToolkit:ColumnSeries ItemsSource="{Binding}"
DependentValuePath="Value"
IndependentValuePath="Key"
Title="Survey" IsSelectionEnabled="True" />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
</Grid>
</UserControl>
C#
namespace ChartingExample
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
clmseries.DataContext = new KeyValuePair<string, int>[] {
new KeyValuePair<string, int>("Silverlight", 9),
new KeyValuePair<string, int>(".NET 3.5", 2),
new KeyValuePair<string, int>("ASP", 4),
new KeyValuePair<string, int>("AJAX", 8),
new KeyValuePair<string, int>("VC++", 1),
new KeyValuePair<string, int>("C#", 3),
new KeyValuePair<string, int>("SQL Server", 10)
};
}
}
}
Pie Series -- XAML Code
Represents a control that contains a data series to be rendered in pie format.
<chartingToolkit:Chart x:Name="PieSris" Width="350" Height="250">
<chartingToolkit:Chart.Series>
<chartingToolkit:PieSeries ItemsSource="{Binding}"
DependentValuePath="Value"
IndependentValuePath="Key"
Title="Survey" IsSelectionEnabled="True" />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
C#
PieSris.DataContext = new KeyValuePair<string, int>[] {
new KeyValuePair<string, int>("Silverlight", 9),
new KeyValuePair<string, int>(".NET 3.5", 2),
new KeyValuePair<string, int>("ASP", 4),
new KeyValuePair<string, int>("AJAX", 8),
new KeyValuePair<string, int>("VC++", 1),
new KeyValuePair<string, int>("C#", 3),
new KeyValuePair<string, int>("SQL Server", 10)
};
Area Series -- XAML Code
Control can be represents the data series to be rendered in X/Y format.
<chartingToolkit:Chart x:Name="AreaSeries" Width="500" Height="350" LegendTitle="Tech Survey" >
<chartingToolkit:Chart.Series >
<chartingToolkit:AreaSeries ItemsSource="{Binding}"
DependentValuePath="Value"
IndependentValuePath="Key"
Title="Survey" IsSelectionEnabled="True" />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
C#
AreaSeries.DataContext = new KeyValuePair<string, int>[] {
new KeyValuePair<string, int>("Silverlight", 9),
new KeyValuePair<string, int>(".NET 3.5", 2),
new KeyValuePair<string, int>("ASP", 4),
new KeyValuePair<string, int>("AJAX", 8),
new KeyValuePair<string, int>("VC++", 1),
new KeyValuePair<string, int>("C#", 3),
new KeyValuePair<string, int>("SQL Server", 10)
};
Bar Series -- XAML Code
Data series to be rendered in Bar format.
<chartingToolkit:Chart x:Name="BarSeries" Width="500" Height="350" LegendTitle="Car Survey">
<chartingToolkit:Chart.Series>
<chartingToolkit:BarSeries ItemsSource="{Binding}"
DependentValuePath="Value"
IndependentValuePath="Key"
Title="Survey" IsSelectionEnabled="True" AnimationSequence="Simultaneous" />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
C#
BarSeries.DataContext = new KeyValuePair<string, int>[] {
new KeyValuePair<string, int>("Alto", 9),
new KeyValuePair<string, int>("Swift", 2),
new KeyValuePair<string, int>("Honda", 4),
new KeyValuePair<string, int>("Civic", 8),
new KeyValuePair<string, int>("Zen", 1),
new KeyValuePair<string, int>("Waganor", 3),
};
Line Series -- XAML Code
Represents a control that contains a data series to be rendered in X/Y line format.
<chartingToolkit:Chart x:Name="lineseries" Width="500" Height="350">
<chartingToolkit:Chart.Series>
<chartingToolkit:LineSeries ItemsSource="{Binding}"
DependentValuePath="Value"
IndependentValuePath="Key"
Title="Survey" IsSelectionEnabled="True" />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
C#
lineseries.DataContext = new KeyValuePair<DateTime, int>[] {
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(8), 9),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(12), 2),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(16), 4),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(20), 8),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(21), 1) };
Scatter Series -- XAML Code
Data can be represented as scattered in the form of X and Y.
<chartingToolkit:Chart x:Name="sactter" Width="500" Height="350">
<chartingToolkit:Chart.Series>
<chartingToolkit:ScatterSeries ItemsSource="{Binding}"
DependentValuePath="Value"
IndependentValuePath="Key"
Title="Survey" IsSelectionEnabled="True" />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
C#
sactter.DataContext = new KeyValuePair<DateTime, int>[] {
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(8), 9),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(12), 2),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(16), 4),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(20), 8),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(21), 1) };
Bubble Series -- XAML Code
Represents a control that contains a data series to be rendered in X/Y line format. A third axis binding determines the size of the data point.
<chartingToolkit:Chart x:Name="bubbleseries" Width="500" Height="350">
<chartingToolkit:Chart.Series>
<chartingToolkit:BubbleSeries ItemsSource="{Binding}"
DependentValuePath="Key.Minute"
IndependentValuePath="Key.Hour"
SizeValuePath="Value"
Title="Survey" IsSelectionEnabled="True" />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
C#
bubbleseries.DataContext = new KeyValuePair<DateTime, int>[] {
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(8).AddMinutes(30), 9),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(12).AddMinutes(10), 6),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(16).AddMinutes(20), 4),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(20).AddMinutes(40), 8),
new KeyValuePair<DateTime, int>(DateTime.Today.AddHours(22).AddMinutes(35), 3) };
With this can use these extensive charting controls to represent the data. The
KeyValuePair can be used to represent only 2 values, this can be very suitable for charting.
Thanks,
BVNREDDY
|