• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
Silverlight
  • Product Platforms
  • More
Silverlight
Silverlight Using Logarithmic Scales to Clearly Communicate Chart Data
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
Silverlight requires membership for participation - click to join
  • Silverlight
  • Auto-Detail Zoom with MapLayers
  • Building the oMovies Browser: Netflix oData using Infragistics NetAdvantage Silverlight Controls
  • Conditional Formatting With The XamWebGrid
  • Custom Commands with Infragistics Silverlight Commanding Framework
  • -Data Display using xamWebMap
    • Using Logarithmic Scales to Clearly Communicate Chart Data
  • Displaying AutoCAD drawings using xamWebMap
  • Extension Methods for Navigating the xamDataChart
  • faceOut - A Silverlight Reference Implementation
  • Red vs. Blue: Conditional Formatting in xamWebMap
  • Styling the xamWebGrid Group By Area
  • Using the VirtualCollection for Server-Side xamWebGrid Paging

Using Logarithmic Scales to Clearly Communicate Chart Data

A cool feature of the xamWebChart is the ability to set an axis to use a logarithmic scale rather than a traditional linear scale.  Using a logarithmic scale is useful when you have a set of data that covers a wide value range since the logarithmic scale can reduce the range to a more manageable size and result in the data being displayed in a more readable way in the chart.

To show the affects of the logarithmic scale vs the linear scale, I am going to create a chart that displays the history of the U.S. national debt.  This is a good example of a dataset that covers a very wide range of values, having a low value of about 34,000 and a high value of over 10 trillion (thats 10,000,000,000,000).  I’ve create a simple class called Debt to hold my data that contains a Date and a Value. 

public class Debt
{
    public Debt(double value, DateTime date)
    {
        this.Date = date;
        this.Value = value;
    }

    public DateTime Date { get; set; }
    public double Value { get; set; }
}

Next, I create an ObservableCollection and populate it with a collection of Debt objects, each one containing a date representing the end of a fiscal year (starting from 1791), and a value which represents the national dept on that date.  The data I am using came from U.S. Treasury’s Department of the Public Debt website.

Now I can add a chart and assign it this data and add the chart to the root of my Silverlight app.

 

XamWebChart chart = new XamWebChart();
Series s = new Series() 
{ 
    ChartType=ChartType.ScatterLine, 
    DataMapping = "ValueX=Date;ValueY=Value", 
    DataSource = _debt.Reverse()
};
chart.Series.Add(s);

this.LayoutRoot.Children.Add(chart);

 

Running this code results in a graph like he one shown below:

image 

The problem is that because the debt has increased so dramatically since the late 70’s, early 80’s, those numbers are orders of magnitude larger that the debt prior to that, and by using as linear scale on the Y axis to show the debt values, data points prior to 1980 are basically lost.  Using a logarithmic scale in this scenario will help me display the data which spans many orders of magnitude without losing any of its meaning.

To change the chart to use a log scale, all I have to do is define a new Y axis and set its Logarithmic property to true:

 

chart.Axes.Add(
    new Axis() { 
        AxisType = AxisType.PrimaryY, 
        Logarithmic = true
    });

 

Now running the sample, you can see because the chart is using a logarithmic Y axis, and its very clear that at some point in history, the U.S. has almost no national debt. 

image

Rather than simply dividing the charts value range equally, resulting in the first tick mark being placed at 3 trillion and doubling each subsequent tick mark, the log axis calculates a log curve, placing the first tick mark at 10,000 with each subsequent tick increasing by an order of magnitude.

Now that the chart is displaying the data more clearly, I want to add some axis labels to add more context to the chart.  I can use standard Silverlight layout panels in XAML to add both a Y axis label, and a chart title:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock FontSize="22" HorizontalAlignment="Center" 
        Grid.Row="0" TextAlignment="Center"> 
        <Run>United States National Debt</Run><LineBreak/><Run>1791 to Present</Run>
    </TextBlock>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" HorizontalAlignment="Center" 
            RenderTransformOrigin="0.5,0.5"  VerticalAlignment="Center" 
            TextAlignment="Center">
            <TextBlock.RenderTransform> 
            	<TransformGroup>
            		<ScaleTransform/>
            		<SkewTransform/>
            		<RotateTransform Angle="-90"/>
            		<TranslateTransform/>
            	</TransformGroup>
            </TextBlock.RenderTransform>            
            <Run>Debt</Run><LineBreak/><Run>(log scale)</Run>
        </TextBlock>
	    <igChart:XamWebChart x:Name="xamWebChart1" Grid.Column="1" 
            HorizontalAlignment="Stretch" Margin="0,0,0,10" />                
    </Grid>
</Grid>

The XAML creates an 2 row outer grid with the chart title in the first row.  In the second row, a 2 column grid contains both the Y-axis title (which is using a RenderTransform to rotate it 90 degrees), and the chart control.

Now all I have to do is clean up the chart a bit by providing some custom formatting to the axis tick marks and labels and adjusting the X axis range.

 

this.xamWebChart1.Axes.Add(
    new Axis() { 
        AxisType = AxisType.PrimaryY, 
        Logarithmic = true,
        AutoRange=false,
        Minimum=1,
        Maximum=100000000000000,
        Unit=1
    });

this.xamWebChart1.Axes.Add(
    new Axis() { 
        AxisType = AxisType.PrimaryX, 
        AutoRange = false, 
        Maximum = DateTime.Parse("1/1/2009").ToOADate(), 
        Minimum = DateTime.Parse("1/1/1791").ToOADate(), 
        Unit = 1500 
    });

this.xamWebChart1.Axes[0].Label.Format = "{0:N0}";
this.xamWebChart1.Axes[0].Label.FontSize = 11;
this.xamWebChart1.Axes[0].MinorGridline = new GridlineGroup();
this.xamWebChart1.Axes[0].MinorGridline.Visibility = Visibility.Collapsed;

this.xamWebChart1.Axes[1].Crossing = DateTime.Parse("1/1/1791").ToOADate();
this.xamWebChart1.Axes[1].Label.Format = "{0:yyyy}";
this.xamWebChart1.Axes[1].Label.LabelStyle = this.Resources["LabelStyle1"] as Style;
this.xamWebChart1.Axes[1].MajorGridline.Visibility = Visibility.Collapsed;
this.xamWebChart1.Axes[1].MajorTickMark.Unit = 400;

this.xamWebChart1.Legend = new Legend();
this.xamWebChart1.Legend.Visibility = Visibility.Collapsed;

 

The final chart presents the data in a clear, easy to read manner, with properly formatted axis labels and informative chart titles.

Technorati Tags: Silverlight,xamWebChart
  • Data Visualization
  • Silverlight
  • XamWebChart
  • Share
  • History
  • More
  • Cancel
Related
Recommended