Multiple Y Axes | Visiblox Gallery
This example shows how multiple Y axes can be used on the same chart; each of the line series is associated with a different axis. Multiple X axes are supported in a similar fashion. Visiblox Charts supports an arbitrary number of X and Y axes on either side of the chart.
The check boxes below the chart can be used to show or hide either of the axes and the series associated with it.
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.MultipleYAxes.MultipleYAxesExample"
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>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart x:Name="AxesChart" Width="600" Height="350" Title="Monthly Sales Data (December 2009)" HorizontalAlignment="Center"
PlotAreaBorderStyle="{StaticResource NoBorder}" Grid.Row="0" LegendVisibility="Collapsed" >
<charts:Chart.Behaviour>
<charts:ZoomBehaviour />
</charts:Chart.Behaviour>
<charts:Chart.XAxis>
<charts:DateTimeAxis ShowMajorGridlines="False" ShowMinorTicks="False" LabelFormatString="dd/MM">
<charts:DateTimeAxis.Range>
<charts:DateTimeRange Minimum="2009-12-01" Maximum="2010-01-01" />
</charts:DateTimeAxis.Range>
</charts:DateTimeAxis>
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis Title="Daily Sales" ShowMinorTicks="False" ShowMajorGridlines="False" MajorTickInterval="5" >
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="5" Maximum="40" />
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.YAxis>
<charts:Chart.SecondaryYAxis>
<charts:LinearAxis Title="Cumulative Total" ShowMinorTicks="False" ShowMajorGridlines="False" MajorTickInterval="10" LabelFormatString="0'%" >
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="100" />
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.SecondaryYAxis>
<charts:Chart.Series>
<charts:LineSeries LineStrokeThickness="1.5" HighlightingEnabled="True" />
<charts:LineSeries LineStrokeThickness="1.5" HighlightingEnabled="True" />
</charts:Chart.Series>
</charts:Chart>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,20,0">
<Rectangle x:Name="SalesBlock" Margin="0,0,5,0" Height="10" Width="10" Fill="{Binding ElementName=AxesChart, Path=Series[0].PointFill}" VerticalAlignment="Center" />
<TextBlock Text="View Daily Sales" Margin="0,0,5,0" />
<CheckBox x:Name="dailyCheck" IsChecked="True" Margin="0,0,15,0" Checked="dailyCheck_Checked" Unchecked="dailyCheck_Checked" />
<Rectangle x:Name="PercentBlock" Margin="20,0,5,0" Height="10" Width="10" Fill="{Binding ElementName=AxesChart, Path=Series[1].PointFill}" VerticalAlignment="Center" />
<TextBlock Text="View Cumulative % Sales" Margin="0,0,5,0"/>
<CheckBox x:Name="cumulativeCheck" IsChecked="True" Checked="cumulativeCheck_Checked" Unchecked="cumulativeCheck_Checked" />
</StackPanel>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace Visiblox.Charts.Examples.MultipleYAxes
{
/// <summary>
/// An example to demonstrate Visiblox support for having
/// multiple Y axis on a single chart
/// </summary>
public partial class MultipleYAxesExample : UserControl
{
private Random random = new Random(20110810);
private int totalData = 0;
private bool checkDaily = false;
private bool checkPercent = false;
public MultipleYAxesExample()
{
InitializeComponent();
//Generate daily sales data
AxesChart.Series.First().DataSeries = GenerateDataSeries();
//Generate cumulative % sales data
AxesChart.Series[1].YAxis = AxesChart.SecondaryYAxis;
AxesChart.Series[1].DataSeries = GenerateSecondaryAxisData(AxesChart.Series.First());
}
private IDataSeries GenerateDataSeries()
{
var series = new DataSeries<DateTime, double>() { Title = "Daily Sales" };
DateTime currentDate = (DateTime)AxesChart.XAxis.Range.Minimum;
DateTime maxDate = (DateTime)AxesChart.XAxis.Range.Maximum;
DateTime midpointDate = new DateTime(2009, 12, 15);
int number = random.Next(10, 20);
while (currentDate <= maxDate)
{
series.Add(new DataPoint<DateTime, double>() { X = currentDate, Y = number });
totalData += number;
//Change sales amount to give variation on chart
number = currentDate < midpointDate ? random.Next(10, 20) : random.Next(30, 40);
currentDate = currentDate.AddDays(1);
}
return series;
}
private IDataSeries GenerateSecondaryAxisData(IChartSeries series)
{
var percentDataSeries = new DataSeries<DateTime, double>() { Title = "Total % Sales" };
var dailyDataSeries = (DataSeries<DateTime, double>)series.DataSeries;
double total = 0;
//for each daily point, calculate its cumulative % of total sales
foreach (DataPoint<DateTime, double> value in dailyDataSeries)
{
DateTime date = value.X;
total += value.Y;
double percent = total / totalData * 100;
percentDataSeries.Add(new DataPoint<DateTime, double> { X = date, Y = percent });
}
return percentDataSeries;
}
private void dailyCheck_Checked(object sender, RoutedEventArgs e)
{
//only perform if chart has been created
if (checkDaily)
{
LineSeries daily = (LineSeries)AxesChart.Series[0];
//if already visible, hide series, else make it visible
if (daily.Visibility == Visibility.Visible)
{
daily.Visibility = Visibility.Collapsed;
(AxesChart.YAxis as LinearAxis).Visibility = Visibility.Collapsed;
SalesBlock.Fill = new SolidColorBrush(Colors.White);
//only allow one series to be hidden
cumulativeCheck.IsEnabled = false;
}
else
{
daily.Visibility = Visibility.Visible;
(AxesChart.YAxis as LinearAxis).Visibility = Visibility.Visible;
SalesBlock.Fill = (AxesChart.Series[0] as LineSeries).PointFill;
cumulativeCheck.IsEnabled = true;
}
}
checkDaily = true;
}
private void cumulativeCheck_Checked(object sender, RoutedEventArgs e)
{
//only perform is chart has been created
if (checkPercent)
{
LineSeries percent = (LineSeries)AxesChart.Series[1];
if (percent.Visibility == Visibility.Visible)
{
percent.Visibility = Visibility.Collapsed;
(AxesChart.SecondaryYAxis as LinearAxis).Visibility = Visibility.Collapsed;
PercentBlock.Fill = new SolidColorBrush(Colors.White);
//only allow one series to be hidden
dailyCheck.IsEnabled = false;
}
else
{
percent.Visibility = Visibility.Visible;
(AxesChart.SecondaryYAxis as LinearAxis).Visibility = Visibility.Visible;
PercentBlock.Fill = (AxesChart.Series[1] as LineSeries).PointFill;
dailyCheck.IsEnabled = true;
}
}
checkPercent = true;
}
}
}
^ 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
