Blog

Adding Error Bars to XamDataChart in NetAdvantage Vol.11.2

[Infragistics] Mihail Mateev / Sunday, November 6, 2011

The new 11.2 Releases of NetAdvantage for Silverlight and WPF Data Visualization / Line of Business offers an outstanding new feature - Error Bars.

Error bars are a graphical representation of the variability of data and are used on charts to indicate the error, or uncertainty in a reported measurement. They give a general idea of how accurate a measurement is or  how far from the reported value the true (error free) value might be. Error bars often indicate one standard deviation of uncertainty, but may also indicate the standard error.

Within any experimental science, there are always going to be errors in the measurements you make. The more repeat measurements you make, the more confident you can be in the mean value, however you cannot remove the errors altogether. Error bars provide a way to represent the spread of experimental observations graphically.

Starting with Excel 2007, Microsoft offers error bars as a feature for Excel charts.

 

Infragistics  is trying to make consumers feel most comfortable in their work, especially if they have used Microsoft Office package, so in NetAdvantage 11.2 Release are implemented error bars for XamDataChart.

You can display error bars that use a standard error amount, standard deviation, a percentage of the value , fixed error, or data from specific property from the object used like a data context for data point in the chart.

Standard Error and Standard Deviation use the following equations to calculate the error amounts that are shown on the chart.

Standard Error

Standard Error uses this equation

 

Where:

  • s = series number
  • i = point number in series s
  • m = number of series for point y in chart
  • n = number of points in each series
  • yis = data value of series s and the ith point
  • ny = total number of data values in all series

Standard Deviation

Standard Deviation uses this equation

 

 

Where:

  • s = series number
  • i = point number in series s
  • m = number of series for point y in chart
  • n = number of points in each series
  • yis = data value of series s and the ith point
  • ny = total number of data values in all series
  • M = arithmetic mean

Error Bars are supported in the following Series types:

  • ColumnSeries
  • SplineSeries
  • LineSeries
  • AreaSeries
  • StepLineSeries
  • StepAreaSeries
  • SplineAreaSeries
  • All Scatter-Type Series

Unsupported series:

In 11.2 Release error bars cannot be used for stacked or ranged series types. They also won’t appear if you use a DataCalculator with a CategoryDateTimeXAxis.

 

Main Features:

Calculators:

There are various calculators that implement IErrorBarCalculator. The calculator determines the mechanism by which error bar lengths are calculated.

  • Fixed – you provide a value, and all error bars have that value.
  • Percentage – you provide a percentage X (out of 100), and each error bar will look at the reference variable R for its data value and give itself length = (X/100)*R. For Scatter series, see HorizontalCalculatorReference and VerticalCalculatorReference to change the reference variable R.
  • Data – Implemented for 11.2 – you specify arbitrary values for each error bar using the specified DataCalculator.ItemsSource (should be set to the DataChart’s ItemsSource) and DataCalculator.ValueMemberPath.
  • StandardDeviation – Look at the ItemsSource; the value is the Std. Deviation of all items. All error bars have same length and position.
  • StandardError – Look at the ItemsSource; the value is the Std. Error of all items. All error bars have the same length.

 

IG Motion Framework Support

All error-bar supporting series types also support animated transitions, if you want. The error bars should flow like water, or like faithful minions (whichever you prefer, psychologically). To see this in action, set Series.TransitionDuration and Series.TransitionEasingFunction.

 

ErrorBarSetting

ErrorBarSetting is a property, available for Category and Scatter series.   It is from CategoryErrorBarSettings type for  Category Series and from type ScatterErrorBarSettings respectively for Scatter Series. This object contains all settings, used for calculation and visualization of the error bars.

Some of the most important properties are:

  • EnableErrorBarsHorizontal – turns on/off horizontal error bars in the positive/negative directions.
  • EnableErrorBarsVertical – turns on/off vertical error bars in the positive/negative directions.
  • HorizontalStroke, VerticalStroke – Self-explanatory; sets the stroke brush for the error bars.
  • HorizontalStrokeThickness, VerticalStrokeThickness – Yup. It’s how thick you want the error bars to be.
  • HorizontalCalculatorReference – Scatter series only. Lets you set the reference variable for the horizontal calculator, e.g., from X to Y, should you choose.
  • VerticalCalculatorReference – Scatter series only. Lets you set the reference variable for the vertical calculator, e.g., from Y to X, should you choose

How to start with XamDataChart and error bars in Silverlight

  1. Create a Silverlight application
  2. Implement IEnumerable data source with numeric properties, that could be used for chart series.
  3. Add XamDataChart component in Silverlight project
  4. Add error bar settings via ErrorBarSettings property for series, where you want to have error bars.

ErrorBarSetting gives you control over all of the Error bars properties 

   1: <ig:XamDataChart Grid.Row="1" x:Name="xamBarChart"  HorizontalZoomable="True" VerticalZoomable="True" Padding="20">
   2:     <ig:XamDataChart.Axes>
   3:         <ig:NumericXAxis x:Name="BarXAxis" MinimumValue="0" MaximumValue="1000" Interval="200" Label="{}{} TWh" />
   4:         <ig:CategoryYAxis x:Name="BarYAxis" ItemsSource="{Binding EnergySampleData}" Label="{}{Country}" LabelSettings="{StaticResource AxisLabelSettings}">
   5:         </ig:CategoryYAxis>
   6:     </ig:XamDataChart.Axes>
   7:     <ig:XamDataChart.Series>
   8:         <ig:BarSeries ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Coal" 
   9:                             Title="{Binding StringEnergyCoal, Source={StaticResource DataViewModel}}" 
  10:                             XAxis="{Binding ElementName=BarXAxis}" 
  11:                             YAxis="{Binding ElementName=BarYAxis}">
  12:             <ig:BarSeries.ErrorBarSettings>
  13:                 <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="20" 
  14:                                              Stroke="Green"   StrokeThickness="2" >
  15:                     <ig:CategoryErrorBarSettings.Calculator>
  16:                         <ig:FixedValueCalculator Value="15" />
  17:                     </ig:CategoryErrorBarSettings.Calculator>
  18:                 </ig:CategoryErrorBarSettings>
  19:             </ig:BarSeries.ErrorBarSettings>
  20:         </ig:BarSeries>
  21:         
  22:         <ig:BarSeries ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Hydro" 
  23:                             Title="{Binding StringEnergyHydro, Source={StaticResource DataViewModel}}" 
  24:                             XAxis="{Binding ElementName=BarXAxis}" 
  25:                             YAxis="{Binding ElementName=BarYAxis}">
  26:             <ig:BarSeries.ErrorBarSettings>
  27:                 <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="12"
  28:                                              Stroke="DarkBlue" StrokeThickness="2">
  29:                     <ig:CategoryErrorBarSettings.Calculator>
  30:                         <ig:StandardDeviationCalculator ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Hydro" />
  31:                     </ig:CategoryErrorBarSettings.Calculator>
  32:                 </ig:CategoryErrorBarSettings>
  33:             </ig:BarSeries.ErrorBarSettings>
  34:         </ig:BarSeries>
  35:         <ig:BarSeries ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Nuclear" 
  36:                             Title="{Binding StringEnergyNuclear, Source={StaticResource DataViewModel}}" 
  37:                             XAxis="{Binding ElementName=BarXAxis}" 
  38:                             YAxis="{Binding ElementName=BarYAxis}">
  39:             <ig:BarSeries.ErrorBarSettings>
  40:                 <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="10"
  41:                                              Stroke="DarkRed"  StrokeThickness="2">
  42:                     <ig:CategoryErrorBarSettings.Calculator>
  43:                         <ig:StandardErrorCalculator ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Nuclear" />
  44:                     </ig:CategoryErrorBarSettings.Calculator>
  45:                 </ig:CategoryErrorBarSettings>
  46:             </ig:BarSeries.ErrorBarSettings>
  47:         </ig:BarSeries>
  48:         <ig:BarSeries ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Gas" 
  49:                             Title="{Binding StringEnergyGas, Source={StaticResource DataViewModel}}" 
  50:                             XAxis="{Binding ElementName=BarXAxis}" 
  51:                             YAxis="{Binding ElementName=BarYAxis}">
  52:             <ig:BarSeries.ErrorBarSettings>
  53:                 <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="15"
  54:                                              Stroke="DarkOliveGreen"  StrokeThickness="2" >
  55:                     <ig:CategoryErrorBarSettings.Calculator>
  56:                         <ig:PercentageCalculator Value="5" />
  57:                     </ig:CategoryErrorBarSettings.Calculator>
  58:                 </ig:CategoryErrorBarSettings>                       
  59:             </ig:BarSeries.ErrorBarSettings>
  60:         </ig:BarSeries>
  61:         <ig:BarSeries ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Oil" 
  62:                             Title="{Binding StringEnergyOil, Source={StaticResource DataViewModel}}" 
  63:                             XAxis="{Binding ElementName=BarXAxis}" 
  64:                             YAxis="{Binding ElementName=BarYAxis}">
  65:             <ig:BarSeries.ErrorBarSettings>
  66:                 <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="15"
  67:                                              Stroke="Black"  StrokeThickness="2" >
  68:                     <ig:CategoryErrorBarSettings.Calculator>
  69:                         <ig:DataCalculator ItemsSource="{Binding EnergySampleData}" ValueMemberPath="ErrorValue"/>
  70:                     </ig:CategoryErrorBarSettings.Calculator>
  71:                 </ig:CategoryErrorBarSettings>
  72:             </ig:BarSeries.ErrorBarSettings>
  73:         </ig:BarSeries>
  74:  
  75:     </ig:XamDataChart.Series>
  76: </ig:XamDataChart>

 

 

