Palettes | Visiblox Gallery
This example demonstrates how to change palettes on the fly.
Zooming has been enabled - click and drag with the mouse on the plot area or use the mouse wheel to zoom, double click to unzoom.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.PaletteChanging.PaletteChangingExample"
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>
<!-- Define Palettes for the three line series -->
<charts:Palette x:Key="RedPalette">
<Style TargetType="charts:LineSeries">
<Setter Property="LineStroke" Value="#FFD77171" />
<Setter Property="LineStrokeThickness" Value="1.5" />
<Setter Property="PointFill" Value="#FFD77171" />
</Style>
</charts:Palette>
<charts:Palette x:Key="GreyPalette">
<Style TargetType="charts:LineSeries">
<Setter Property="LineStroke" Value="#FF939898" />
<Setter Property="LineStrokeThickness" Value="3" />
<Setter Property="PointFill" Value="#FF939898" />
<Setter Property="PointSize" Value="8" />
</Style>
</charts:Palette>
<charts:Palette x:Key="GreenPalette">
<Style TargetType="charts:LineSeries">
<Setter Property="LineStroke" Value="#FF91BF70" />
<Setter Property="LineStrokeThickness" Value="5" />
<Setter Property="PointFill" Value="#FF91BF70" />
</Style>
</charts:Palette>
<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">
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Name="PaletteChanging" Width="600" Height="350" Title="Changing Palettes" HorizontalAlignment="Center" Palette="{StaticResource RedPalette}"
LegendVisibility="Collapsed" PlotAreaBorderStyle="{StaticResource NoBorder}">
<charts:Chart.Behaviour>
<charts:ZoomBehaviour/>
</charts:Chart.Behaviour>
<charts:Chart.Series>
<charts:LineSeries ShowLine="True" ShowPoints="True" />
</charts:Chart.Series>
<charts:Chart.XAxis>
<charts:LinearAxis ShowMinorTicks="False" ShowMajorGridlines="False" >
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="50"/>
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis ShowMinorTicks="False" ShowMajorGridlines="False">
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="50"/>
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.YAxis>
</charts:Chart>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;
namespace Visiblox.Charts.Examples.PaletteChanging
{
/// <summary>
/// An example for automatically changing the palette of a chart
/// at set time increments in a continuous cycle
/// </summary>
public partial class PaletteChangingExample : UserControl
{
private Random random = new Random(20110815);
/// <summary>
/// A list of the available resource names.
/// These are defined in XAML.
/// </summary>
private List<string> resourceNames = new List<string>() { "GreyPalette", "RedPalette", "GreenPalette" };
/// <summary>
/// The timer for firing the event to change the style
/// </summary>
private DispatcherTimer timer;
/// <summary>
/// The current index of the palette in the resources
/// </summary>
private int currentIndex = 0;
/// <summary>
/// The tick duration as the styles should change in milliseconds
/// </summary>
private int timerTickDuration = 2000;
/// <summary>
/// The maximum y value in the randomly generated data
/// </summary>
private int randomYMaxValue = 50;
/// <summary>
/// The total number of values to generate
/// </summary>
private int numberOfValues = 50;
/// <summary>
/// Default constructor
/// </summary>
public PaletteChangingExample()
{
InitializeComponent();
// Initiate the first data line
PaletteChanging.Series.First().DataSeries = GenerateDataSeries();
InitialiseTimer();
}
/// <summary>
/// Create the data series for this chart - randomly generate 3 lines
/// </summary>
private IDataSeries GenerateDataSeries()
{
var series = new DataSeries<int, int>();
for (int x = 1; x < numberOfValues; x++)
{
int next = random.Next(1, randomYMaxValue);
series.Add(new DataPoint<int, int>(x, next));
}
return series;
}
/// <summary>
/// Initialise a timer to toggle the styles from RedPalette to BluePalette
/// </summary>
private void InitialiseTimer()
{
timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 0, 0, timerTickDuration);
timer.Tick += new EventHandler(timer_Tick);
timer.Start();
}
/// <summary>
/// Switch the palette styles based on Resources
/// </summary>
void timer_Tick(object sender, EventArgs e)
{
if (((FrameworkElement)PaletteChanging.Parent).ActualWidth == 0)
{
// If the chart is no longer displayed, stop running
timer.Stop();
}
// Else cycle to next style
currentIndex = (currentIndex + 1) % resourceNames.Count;
PaletteChanging.Palette = (Palette)Resources[resourceNames[currentIndex]];
}
}
}
^ 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
