Error Bars

Error bars allow you to quickly display margins of error and standard deviations in your charts.

<p>When using charts to display data, it can be useful to display margins of error for each point. Showing a positive or negative error amount in the results of a scientific experiment can show the variability of the results at a glance. </p> <p>The error type (error amount) can be set with the following:</p> <ul> <li><strong>Fixed Value</strong> set error bar with a fixed value.</li> <li><strong>Pecentage</strong> set error bar with a pecentage of data value in the same direction axis.</li> <li><strong>Standard deviation</strong> set error bar with a calculating value which dependents on the set deviation and chart data value.</li> <li><strong>Standard error</strong> set error bar with a calculating value which only dependents on the chart data value.</li> <li><strong>Custom</strong> set error bar with positive and negative values represent by formulas or fixed number.</li> </ul> <p>This feature supports the following chart types:</p> <ul> <li><strong>Column</strong></li> <li><strong>Line</strong></li> <li><strong>Bar</strong></li> <li><strong>Area</strong></li> <li><strong>Scatter</strong></li> <li><strong>Bubble</strong></li> </ul> <h2 id="customize">Customize</h2> <p><strong>type</strong>: Specify the visibility of negative error bar and positive error bar.</p> <p><strong>noEndCap</strong>: Specify the visibility of the error bar caps.</p> <p><strong>style</strong>: Specify the line style of the error bar including color, width, and dashline.</p> <p>You can customize the error bars using the following code:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> series = chart.series().get(<span class="hljs-number">0</span>); series.errorBars = { <span class="hljs-attr">horizontal</span>: { <span class="hljs-attr">type</span>: GC.Spread.Sheets.Charts.ErrorBarType.both, <span class="hljs-attr">valueType</span>: GC.Spread.Sheets.Charts.ErrorBarValueType.fixedValue, <span class="hljs-attr">value</span>: <span class="hljs-number">0.4</span>, <span class="hljs-comment">// error bar value</span> <span class="hljs-attr">noEndCap</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">style</span>: { <span class="hljs-attr">width</span>: <span class="hljs-number">4</span>, <span class="hljs-comment">// line width</span> <span class="hljs-attr">dashStyle</span>: GC.Spread.Sheets.Charts.LineDashStyle.dash } }, <span class="hljs-attr">vertical</span>: { <span class="hljs-attr">type</span>: GC.Spread.Sheets.Charts.ErrorBarType.minus, <span class="hljs-attr">valueType</span>: GC.Spread.Sheets.Charts.ErrorBarValueType.percentage, <span class="hljs-attr">value</span>: <span class="hljs-number">90</span>, <span class="hljs-comment">// 90%</span> <span class="hljs-attr">style</span>: { <span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span> <span class="hljs-comment">// line color</span> } } }; chart.series().set(<span class="hljs-number">0</span>, series); </code></pre>
var COLORS = { deepBlue: '#3e619f', blue: '#a1b8e1', deepOrange: '#c55a11', orange: '#f6be98', white: '#ffffff' }; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 }); addBasicChart(spread.getSheet(0)); addStepChart(spread.getSheet(1)); addGanttChart(spread.getSheet(2)); }; function addBasicChart(sheet) { sheet.name("BaseUsage"); var salesData = [ ['', 'Sales'], ['Jan', 54], ['Feb', 60], ['Mar', 86], ['Apr', 92], ['May', 112], ['Jun', 157], ['Jul', 202], ['Aug', 195], ['Sep', 187], ['Oct', 194], ['Nov', 238], ['Dec', 289], ]; sheet.setArray(0, 0, salesData); var chart1 = sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 140, 5, 500, 350, "A1:B13", GC.Spread.Sheets.Charts.RowCol.columns); var series = chart1.series().get(0); series.errorBars = { vertical: { type: GC.Spread.Sheets.Charts.ErrorBarType.both, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.standardError, style: { color: COLORS.deepOrange } } }; chart1.series().set(0, series); } function addStepChart(sheet) { sheet.name("StepChart"); var priceData = [ ['', 'Price Changes', 'x-error', 'y-error-negative', 'y-error-positive'], [new Date('5/7/2019'), 39], [new Date('5/27/2019'), 47], [new Date('6/15/2019'), 30], [new Date('6/24/2019'), 46], [new Date('8/3/2019'), 37], [new Date('8/28/2019'), 50], [new Date('9/29/2019'), 43], [new Date('10/30/2019'), 48], ]; sheet.setArray(0, 0, priceData); sheet.setFormula(1, 2, "=IF(A3, A3-A2, 20)"); sheet.setFormula(1, 3, "=IFERROR(IF(B1-B2>0, B1-B2, 0), 0)"); sheet.setFormula(1, 4, "=IFERROR(IF(B2-B1>0, B2-B1, 0), 0)"); sheet.fillAuto(new GC.Spread.Sheets.Range(1, 2, 1, 3), new GC.Spread.Sheets.Range(1, 2, 8, 3), { direction: GC.Spread.Sheets.Fill.FillDirection.down, fillType: GC.Spread.Sheets.Fill.FillType.auto }); sheet.getRange(1, 1, 8, 1).formatter('_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)'); sheet.setColumnWidth(0, 100); sheet.setColumnWidth(1, 100); var chart = sheet.charts.add("StepChart", GC.Spread.Sheets.Charts.ChartType.xyScatter, 200, 5, 800, 450, "A1:B9", GC.Spread.Sheets.Charts.RowCol.columns); var axes = chart.axes(); axes.primaryCategory.format = 'm/d/yyyy'; axes.primaryCategory.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.outside; chart.axes(axes); chart.legend({ visible: false }); var series = chart.series().get(0); series.symbol = { fill: null, border: { color: null } }; // Hide the symbol. series.errorBars = { horizontal: { type: GC.Spread.Sheets.Charts.ErrorBarType.plus, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { positive: '=StepChart!$C$2:$C$9' } }, vertical: { valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { positive: '=StepChart!$D$2:$D$9', negative: '=StepChart!$E$2:$E$9' }, style: { color: "gray", dashStyle: GC.Spread.Sheets.Charts.LineDashStyle.dash } } }; chart.series().set(0, series); var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above; dataLabels.format = '$* #,##0.00'; dataLabels.color = "red"; chart.dataLabels(dataLabels); } function addGanttChart(sheet) { sheet.name("GanttChart"); var ganttData = [ ['End Date', 'Height'], [new Date('4/15/2019'), 0.9375], [new Date('4/29/2019'), 0.8125], [new Date('5/6/2019'), 0.6875], [new Date('5/20/2019'), 0.5625], [new Date('5/27/2019'), 0.4375], [new Date('6/17/2019'), 0.3125], [new Date('6/24/2019'), 0.1875], [new Date('7/1/2019'), 0.0625] ]; sheet.setArray(0, 0, ganttData); sheet.setColumnWidth(0, 100); var SIZE = 12; var ZFACTOR = 25; var chart = sheet.charts.add("GanttChart", GC.Spread.Sheets.Charts.ChartType.xyScatter, 180, 5, 500, 350, "A1:B9", GC.Spread.Sheets.Charts.RowCol.columns); chart.title({ text: 'Project Progress' }); var axes = chart.axes(); axes.primaryCategory.format = 'm/d/yyyy'; axes.primaryCategory.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.outside; axes.primaryValue.visible = false; chart.axes(axes); chart.legend({ visible: false }); var backgroundSeriesIndex = 0; var backgroundSeries = chart.series().get(backgroundSeriesIndex); var backgroundErrorBar = { type: GC.Spread.Sheets.Charts.ErrorBarType.minus, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { negative: '={' + ZFACTOR + '}' }, style: { color: COLORS.blue, width: SIZE } }; backgroundSeries.errorBars = { horizontal: backgroundErrorBar }; backgroundSeries.symbol = { shape: GC.Spread.Sheets.Charts.SymbolShape.diamond, size: SIZE, fill: COLORS.deepBlue }; chart.series().set(backgroundSeriesIndex, backgroundSeries); var unfinishedSeries = { chartType: GC.Spread.Sheets.Charts.ChartType.xyScatter, axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary, xValues: 'GanttChart!$A$2:$A$9', yValues: 'GanttChart!$B$2:$B$9', symbol: { shape: GC.Spread.Sheets.Charts.SymbolShape.diamond, size: SIZE - 4, fill: COLORS.deepOrange }, errorBars: { horizontal: { type: GC.Spread.Sheets.Charts.ErrorBarType.minus, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { negative: '={' + createErrorBarValue(ganttData.slice(1), ZFACTOR).toString() + '}' }, style: { color: COLORS.orange, width: SIZE } } } }; chart.series().add(unfinishedSeries); var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.below; dataLabels.format = '#,##0%'; dataLabels.color = COLORS.orange; chart.dataLabels(dataLabels); } function createErrorBarValue(dataSource, z) { var values = []; for (var i = 0; i < dataSource.length; i++) { values.push(dataSource[i][1] * z); } return values; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100% ; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }