Log Chart | Visiblox Gallery
This example demonstrates the use of a logarithmic axis.
You can change the base of the logarithm by selecting one of the values displayed on the left of the chart.
Presentation of data on a logarithmic scale can be helpful when the data covers a large range of values.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.LogChart.LogChartExample"
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"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="LighterGridlines" TargetType="Line">
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Stroke" Value="#FFF6F6F6" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Name="chart" Width="550" Height="350" Title="Logarithmic Axis" Grid.Column="1"
HorizontalAlignment="Center" Background="Transparent" PlotAreaBorderStyle="{StaticResource NoBorder}">
<!-- Define the x and y axes -->
<charts:Chart.XAxis>
<charts:LinearAxis ShowMajorGridlines="False" />
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LogarithmicAxis ShowMinorGridlines="True" MinorGridlineStyle="{StaticResource LighterGridlines}" />
</charts:Chart.YAxis>
<!-- Define the chart series -->
<charts:Chart.Series>
<charts:LineSeries />
<charts:LineSeries />
<charts:LineSeries />
</charts:Chart.Series>
</charts:Chart>
<!-- Controls that allow the user to change the base of the logarithmic axis -->
<StackPanel Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3">
<TextBlock FontWeight="Bold" Text="Axis Base" />
<ListBox x:Name="YAxisBaseList" BorderThickness="0" Background="{x:Null}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem IsSelected="{Binding IsChecked, ElementName=Base2, Mode=TwoWay}" Margin="5,0,0,0">
<RadioButton x:Name="Base2" GroupName="BaseValue">2</RadioButton>
</ListBoxItem>
<ListBoxItem IsSelected="{Binding IsChecked, ElementName=Base3, Mode=TwoWay}" Margin="5,0,0,0">
<RadioButton x:Name="Base3" GroupName="BaseValue">3</RadioButton>
</ListBoxItem>
<ListBoxItem IsSelected="{Binding IsChecked, ElementName=Base5, Mode=TwoWay}" Margin="5,0,0,0">
<RadioButton x:Name="Base5" GroupName="BaseValue" IsChecked="True">5</RadioButton>
</ListBoxItem>
<ListBoxItem IsSelected="{Binding IsChecked, ElementName=Base10, Mode=TwoWay}" Margin="5,0,0,0">
<RadioButton x:Name="Base10" GroupName="BaseValue">10</RadioButton>
</ListBoxItem>
</ListBox>
</StackPanel>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
namespace Visiblox.Charts.Examples.LogChart
{
public partial class LogChartExample : UserControl
{
public LogChartExample()
{
InitializeComponent();
chart.Loaded += new RoutedEventHandler(chart_Loaded);
chart.Series[0].DataSeries = GenereateDataSeries(2);
chart.Series[1].DataSeries = GenereateDataSeries(4);
chart.Series[2].DataSeries = GenereateDataSeries(6);
}
void chart_Loaded(object sender, RoutedEventArgs e)
{
// Set the Logarithmic Base property of the Y Axis to be bound to the selected radio button
(chart.YAxis as LogarithmicAxis).SetBinding(Charts.LogarithmicAxis.LogarithmicBaseProperty,
new Binding()
{
Source = YAxisBaseList,
Path = new PropertyPath("SelectedItem.Content.Content"),
Mode = BindingMode.TwoWay
});
}
private IDataSeries GenereateDataSeries(int power)
{
DataSeries<double, double> dataSeries = new DataSeries<double, double>();
dataSeries.Title = "f(x) = x^" + power;
for (double x = -10; x <= 10; x += 0.25)
{
dataSeries.Add(x, Math.Pow(x, power));
}
return dataSeries;
}
}
}
^ 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
