Scatter Chart | Visiblox Gallery
The example demonstrates that scatter series can be added to the chart.
There are three series on this chart, each containing a relatively large number of data points.
The different series can be toggled on and off using the check boxes below the chart.
Zooming has been enabled - click and drag with the mouse on the plot area to zoom, double click to unzoom.
Note that this example uses data from an external data source not included in the code snippets - download the examples source code in full to view the data.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.ScatterChart.ScatterChartExample"
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:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</UserControl.Resources>
<StackPanel Orientation="Vertical">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Name="ScatterChart" Grid.Column="0" Width="500" Height="350" Title="Age vs Rank of the UK's Elite Runners"
PlotAreaBorderStyle="{StaticResource NoBorder}" LegendVisibility="Collapsed" HorizontalAlignment="Center">
<charts:Chart.Behaviour>
<charts:BehaviourManager AllowMultipleEnabled="True">
<charts:ZoomBehaviour />
</charts:BehaviourManager>
</charts:Chart.Behaviour>
<charts:Chart.XAxis>
<charts:LinearAxis Title="Rank" ShowMajorGridlines="False" ShowMinorTicks="False" LabelFormatString="0">
<!-- Set the range of the charts manually to avoid margins being added -->
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="200" />
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis ShowMinorTicks="False" Title="Age" ShowMajorGridlines="False" LabelFormatString="0">
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="15" Maximum="55"/>
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.YAxis>
<charts:Chart.Series>
<charts:LineSeries x:Name="FifteenHundredSeries" ShowLine="False" ShowPoints="True" PointSize="5" />
<charts:LineSeries x:Name="TenThousandSeries" ShowLine="False" ShowPoints="True" PointSize="5" />
<charts:LineSeries x:Name="MarathonSeries" ShowLine="False" ShowPoints="True" PointSize="5" />
</charts:Chart.Series>
</charts:Chart>
</Grid>
<!-- define toggle buttons to switch series on/off -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,25,0,0">
<StackPanel Orientation="Horizontal" Margin="50,0,0,0">
<Ellipse Margin="0,0,10,2" Height="10" Width="10" Fill="{Binding ElementName=ScatterChart, Path=Series[0].PointFill}" VerticalAlignment="Bottom" />
<CheckBox x:Name="FifteenHundred" IsChecked="True" Click="Button_Checked">1500m</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="50,0,0,0" >
<Ellipse Margin="0,0,10,2" Height="10" Width="10" Fill="{Binding ElementName=ScatterChart, Path=Series[1].PointFill}" VerticalAlignment="Bottom" />
<CheckBox x:Name="TenThousand" IsChecked="True" Click="Button_Checked">10K</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="50,0,0,0" >
<Ellipse Margin="0,0,10,2" Height="10" Width="10" Fill="{Binding ElementName=ScatterChart, Path=Series[2].PointFill}" VerticalAlignment="Bottom" />
<CheckBox x:Name="Marathon" IsChecked="True" Click="Button_Checked">Marathon</CheckBox>
</StackPanel>
</StackPanel>
</StackPanel>
</UserControl>
^ Back To Top
Code
using System;
using System.IO;
using System.Text.RegularExpressions;
using System.Windows;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.ScatterChart
{
/// <summary>
/// An example for displaying scatter chart data
/// </summary>
public partial class ScatterChartExample : UserControl
{
/// <summary>
/// The number of points to be displayed from each series
/// </summary>
private int numberOfPoints = 200;
/// <summary>
/// The names of each of the series to be displayed
/// </summary>
private string[] seriesNames = { "1500M", "10K", "Marathon" };
/// <summary>
/// The regular expression pattern for date of birth
/// </summary>
private Regex dateOfBirthPattern = new Regex("\\d{2}\\.\\d{2}.\\d{2}");
/// <summary>
/// The regular expression pattern for numbers
/// </summary>
private Regex numberPattern = new Regex("\\d+");
public ScatterChartExample()
{
InitializeComponent();
for (int distance = 0; distance < seriesNames.Length; distance++)
{
ScatterChart.Series[distance].DataSeries = GenerateDataSeries(seriesNames[distance]);
}
}
private IDataSeries GenerateDataSeries(string distance)
{
var series = new DataSeries<int, int>();
using (StreamReader reader = CreateFileReader(distance))
{
int numPointsRead = 0;
// Read each line in the file
while (reader.Peek() >= 0)
{
string line = reader.ReadLine();
string[] parts = line.Split(new char[] { ' ', '\t' });
if (numberPattern.IsMatch(parts[0]))
{
int linePosition = int.Parse(parts[0]);
if (linePosition >= numberOfPoints - 1)
break;
foreach (String part in parts)
{
if (dateOfBirthPattern.IsMatch(part))
{
DateTime dob = GetDateOfBirth(part);
// Get the age of the person from the date of birth
int age = Convert.ToInt32(Math.Round((double)(DateTime.Now - dob).Days / 365));
series.Add(new DataPoint<int, int>(linePosition, age));
numPointsRead++;
break;
}
}
}
}
}
// Set the created DataSeries to be the data source of one of the chart series
series.Title = distance;
return series;
}
/// <summary>
/// Create the file reader based on the distance name
/// </summary>
private StreamReader CreateFileReader(string distance)
{
string filename = String.Format("ScatterChart/Data/{0}Rankings2009.txt", distance);
return new StreamReader(ExampleHelpers.GetApplicationResourceStream(filename).Stream);
}
/// <summary>
/// Convert a string representation to a date of birth
/// </summary>
private DateTime GetDateOfBirth(string dobString)
{
string[] parts = dobString.Split('.');
return new DateTime(int.Parse(parts[2]) + 1900, int.Parse(parts[1]), int.Parse(parts[0]));
}
/// <summary>
/// Toggle the series visibility
/// </summary>
private void Button_Checked(object sender, RoutedEventArgs e)
{
CheckBox checkBox = sender as CheckBox;
LineSeries toggleSeries = (LineSeries)ScatterChart.Series[0];
switch (checkBox.Name)
{
case "FiftenHundred": toggleSeries = (LineSeries)ScatterChart.Series[0]; break;
case "TenThousand": toggleSeries = (LineSeries)ScatterChart.Series[1]; break;
case "Marathon": toggleSeries = (LineSeries)ScatterChart.Series[2]; break;
}
toggleSeries.Visibility = checkBox.IsChecked == true ? Visibility.Visible : Visibility.Collapsed;
}
}
}
^ Back To Top
Real Charting Power...
View Features and Try for Free
Chart Types
See example charts and download sample source code
Line And Area Charts
Bar And Column Charts
Financial Charts
Other Charts
Developer Features
Check out chart features and technical documentation
High Performance
Customised Look And Feel
Application Development
Other Features
