Column With Error Bars

The ErrorBar class extends the regular Series class to provide error bars that can be added on top of the regular series data.

The sample shows single series column chart with error bars.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; import * as analytics from '@grapecity/wijmo.chart.analytics'; import * as animation from '@grapecity/wijmo.chart.animation'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let barchart = new chart.FlexChart('#chart', { header: 'Average Temperature of Tokyo', legend: { position: chart.Position.None }, bindingX: 'month', itemsSource: getData(), palette: chart.Palettes.zen }); // barchart.series.push(new analytics.ErrorBar({ errorBarStyle: { stroke: 'darkred', strokeWidth: 3 }, binding: 'temperature', value: 1, errorAmount: analytics.ErrorAmount.StandardError })); // let ani = new animation.ChartAnimation(barchart); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Column With Error Bars</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="chart"></div> </div> </body> </html> // Average temerature in Tokyo // https://en.wikipedia.org/wiki/Tokyo#Climate export function getData() { return [ { month: 'Jan', temperature: 5.2 }, { month: 'Feb', temperature: 5.7 }, { month: 'Mar', temperature: 8.7 }, { month: 'Apr', temperature: 13.9 }, { month: 'May', temperature: 18.2 }, { month: 'Jun', temperature: 21.4 }, { month: 'Jul', temperature: 25.0 }, { month: 'Aug', temperature: 26.4 }, { month: 'Sep', temperature: 22.8 }, { month: 'Oct', temperature: 17.5 }, { month: 'Nov', temperature: 12.1 }, { month: 'Dec', temperature: 7.6 } ]; } body { margin-bottom: 24px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnalyticsModule } from '@grapecity/wijmo.angular2.chart.analytics'; import { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { ZenPalette = chart.Palettes.zen; data: any[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } } // @NgModule({ imports: [WjChartModule, WjChartAnalyticsModule, WjChartAnimationModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Column With Error Bars</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-flex-chart [header]="'Average Temperature of Tokyo'" [bindingX]="'month'" [itemsSource]="data" [palette]="ZenPalette"> <wj-flex-chart-legend [position]="'None'"> </wj-flex-chart-legend> <wj-flex-chart-error-bar #errorBar [binding]="'temperature'" [value]="1" [errorAmount]="'StandardError'" [errorBarStyle]="{ stroke: 'darkred', strokeWidth: 3 }"> </wj-flex-chart-error-bar> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { // Average temerature in Tokyo // https://en.wikipedia.org/wiki/Tokyo#Climate getData() { return [ { month: 'Jan', temperature: 5.2 }, { month: 'Feb', temperature: 5.7 }, { month: 'Mar', temperature: 8.7 }, { month: 'Apr', temperature: 13.9 }, { month: 'May', temperature: 18.2 }, { month: 'Jun', temperature: 21.4 }, { month: 'Jul', temperature: 25.0 }, { month: 'Aug', temperature: 26.4 }, { month: 'Sep', temperature: 22.8 }, { month: 'Oct', temperature: 17.5 }, { month: 'Nov', temperature: 12.1 }, { month: 'Dec', temperature: 7.6 } ]; } } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <wj-flex-chart header="Average Temperature of Tokyo" bindingX="month" :itemsSource="data" :palette="palette"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-error-bar binding="temperature" :value="1" errorAmount="StandardError" :errorBarStyle="{ stroke: 'darkred', strokeWidth: 3 }"> </wj-flex-chart-error-bar> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.analytics'; import '@grapecity/wijmo.vue2.chart.animation'; import { getData } from './data'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), palette: wijmo.chart.Palettes.zen } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Column With Error Bars</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> // Average temerature in Tokyo // https://en.wikipedia.org/wiki/Tokyo#Climate export function getData() { return [ { month: 'Jan', temperature: 5.2 }, { month: 'Feb', temperature: 5.7 }, { month: 'Mar', temperature: 8.7 }, { month: 'Apr', temperature: 13.9 }, { month: 'May', temperature: 18.2 }, { month: 'Jun', temperature: 21.4 }, { month: 'Jul', temperature: 25.0 }, { month: 'Aug', temperature: 26.4 }, { month: 'Sep', temperature: 22.8 }, { month: 'Oct', temperature: 17.5 }, { month: 'Nov', temperature: 12.1 }, { month: 'Dec', temperature: 7.6 } ]; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjChart from '@grapecity/wijmo.react.chart'; import * as wjCharts from '@grapecity/wijmo.chart'; import * as wiChartAnalytics from '@grapecity/wijmo.react.chart.analytics'; import * as wjChartAnimate from '@grapecity/wijmo.react.chart.animation'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), palette: wjCharts.Palettes.zen }; } ; render() { return <div className="container-fluid"> <wjChart.FlexChart header="Average Temperature of Tokyo" bindingX="month" itemsSource={this.state.data} palette={this.state.palette}> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wiChartAnalytics.FlexChartErrorBar binding="temperature" value={1} errorAmount="StandardError" errorBarStyle={{ stroke: 'darkred', strokeWidth: 3 }}> </wiChartAnalytics.FlexChartErrorBar> <wjChartAnimate.FlexChartAnimation></wjChartAnimate.FlexChartAnimation> </wjChart.FlexChart> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; } // Comparison of imports vs exports of the United States // https://en.wikipedia.org/wiki/Comparison_of_imports_vs_exports_of_the_United_States export function getData() { return [ { month: 'Jan', temperature: 5.2 }, { month: 'Feb', temperature: 5.7 }, { month: 'Mar', temperature: 8.7 }, { month: 'Apr', temperature: 13.9 }, { month: 'May', temperature: 18.2 }, { month: 'Jun', temperature: 21.4 }, { month: 'Jul', temperature: 25.0 }, { month: 'Aug', temperature: 26.4 }, { month: 'Sep', temperature: 22.8 }, { month: 'Oct', temperature: 17.5 }, { month: 'Nov', temperature: 12.1 }, { month: 'Dec', temperature: 7.6 } ]; }