Large Data Sets | Visiblox Gallery
The Visiblox Charts component can also handle large data sets; displayed here are six series, each containing 5000 data points.
The radio buttons below the chart can be used to switch between zoom, pan and crosshair modes.
Zooming has been enabled when the Shift key is held. Click and drag with the mouse on the plot area or use the mouse wheel to zoom, double click to unzoom.
Panning has been enabled when the Control key is held. Click and drag with the mouse on the plot area to pan the data around the chart.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.LargeDataSets.LargeDataSetsExample"
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"
xmlns:prim="clr-namespace:Visiblox.Charts.Primitives;assembly=Visiblox.Charts"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Define the chart -->
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart x:Name="Chart" Grid.Row="0" Width="600" Height="350" Title="30000 Data Points" HorizontalAlignment="Center"
PlotAreaBorderStyle="{StaticResource NoBorder}" LegendVisibility="Collapsed" Margin="20" >
<charts:Chart.Behaviour>
<charts:BehaviourManager x:Name="BehaviourManager" AllowMultipleEnabled="True">
<charts:ZoomBehaviour YZoomEnabled="False" BehaviourActivator="Shift"/>
<charts:PanBehaviour YPanEnabled="False" BehaviourActivator="Control"/>
<charts:CrosshairBehaviour />
</charts:BehaviourManager>
</charts:Chart.Behaviour>
<!-- If this wasn't set the chart would automatically add margins too -->
<charts:Chart.XAxis>
<charts:LinearAxis LabelFormatString="N0" ShowMinorTicks="False" ShowMajorGridlines="False">
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="5000"/>
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis LabelFormatString="N2" ShowMinorTicks="False" ShowMajorGridlines="False">
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="1" Maximum="7" />
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.YAxis>
<!-- Define the two series of the chart -->
<charts:Chart.Series>
<charts:RasterLineSeries>
<charts:RasterLineSeries.DefaultStyle>
<charts:LineSeriesStyle LineStroke="#ffce3a36" />
</charts:RasterLineSeries.DefaultStyle>
</charts:RasterLineSeries>
<charts:RasterLineSeries>
<charts:RasterLineSeries.DefaultStyle>
<charts:LineSeriesStyle LineStroke="#ff000000" />
</charts:RasterLineSeries.DefaultStyle>
</charts:RasterLineSeries>
<charts:RasterLineSeries>
<charts:RasterLineSeries.DefaultStyle>
<charts:LineSeriesStyle LineStroke="#ff60b167" />
</charts:RasterLineSeries.DefaultStyle>
</charts:RasterLineSeries>
<charts:RasterLineSeries>
<charts:RasterLineSeries.DefaultStyle>
<charts:LineSeriesStyle LineStroke="#ff436aa9" />
</charts:RasterLineSeries.DefaultStyle>
</charts:RasterLineSeries>
<charts:RasterLineSeries>
<charts:RasterLineSeries.DefaultStyle>
<charts:LineSeriesStyle LineStroke="#ffda843f" />
</charts:RasterLineSeries.DefaultStyle>
</charts:RasterLineSeries>
<charts:RasterLineSeries>
<charts:RasterLineSeries.DefaultStyle>
<charts:LineSeriesStyle LineStroke="#ff6c4a9a" />
</charts:RasterLineSeries.DefaultStyle>
</charts:RasterLineSeries>
</charts:Chart.Series>
</charts:Chart>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.LargeDataSets
{
/// <summary>
/// An example to display how the chart handles very large datasets
/// </summary>
public partial class LargeDataSetsExample : UserControl
{
/// <summary>
/// The number of datapoints in each series
/// </summary>
private int numberOfDataPoints = 5000;
private Random random = new Random(20110810);
/// <summary>
/// Default constructor
/// </summary>
public LargeDataSetsExample()
{
InitializeComponent();
AssignDataSeries();
ZoomHelper.DisablePathLengthRestriction = true;
}
private void AssignDataSeries()
{
// Generate the random data points for the series
var series1 = new DataSeries<int, double>();
var series2 = new DataSeries<int, double>();
var series3 = new DataSeries<int, double>();
var series4 = new DataSeries<int, double>();
var series5 = new DataSeries<int, double>();
var series6 = new DataSeries<int, double>();
for (int i = 0; i <= numberOfDataPoints; i++)
{
series1.Add(CreateDataPoint(i, 1.25));
series2.Add(CreateDataPoint(i, 2.25));
series3.Add(CreateDataPoint(i, 3.25));
series4.Add(CreateDataPoint(i, 4.25));
series5.Add(CreateDataPoint(i, 5.25));
series6.Add(CreateDataPoint(i, 6.25));
}
Chart.Series[0].DataSeries = series1;
Chart.Series[1].DataSeries = series2;
Chart.Series[2].DataSeries = series3;
Chart.Series[3].DataSeries = series4;
Chart.Series[4].DataSeries = series5;
Chart.Series[5].DataSeries = series6;
}
private DataPoint<int, double> CreateDataPoint(int iteration, double baseValue)
{
return new DataPoint<int, double>(iteration, baseValue + random.NextDouble() / 2);
}
}
}
^ 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