Error bars value is evaluated via Calculator. XamDataChart error bars support these calculators:

  1. FixedValueCalculator
  2. StandardDeviationCalculator
  3. StandardErrorCalculator
  4. PercentageCalculator
  5. DataCalculator

Error bars with fixed value, using  FixedValueCalculator

   1: <ig:BarSeries.ErrorBarSettings>
   2:                        <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="20" 
   3:                                                     Stroke="Green"   StrokeThickness="2" >
   4:                            <ig:CategoryErrorBarSettings.Calculator>
   5:                                <ig:FixedValueCalculator Value="15" />
   6:                            </ig:CategoryErrorBarSettings.Calculator>
   7:                        </ig:CategoryErrorBarSettings>
   8:                    </ig:BarSeries.ErrorBarSettings>

 

Error bars with standard deviation value, using StandardDeviationCalculator

   1: <ig:BarSeries.ErrorBarSettings>
   2:     <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="12"
   3:                                  Stroke="DarkBlue" StrokeThickness="2">
   4:         <ig:CategoryErrorBarSettings.Calculator>
   5:             <ig:StandardDeviationCalculator ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Hydro" />
   6:         </ig:CategoryErrorBarSettings.Calculator>
   7:     </ig:CategoryErrorBarSettings>
   8: </ig:BarSeries.ErrorBarSettings>

Error bars with standard error value, using StandardErrorCalculator

   1: <ig:BarSeries.ErrorBarSettings>
   2:     <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="10"
   3:                                  Stroke="DarkRed"  StrokeThickness="2">
   4:         <ig:CategoryErrorBarSettings.Calculator>
   5:             <ig:StandardErrorCalculator ItemsSource="{Binding EnergySampleData}" ValueMemberPath="Nuclear" />
   6:         </ig:CategoryErrorBarSettings.Calculator>
   7:     </ig:CategoryErrorBarSettings>
   8: </ig:BarSeries.ErrorBarSettings>

Error bars with error like a percentage of data point value, using PercentageCalculator

   1: <ig:BarSeries.ErrorBarSettings>
   2:      <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="15"
   3:                                   Stroke="DarkOliveGreen"  StrokeThickness="2" >
   4:          <ig:CategoryErrorBarSettings.Calculator>
   5:              <ig:PercentageCalculator Value="5" />
   6:          </ig:CategoryErrorBarSettings.Calculator>
   7:      </ig:CategoryErrorBarSettings>                       
   8:  </ig:BarSeries.ErrorBarSettings>

Error bars with error bound to data context property value, using DataCalculator

   1: <ig:BarSeries.ErrorBarSettings>
   2:     <ig:CategoryErrorBarSettings EnableErrorBars="Both" ErrorBarCapLength="15"
   3:                                  Stroke="Black"  StrokeThickness="2" >
   4:         <ig:CategoryErrorBarSettings.Calculator>
   5:             <ig:DataCalculator ItemsSource="{Binding EnergySampleData}" ValueMemberPath="ErrorValue"/>
   6:         </ig:CategoryErrorBarSettings.Calculator>
   7:     </ig:CategoryErrorBarSettings>
   8: </ig:BarSeries.ErrorBarSettings>

