Box & Whisker

Box and Whisker series (AKA boxplots) show groups of numerical data through their quartiles. They have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles.

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 { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new chart.FlexChart('#theChart', { itemsSource: getData(), bindingX: 'country', tooltip: { content: '{seriesName}: <b>{x}</b>' }, palette: getRandomPalette() }); // // create BoxWhisker series for 'sales' and add it to the chart theChart.series.push(new analytics.BoxWhisker({ name: 'Sales', binding: 'sales', groupWidth: 0.7, gapWidth: 0.2 })); // // create BoxWhisker series for 'expenses' and add it to the chart theChart.series.push(new analytics.BoxWhisker({ name: 'Expenses', binding: 'expenses', groupWidth: 0.7, gapWidth: 0.2 })); // // customize the BoxWhisker series document.querySelector('#innerPoints').addEventListener('click', e => { theChart.series.forEach((series) => { series.showInnerPoints = e.target.checked; }); }); document.querySelector('#outliers').addEventListener('click', e => { theChart.series.forEach((series) => { series.showOutliers = e.target.checked; }); }); document.querySelector('#meanline').addEventListener('click', e => { theChart.series.forEach((series) => { series.showMeanLine = e.target.checked; }); }); document.querySelector('#meanmarker').addEventListener('click', e => { theChart.series.forEach((series) => { series.showMeanMarker = e.target.checked; }); }); document.querySelector('#rotated').addEventListener('click', e => { theChart.rotated = e.target.checked; }); // // randomize the data document.querySelector('#btnRandomize').addEventListener('click', () => { theChart.itemsSource = getData(); }); } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart BoxWhisker</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 class="form-group"> <label for="innerPoints">Show Inner Points:</label> <input id="innerPoints" type="checkbox"> <label for="outliers">Show Outliers:</label> <input id="outliers" type="checkbox"> </div> <div class="form-group"> <label for="meanline">Show Mean Line:</label> <input id="meanline" type="checkbox"> <label for="meanmarker">Show Mean Marker:</label> <input id="meanmarker" type="checkbox"> </div> <div class="form-group"> <label for="rotated">Rotated:</label> <input id="rotated" type="checkbox"> <label for="btnRandomize">Randomize Data</label> <button id="btnRandomize" class="btn btn-default"> Go </button> </div> <div id="theChart"></div> </div> </body> </html> // create some random data // the data items contain arrays of values rather than single values export function getData() { let countries = ['US', 'Canada', 'Mexico', 'Germany', 'UK', 'France', 'Japan', 'Korea', 'China'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: getRandomArray(20, 10000), expenses: getRandomArray(20, 5000) }); } // return data; } // function getRandomArray(count, max) { let arr = []; // for (var i = 0; i < count; i++) { arr.push(Math.random() * max / 3 + Math.random() * max / 3 + Math.random() * max / 3); } // return arr; } .wj-flexchart { height: 300px; } label { width: 160px; text-align: right; } 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 { FormsModule } from '@angular/forms'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnalyticsModule } from '@grapecity/wijmo.angular2.chart.analytics'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; palette: any; rotated: boolean; showMeanLine: boolean; showMeanMarker: boolean; showInnerPoints: boolean; showOutliers: boolean; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.rotated = false; this.palette = this._getRandomPalette(); this.showMeanLine = false; this.showMeanMarker = false; this.showInnerPoints = false; this.showOutliers = false; } randomizeData() { this.data = this.dataService.getData(); } // private _getRandomPalette() { let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; } } // @NgModule({ imports: [WjChartModule, WjChartAnalyticsModule, BrowserModule, FormsModule], 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 BoxWhisker</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"> <div class="form-group"> <label for="innerPoints">Show Inner Points:</label> <input id="innerPoints" type="checkbox" [(ngModel)]="showInnerPoints" /> <label for="outliers">Show Outliers:</label> <input id="outliers" type="checkbox" [(ngModel)]="showOutliers" /> </div> <div class="form-group"> <label for="meanline">Show Mean Line:</label> <input id="meanline" type="checkbox" [(ngModel)]="showMeanLine" /> <label for="meanmarker">Show Mean Marker:</label> <input id="meanmarker" type="checkbox" [(ngModel)]="showMeanMarker" /> </div> <div class="form-group"> <label for="rotated">Rotated:</label> <input id="rotated" type="checkbox" [(ngModel)]="rotated" /> <label for="btnRandomize">Randomize Data</label> <button id="btnRandomize" class="btn btn-default" (click)="randomizeData()"> Go </button> </div> <wj-flex-chart bindingX="country" [tooltipContent]="'{seriesName}: <b>{x}</b>'" [itemsSource]="data" [palette]="palette" [rotated]="rotated"> <wj-flex-chart-box-whisker binding="sales" name="Sales" [groupWidth]="0.7" [gapWidth]="0.2" [showMeanLine]="showMeanLine" [showMeanMarker]="showMeanMarker" [showInnerPoints]="showInnerPoints" [showOutliers]="showOutliers"> </wj-flex-chart-box-whisker> <wj-flex-chart-box-whisker binding="expenses" name="Expenses" [groupWidth]="0.7" [gapWidth]="0.2" [showMeanLine]="showMeanLine" [showMeanMarker]="showMeanMarker" [showInnerPoints]="showInnerPoints" [showOutliers]="showOutliers"> </wj-flex-chart-box-whisker> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let countries = ['US', 'Canada', 'Mexico', 'Germany', 'UK', 'France', 'Japan', 'Korea', 'China'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: this.getRandomArray(20, 10000), expenses: this.getRandomArray(20, 5000) }); } // return data; } // getRandomArray(count: number, max: number) { let arr = []; // for (var i = 0; i < count; i++) { arr.push( Math.random() * max / 3 + Math.random() * max / 3 + Math.random() * max / 3 ); } // return arr; } } .wj-flexchart { height: 300px; } label { width: 160px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <div class="form-group"> <label for="innerPoints">Show Inner Points:</label> <input id="innerPoints" type="checkbox" v-model="showInnerPoints" /> <label for="outliers">Show Outliers:</label> <input id="outliers" type="checkbox" v-model="showOutliers" /> </div> <div class="form-group"> <label for="meanline">Show Mean Line:</label> <input id="meanline" type="checkbox" v-model="showMeanLine" /> <label for="meanmarker">Show Mean Marker:</label> <input id="meanmarker" type="checkbox" v-model="showMeanMarker" /> </div> <div class="form-group"> <label for="rotated">Rotated:</label> <input id="rotated" type="checkbox" v-model="rotated" /> <label for="btnRandomize">Randomize Data</label> <button id="btnRandomize" class="btn btn-default" @click="randomizeData"> Go </button> </div> <wj-flex-chart bindingX="country" tooltipContent="{seriesName}: <b>{x}</b>" :itemsSource="data" :palette="palette" :rotated="rotated"> <wj-flex-chart-box-whisker binding="sales" name="Sales" :groupWidth=0.7 :gapWidth=0.2 :showMeanLine="showMeanLine" :showMeanMarker="showMeanMarker" :showInnerPoints="showInnerPoints" :showOutliers="showOutliers"> </wj-flex-chart-box-whisker> <wj-flex-chart-box-whisker binding="expenses" name="Expenses" :groupWidth=0.7 :gapWidth=0.2 :showMeanLine="showMeanLine" :showMeanMarker="showMeanMarker" :showInnerPoints="showInnerPoints" :showOutliers="showOutliers"> </wj-flex-chart-box-whisker> </wj-flex-chart> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import * as chart from '@grapecity/wijmo.chart'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.analytics'; import { getData } from './data'; // new Vue({ el: '#app', data: { data: getData(), rotated: false, showMeanLine: false, showMeanMarker: false, showInnerPoints: false, showOutliers: false, palette: (() => { // Get random palette let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; })() }, methods: { randomizeData() { this.data = getData(); } } }); </script> <style> .container-fluid .wj-flexchart { height: 300px; } label { width: 160px; text-align: right; } body { margin-bottom: 24px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart BoxWhisker</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> // create some random data // the data items contain arrays of values rather than single values export function getData() { let countries = ['US', 'Canada', 'Mexico', 'Germany', 'UK', 'France', 'Japan', 'Korea', 'China'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: getRandomArray(20, 10000), expenses: getRandomArray(20, 5000) }); } // return data; } // function getRandomArray(count, max) { let arr = []; // for (var i = 0; i < count; i++) { arr.push( Math.random() * max / 3 + Math.random() * max / 3 + Math.random() * max / 3 ); } // return arr; } 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 chart from '@grapecity/wijmo.chart'; import * as wjChart from '@grapecity/wijmo.react.chart'; import * as wjChartAnalytics from '@grapecity/wijmo.react.chart.analytics'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.initChart = (sender) => { sender.tooltip.content = '{seriesName}: <b>{x}</b>'; }; this.randomizeData = () => { this.setState({ data: getData() }); }; this.updateInnerPointsStatus = (target) => { this.setState({ showInnerPoints: target.checked }); }; this.updateOutliers = (target) => { this.setState({ showOutliers: target.checked }); }; this.updateMeanLine = (target) => { this.setState({ showMeanLine: target.checked }); }; this.updateMeanMarker = (target) => { this.setState({ showMeanMarker: target.checked }); }; this.updateRrotated = (target) => { this.setState({ rotated: target.checked }); }; this.state = { data: getData(), rotated: false, showMeanLine: false, showMeanMarker: false, showInnerPoints: false, showOutliers: false, palette: (() => { // Get random palette let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; })() }; } render() { return <div className="container-fluid"> <div className="form-group"> <label htmlFor="innerPoints">Show Inner Points:</label> <input id="innerPoints" type="checkbox" defaultChecked={false} onChange={e => this.updateInnerPointsStatus(e.target)}/> <label htmlFor="outliers">Show Outliers:</label> <input id="outliers" type="checkbox" defaultChecked={false} onChange={e => this.updateOutliers(e.target)}/> </div> <div className="form-group"> <label htmlFor="meanline">Show Mean Line:</label> <input id="meanline" type="checkbox" defaultChecked={false} onChange={e => this.updateMeanLine(e.target)}/> <label htmlFor="meanmarker">Show Mean Marker:</label> <input id="meanmarker" type="checkbox" defaultChecked={false} onChange={e => this.updateMeanMarker(e.target)}/> </div> <div className="form-group"> <label htmlFor="rotated">Rotated:</label> <input id="rotated" type="checkbox" defaultChecked={false} onChange={e => this.updateRrotated(e.target)}/> <label htmlFor="btnRandomize">Randomize Data</label> <button id="btnRandomize" className="btn btn-default" onClick={this.randomizeData}> Go </button> </div> <wjChart.FlexChart bindingX="country" itemsSource={this.state.data} initialized={this.initChart} palette={this.state.palette} rotated={this.state.rotated}> <wjChartAnalytics.FlexChartBoxWhisker binding="sales" name="Sales" groupWidth={0.7} gapWidth={0.2} showMeanLine={this.state.showMeanLine} showMeanMarker={this.state.showMeanMarker} showInnerPoints={this.state.showInnerPoints} showOutliers={this.state.showOutliers}> </wjChartAnalytics.FlexChartBoxWhisker> <wjChartAnalytics.FlexChartBoxWhisker binding="expenses" name="Expenses" groupWidth={0.7} gapWidth={0.2} showMeanLine={this.state.showMeanLine} showMeanMarker={this.state.showMeanMarker} showInnerPoints={this.state.showInnerPoints} showOutliers={this.state.showOutliers}> </wjChartAnalytics.FlexChartBoxWhisker> </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> .wj-flexchart { height: 300px; } label { width: 160px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; } export function getData() { let countries = ['US', 'Canada', 'Mexico', 'Germany', 'UK', 'France', 'Japan', 'Korea', 'China'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: getRandomArray(20, 10000), expenses: getRandomArray(20, 5000) }); } // return data; } // function getRandomArray(count, max) { let arr = []; // for (var i = 0; i < count; i++) { arr.push(Math.random() * max / 3 + Math.random() * max / 3 + Math.random() * max / 3); } // return arr; }