Welcome to WindowsClient.net | Sign in | Join
in

WindowsClient.net

nevron

June 2008 - Posts

  • Working with Nevron Chart Scale Breaks – Using Axis Scale Breaks

    Introduction

    Creating a chart that is informative to the user is a challenging task. Being focused on the data visualization Nevron Chart for .NET sets the standards in data visualization technology by supporting a variety of features allowing you to create informative and readable charts. One such feature is the complete support for axis scale breaks.

    Features

    Axis scale breaks are most commonly used in the following cases:

    - When you have to display data that varies greatly in magnitude.
    - When you need to reduce the effect that several large values (peaks in data) have on the scaling of the rest of data.
    - When you want to skip data that is of no interest in order to focus on the rest of the data.

    Nevron Chart fully supports scale breaks on all types of axes (horizontal, vertical, depth, reversed, date time etc.) in both 2D and 3D mode and allows you to have complete control over the scale break position and style.

    As shown on the above picture the noise levels raise dramatically between 10 to 12 o’clock creating a peak in data. The effect is to visually marginalize the other smaller peaks in the sound level, thus reducing the ability of the user of the chart to analyze these smaller peaks. In cases like this one you may consider to introduce a scale break on the y axis in order to increase the chart readability. The following chart shows how an automatic scale break will effectively increase the visual space available for the data:

    This is achieved through the following code:

    [C#]
    NAxis primaryY = (NAxis)chart.Axis(StandardAxis.PrimaryY);
    NStandardScaleConfigurator noiseScale = primaryY.ScaleConfigurator as NStandardScaleConfigurator;

    NAutoScaleBreak autoScaleBreak = new NAutoScaleBreak();
    noiseScale.ScaleBreaks.Add(autoScaleBreak);

    [VB.NET]
    Dim primaryY As NAxis = chart.Axis(StandardAxis.PrimaryY)
    Dim noiseScale As NStandardScaleConfigurator = CType(primaryY.ScaleConfigurator, NStandardScaleConfigurator)

    Dim autoScaleBreak As NAutoScaleBreak = New NAutoScaleBreak()
    noiseScale.ScaleBreaks.Add(autoScaleBreak)

    Notice that now the smaller peaks in data are now more visible, but the chart still does not look quite good. In particular the scale break filling and style do not match the visual appearance of the chart, therefore it is a nice idea to introduce wave scale break style with some other filling:

    This is achieved by adding the following code:

    [C#]
    NWaveScaleBreakStyle waveScaleBreakStyle = new NWaveScaleBreakStyle();
    waveScaleBreakStyle.FillStyle = new NColorFillStyle(Color.FromArgb(20, 1, 137, 146));
    waveScaleBreakStyle.StrokeStyle.Color = Color.FromArgb(1, 137, 146);
    waveScaleBreakStyle.Pattern = ScaleBreakPattern.FreeHand;
    waveScaleBreakStyle.Length = new NLength(5);
    autoScaleBreak.Style = waveScaleBreakStyle;

    [VB.NET]
    Dim waveScaleBreakStyle As NWaveScaleBreakStyle = New NWaveScaleBreakStyle()
    waveScaleBreakStyle.FillStyle = New NColorFillStyle(Color.FromArgb(20, 1, 137, 146))
    waveScaleBreakStyle.StrokeStyle.Color = Color.FromArgb(1, 137, 146)
    waveScaleBreakStyle.Pattern = ScaleBreakPattern.FreeHand
    waveScaleBreakStyle.Length = New NLength(5)
    autoScaleBreak.Style = waveScaleBreakStyle

    Finally since the data below the scale break is more it is probably better to place the scale break closer to the top side of the chart. The following chart has a scale break positioned relatively to the amount of data contained in the [0, 25] and [70, 90] ranges. Since the data in the lower range is more it will occupy more space on the primary Y axis:

    This is done with one line of code:

    [C#]
    autoScaleBreak.Position = new NContentScaleBreakPosition();

    [VB.NET]
    autoScaleBreak.Position = New NContentScaleBreakPosition()

    Working with Nevron Chart Scale Breaks you can add custom scale breaks on the chart primary X and Y axes in 2D or 3D charts.

     

     

    Conclusion

    Nevron Chart for .NET fully supports scale breaks and additionally allows you to customize a variety of options to get the desired result for your charts. Very few charting packages support this level of flexibility when working with scale breaks. More information on scale breaks is available in the Users Guide shipped with the fully functional, not time restricted evaluation of the component available at http://www.nevron.com.

     

  • Working with Chart Multiple Axes – Nevron Chart Axis Docking

    Introduction

    Having a chart with several Y axes is a requirement you will meet very often when you develop charting enabled applications. It is essential that a good charting product supports flexible Y axis positioning and layout. This white paper outlines the different options you have with Nevron Chart for .NET to address a variety of situations requiring you to use multiple Y axes.

    Features

    The most common requirement is to have two Y axes and two series scaling on each of them. This is common when you need to compare two series of data that differ in magnitude or measurement, but you still want to have the ability to compare them visually in order to give the end user the ability to analyze trends or relations between the two. For example consider the following picture showing 120 days of imaginary water measurement:

    It is clear that the user cannot properly analyze the two since water reserves differ in magnitude from water debit.

    One solution would be to use a secondary axis for the debit data in order to show the two trends simultaneously:

    On the above picture the debit measurement is shown on the secondary primary axis and is additionally rebased at 90. The code used to scale the debit area on the secondary Y axis is:

    [C#]
    NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
    secondaryY.Visible = true;

    areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, false);
    areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, true);

    [VB.NET]
    Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
    secondaryY.Visible = True

    areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, False)
    areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, True)

    Note that the chart area has shrunk when the secondary Y axis is made visible. In certain cases you may want to have both axes on the same side of the chart. The following picture shows this:

    In order to change the position of the SecondaryY axes you must modify its anchor:

    [C#]
    NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
    secondaryY.Visible = true;
    secondaryY.Anchor = new
    NDockAxisAnchor(AxisDockZone.FrontLeft);

    [VB.NET]
    Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
    secondaryY.Visible = True
    secondaryY.Anchor = New
    NDockAxisAnchor(AxisDockZone.FrontLeft)

    Now the secondary Y axis is docked on the left side to the primary Y (showing the range [0, 1200]).

    The above chart needs another touch. When you dock several axes to a single axis dock zone (in the above case left zone) you may want to introduce some color coding linking the axes to the series that scale on them. This is necessary because the user cannot visually comprehend whether the debit scales from 90 to 115 or from 0 to 1200. The following picture shows how the axes are now color coded to match the content that scales on them:

    Note that we also disabled the inner major ticks in the axes in order to save some space. This is achieved through the following code:

    [C#]
    NAxis primaryY = (NAxis)chart.Axis(StandardAxis.PrimaryY);
    NStandardScaleConfigurator primaryScaleY = primaryY.ScaleConfigurator as NStandardScaleConfigurator;
    primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange;
    primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange;
    primaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
    primaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.DarkOrange);

    NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
    NLinearScaleConfigurator secondaryScaleY = secondaryY.ScaleConfigurator as NLinearScaleConfigurator;
    secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green;
    secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green;
    secondaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
    secondaryScaleY.UseOrigin = true;
    secondaryScaleY.Origin = 100;
    secondaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.Green);

    [VB.NET]
    Dim primaryY As NAxis = chart.Axis(StandardAxis.PrimaryY)
    Dim primaryScaleY As NStandardScaleConfigurator = CType(primaryY.ScaleConfigurator, NStandardScaleConfigurator)
    primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange
    primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange
    primaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
    primaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.DarkOrange)

    Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
    Dim secondaryScaleY As NLinearScaleConfigurator = CType(secondaryY.ScaleConfigurator, NLinearScaleConfigurator)
    secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green
    secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green
    secondaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
    secondaryScaleY.UseOrigin = True
    secondaryScaleY.Origin = 100
    secondaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.Green)

    Nevron Chart can have an unlimited number of custom vertical and horizontal axes. You can specify the axis on which a particular series is scaled. When using axis docking you can also specify whether the axis will create a separate level in the dock zone or use the last created one. This allows you to have two or more axes in a zone level that share a percentage of the chart wall.

     

    Conclusion

    Nevron Chart for .NET fully supports charts with several X and Y axes and additionally allows you to customize a variety of options to get the desired result for your charts. Very few charting packages support docking several axes on the left or rights side of the chart area. More information on axis positioning is available in the Users Guide shipped with the fully functional, not time restricted evaluation of the component available at http://www.nevron.com/.

  • Working with Nevron Chart for .NET - XYZ Scatter Graphs

    Introduction

    The requirements for presentation charts are always high and very often simple bars and lines are not enough to impress the audience. The rich feature set of Nevron Chart for .NET enables you to go beyond the limits of "ordinary" charts and opens a field of action for your imagination.

    In this whitepaper you can track the process of creating a chart that presents data for the Carbon Dioxide emissions of European countries. We will try to get the most out of the component and set up a chart that is interesting, attractive and informative.

    Data

    First we have to examine the structure of the data and choose an appropriate form of representation.

    The data source contains entries for 10 countries, where the following values are provided per country:

    1. Actual CO2 emissions for the year 2005, measured in Million Metric Tons of CO2 Equivalent (MMTCO2). They are split into three categories by economy sectors that are major sources of energy-related CO2:

    • Electric Power Production
    • Transportation
    • Industrial, Commercial and Residential

    2. Proposed emissions caps for the period 2008-2012 (MMTCO2 per year).

    3. Granted emissions caps by the European commission for the same period (MMTCO2 per year).

    Chart

    The values in the first three columns add up to the total emissions for the year 2005, so they can be naturally represented as a stack. The fourth and the fifth values can be placed next to the stack, so that the proposed and granted emissions caps can be easily compared to the actual emissions. The cluster-stack combination that is formed can be displayed as a 2D plot:

    An interesting idea is to make the chart 3-Dimensional and place the bars on top of the Europe map. For this purpose we'll create a Mesh surface series and texture it with a pre-rendered image of the Europe map. We'll also set the ratio of the X:Z chart dimensions to be equal to the X:Y ratio of the map image, so that the map is not distorted. For example if the image size is 540 x 650 pixels, we set the chart width to 54 and the chart depth to 65.

    The XYZ cluster bar chart is a unique feature of Nevron Chart for .NET. It gives us the ability to place each cluster at arbitrary positions along the X and Z axes. We just have to fill the X and Z values in the first bar series of the cluster and set the UseXValues and UseZValues properties of the series to true.

    The Y axis shouldn't be very long because otherwise the bars will get taller and will obstruct greater part of the image. With shorter bars the readability is decreased a little bit compared to the 2D chart, but in return we have a chart that looks really impressive.

    Only a few finishing touches remain before the chart is complete. We'll place a title above the chart and a legend that explains the color coding of the bars. The built-in xml formatted texts will come helpful for splitting the long title into two lines and displaying the subscript in "CO2". A soft blurred shadow behind the title gives depth to the final image.

    Nevron Chart for .NET has support for XYZ Scatter Stack/Cluster Bars, Line, Smooth Line, Point, Bubble, Shape and Error Bar Graphs.

    Conclusion

    Nevron Chart for .NET is in a class of its own when it comes to displaying true 3D charts like surface plots and XYZ scatters. The component offers a wide range of charting types with variety of applications and can be used for the creation of presentation charts with great visual impact. More information about the discussed features is available in the Users Guide shipped with the fully functional, not time restricted evaluation of the component available at http://www.nevron.com/.

Page view counter