You could use different category and scatter series with error bars.

Line series with error bars

 

Scatter series with error bars

 

 

  For scatter series you could use HorizontalCalculator and VertcalCalculator instead Calculator in category series

   1: <ig:XamDataChart x:Name="ScatterChart" Visibility="Visible" PlotAreaBorderBrush="Transparent" 
   2:              HorizontalZoomable="True" HorizontalZoombarVisibility="Visible" 
   3:              VerticalZoomable="True" VerticalZoombarVisibility="Visible" 
   4:              ig:SyncManager.SyncSettings="syncScatterSeries" Margin="0">
   5:  
   6:     <ig:XamDataChart.Axes>
   7:         <ig:NumericXAxis x:Name="ScatterXAxis" LabelSettings="{StaticResource XAxisLabelSettings}" Interval="2" MinimumValue="-3" MaximumValue="15" />
   8:         <ig:NumericYAxis x:Name="ScatterYAxis" LabelSettings="{StaticResource YAxisLabelSettings}" />
   9:     </ig:XamDataChart.Axes>
  10:     <ig:XamDataChart.Series>
  11:         <ig:ScatterSeries ItemsSource="{StaticResource ScatterSampleData}" 
  12:                       MarkerType="Circle" 
  13:                       XMemberPath="X" YMemberPath="Y"  
  14:                       XAxis="{Binding ElementName=ScatterXAxis}" 
  15:                       YAxis="{Binding ElementName=ScatterYAxis}">
  16:             <ig:ScatterSeries.ErrorBarSettings>
  17:                 <ig:ScatterErrorBarSettings EnableErrorBarsHorizontal="Both" 
  18:                                         EnableErrorBarsVertical="Both"
  19:                                         HorizontalErrorBarCapLength="10"  
  20:                                         HorizontalStroke="DarkGreen" 
  21:                                         HorizontalStrokeThickness="2"
  22:                                         HorizontalCalculatorReference="X"
  23:                                         VerticalCalculatorReference="Y"
  24:                                         VerticalStroke="DarkBlue" 
  25:                                         VerticalErrorBarCapLength="10"  
  26:                                         VerticalStrokeThickness="2">
  27:                     <ig:ScatterErrorBarSettings.HorizontalCalculator>                                    
  28:                         <ig:PercentageCalculator Value="10" />
  29:                     </ig:ScatterErrorBarSettings.HorizontalCalculator>
  30:                     <ig:ScatterErrorBarSettings.VerticalCalculator>
  31:                         <ig:PercentageCalculator Value="12" />
  32:                     </ig:ScatterErrorBarSettings.VerticalCalculator>
  33:                 </ig:ScatterErrorBarSettings>
  34:             </ig:ScatterSeries.ErrorBarSettings>
  35:         </ig:ScatterSeries>
  36:         <ig:ScatterSeries ItemsSource="{StaticResource ScatterSampleData2}" 
  37:                       MarkerType="Circle" 
  38:                       XMemberPath="X" YMemberPath="Y" 
  39:                       XAxis="{Binding ElementName=ScatterXAxis}" 
  40:                       YAxis="{Binding ElementName=ScatterYAxis}">
  41:             <ig:ScatterSeries.ErrorBarSettings>
  42:                 <ig:ScatterErrorBarSettings EnableErrorBarsHorizontal="Both" 
  43:                                         EnableErrorBarsVertical="Both"
  44:                                         HorizontalErrorBarCapLength="10"  
  45:                                         HorizontalStroke="DarkRed" 
  46:                                         HorizontalStrokeThickness="2"
  47:                                         VerticalStroke="Brown" 
  48:                                         VerticalErrorBarCapLength="10"  
  49:                                         VerticalStrokeThickness="2">
  50:                     <ig:ScatterErrorBarSettings.HorizontalCalculator>
  51:                         <ig:StandardErrorCalculator ItemsSource="{StaticResource ScatterSampleData2}" ValueMemberPath="X" />
  52:                     </ig:ScatterErrorBarSettings.HorizontalCalculator>
  53:                     <ig:ScatterErrorBarSettings.VerticalCalculator>
  54:                         <ig:StandardErrorCalculator ItemsSource="{StaticResource ScatterSampleData2}" ValueMemberPath="Y" />
  55:                     </ig:ScatterErrorBarSettings.VerticalCalculator>
  56:                 </ig:ScatterErrorBarSettings>
  57:             </ig:ScatterSeries.ErrorBarSettings>
  58:         </ig:ScatterSeries>
  59:         <ig:ScatterLineSeries ItemsSource="{StaticResource ScatterSampleData3}" 
  60:                       MarkerType="Circle" 
  61:                       XMemberPath="X" YMemberPath="Y" 
  62:                       XAxis="{Binding ElementName=ScatterXAxis}" 
  63:                       YAxis="{Binding ElementName=ScatterYAxis}">
  64:             <ig:ScatterLineSeries.ErrorBarSettings>
  65:                 <ig:ScatterErrorBarSettings EnableErrorBarsHorizontal="Negative" 
  66:                                         EnableErrorBarsVertical="None"
  67:                                         HorizontalErrorBarCapLength="10"  
  68:                                         HorizontalStroke="Purple" 
  69:                                         HorizontalStrokeThickness="2"
  70:                                         VerticalStroke="Yellow" 
  71:                                         VerticalErrorBarCapLength="10"  
  72:                                         VerticalStrokeThickness="2">
  73:                     <ig:ScatterErrorBarSettings.HorizontalCalculator>
  74:                         <ig:StandardDeviationCalculator ItemsSource="{StaticResource ScatterSampleData3}" ValueMemberPath="X" />
  75:                     </ig:ScatterErrorBarSettings.HorizontalCalculator>
  76:                     <ig:ScatterErrorBarSettings.VerticalCalculator>
  77:                         <ig:StandardDeviationCalculator ItemsSource="{StaticResource ScatterSampleData3}" ValueMemberPath="Y" />
  78:                     </ig:ScatterErrorBarSettings.VerticalCalculator>
  79:                 </ig:ScatterErrorBarSettings>
  80:             </ig:ScatterLineSeries.ErrorBarSettings>
  81:         </ig:ScatterLineSeries>
  82:         <ig:ScatterSeries ItemsSource="{StaticResource ScatterSampleData4}" 
  83:                       MarkerType="Circle" 
  84:                       XMemberPath="X" YMemberPath="Y" 
  85:                       XAxis="{Binding ElementName=ScatterXAxis}" 
  86:                       YAxis="{Binding ElementName=ScatterYAxis}">
  87:             <ig:ScatterSeries.ErrorBarSettings>
  88:                 <ig:ScatterErrorBarSettings EnableErrorBarsHorizontal="None"
  89:                                         EnableErrorBarsVertical="Positive"
  90:                                         HorizontalErrorBarCapLength="10"  
  91:                                         HorizontalStroke="Green" 
  92:                                         HorizontalStrokeThickness="2"
  93:                                         VerticalStroke="Gray" 
  94:                                         VerticalErrorBarCapLength="10"  
  95:                                         VerticalStrokeThickness="2">
  96:                     <ig:ScatterErrorBarSettings.HorizontalCalculator>
  97:                         <ig:DataCalculator ItemsSource="{StaticResource ScatterSampleData4}" ValueMemberPath="Radius" />
  98:                     </ig:ScatterErrorBarSettings.HorizontalCalculator>
  99:                     <ig:ScatterErrorBarSettings.VerticalCalculator>
 100:                         <ig:DataCalculator ItemsSource="{StaticResource ScatterSampleData4}" ValueMemberPath="Radius" />
 101:                     </ig:ScatterErrorBarSettings.VerticalCalculator>
 102:                 </ig:ScatterErrorBarSettings>
 103:             </ig:ScatterSeries.ErrorBarSettings>
 104:             
 105:         </ig:ScatterSeries>
 106:     </ig:XamDataChart.Series>
 107: </ig:XamDataChart>

 

Sample application you could download here:

You could download NetAdvantage 11.2 bits after product release date. Then you could  rebuild and run the sample application.

 

Error bars are a significant feature in XamDataChart for NetAdvantage Data Visualization and Line of Business 11.2 for all XAML platforms. You can try it a few days. Follow news from Infragistics in http://infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.