Demo
Waterfall Theme: Default Cerulean Clean Dark Clean Light Cocoa Coral Cyborg Dark Flatly Grayscale High Contrast Light Material Midnight Minimal Modern Office Organic Paper Simplex Slate Superhero Trust Zen
Waterfall charts help in understanding the cumulative effect of sequentially introduced positive or negative values. The Waterfall chart is also known as a "flying bricks" chart or Mario chart due to the apparent suspension of columns in mid-air.
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: 'date'
});
//
// create Waterfall series for 'sales' and add it to the chart
let sales = new analytics.Waterfall({
name: 'Increase,Decrease,Total',
binding: 'sales',
styles: {
start: { fill: 'blue', stroke: 'blue' },
total: { fill: 'yellow', stroke: 'yellow' },
falling: { fill: 'red', stroke: 'red' },
rising: { fill: 'green', stroke: 'green' },
connectorLines: { stroke: 'blue', 'stroke-dasharray': '3, 1' }
}
});
theChart.series.push(sales);
//
// customize the Waterfall series
document.querySelector('#connectorLines').addEventListener('click', e => {
sales.connectorLines = e.target.checked;
});
//
document.querySelector('#showTotal').addEventListener('click', e => {
sales.showTotal = e.target.checked;
});
//
// randomize the data
document.querySelector('#btnRandomize').addEventListener('click', () => {
theChart.itemsSource = getData();
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexChart Waterfall</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="connectorLines">Show Connector Lines: </label>
<input id="connectorLines" type="checkbox">
</div>
<div class="form-group">
<label for="showTotal">Show Total Bar: </label>
<input id="showTotal" type="checkbox">
</div>
<div class="form-group">
<label for="btnRandomize">Randomize Data</label>
<button id="btnRandomize" class="btn btn-default">
Go
</button>
</div>
<div id="theChart"></div>
</div>
</body>
</html>
import * as wijmo from '@grapecity/wijmo';
//
// create some data
export function getData() {
let data = [], date = new Date();
//
date = wijmo.DateTime.addYears(date, -1);
for (let month = 0; month < 12; month++) {
data.push({
date: wijmo.Globalize.format(date, 'MMM yyyy'),
sales: (Math.random() - .4) * 1000
});
//
date = wijmo.DateTime.addMonths(date, 1);
}
//
return data;
}
.wj-flexchart {
height: 300px;
}
label {
width: 200px;
text-align: right;
}
body {
margin-bottom: 24pt;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
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[];
connectorLines = false;
showTotal = false;
styles = {
start: { fill: 'blue', stroke: 'blue' },
total: { fill: 'yellow', stroke: 'yellow' },
falling: { fill: 'red', stroke: 'red' },
rising: { fill: 'green', stroke: 'green' },
connectorLines: { stroke: 'blue', 'stroke-dasharray': '3, 1' }
};
//
constructor(@Inject(DataService) private dataService: DataService) {
this.data = dataService.getData();
}
//
randomizeData() {
this.data = this.dataService.getData();
}
}
//
@NgModule({
imports: [FormsModule, WjChartModule, WjChartAnalyticsModule, 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 Waterfall</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="iptConnectorLines">Show Connector Lines: </label>
<input id="iptConnectorLines" type="checkbox" [(ngModel)]="connectorLines" />
</div>
<div class="form-group">
<label for="iptShowTotal">Show Total Bar: </label>
<input id="iptShowTotal" type="checkbox" [(ngModel)]="showTotal" />
</div>
<div class="form-group">
<label for="btnRandomize">Randomize Data</label>
<button id="btnRandomize" class="btn btn-default" (click)="randomizeData()">
Go
</button>
</div>
<wj-flex-chart [itemsSource]="data" bindingX="date">
<wj-flex-chart-waterfall name="Increase,Decrease,Total" binding="sales" [styles]="styles" [connectorLines]="connectorLines"
[showTotal]="showTotal">
</wj-flex-chart-waterfall>
</wj-flex-chart>
</div>
import { Injectable } from '@angular/core';
import * as wijmo from '@grapecity/wijmo';
//
@Injectable()
export class DataService {
getData() {
let data = [],
date = new Date();
//
date = wijmo.DateTime.addYears(date, -1);
for (let month = 0; month < 12; month++) {
data.push({
date: wijmo.Globalize.format(date, 'MMM yyyy'),
sales: (Math.random() - .4) * 1000
});
//
date = wijmo.DateTime.addMonths(date, 1);
}
//
return data;
}
}
.wj-flexchart {
height: 300px;
}
label {
width: 200px;
text-align: right;
margin-right: 3px;
}
body {
margin-bottom: 24pt;
}
<template>
<div class="container-fluid">
<div class="form-group">
<label for="iptConnectorLines">Show Connector Lines: </label>
<input id="iptConnectorLines" type="checkbox" v-model="connectorLines" />
</div>
<div class="form-group">
<label for="iptShowTotal">Show Total Bar: </label>
<input id="iptShowTotal" type="checkbox" v-model="showTotal" />
</div>
<div class="form-group">
<label for="btnRandomize">Randomize Data</label>
<button id="btnRandomize" class="btn btn-default" @click="randomizeData">
Go
</button>
</div>
<wj-flex-chart :itemsSource="data" bindingX="date">
<wj-flex-chart-waterfall name="Increase,Decrease,Total" binding="sales" :connectorLines="connectorLines"
:showTotal="showTotal" :initialized="onWaterfallInitialized">
</wj-flex-chart-waterfall>
</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(),
connectorLines: false,
showTotal: false
},
methods: {
onWaterfallInitialized(sender) {
sender.styles = {
start: { fill: 'blue', stroke: 'blue' },
total: { fill: 'yellow', stroke: 'yellow' },
falling: { fill: 'red', stroke: 'red' },
rising: { fill: 'green', stroke: 'green' },
connectorLines: { stroke: 'blue', 'stroke-dasharray': '3, 1' }
};
},
randomizeData() {
this.data = getData();
}
}
});
</script>
<style>
.container-fluid .wj-flexchart {
height: 300px;
}
label {
width: 200px;
text-align: right;
}
body {
margin-bottom: 24pt;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexChart Waterfall</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>
import * as wijmo from '@grapecity/wijmo';
//
// create some data
export function getData() {
let data = [],
date = new Date();
//
date = wijmo.DateTime.addYears(date, -1);
for (let month = 0; month < 12; month++) {
data.push({
date: wijmo.Globalize.format(date, 'MMM yyyy'),
sales: (Math.random() - .4) * 1000
});
//
date = wijmo.DateTime.addMonths(date, 1);
}
//
return data;
}
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 wjChartAnalytics from '@grapecity/wijmo.react.chart.analytics';
import { getData } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.onWaterfallInitialized = (sender) => {
sender.styles = {
start: { fill: 'blue', stroke: 'blue' },
total: { fill: 'yellow', stroke: 'yellow' },
falling: { fill: 'red', stroke: 'red' },
rising: { fill: 'green', stroke: 'green' },
connectorLines: { stroke: 'blue', 'stroke-dasharray': '3, 1' }
};
};
this.randomizeData = () => {
this.setState({ data: getData() });
};
this.updateConnectorLinesStatus = (target) => {
this.setState({ connectorLines: target.checked });
};
this.updateTotalStatus = (target) => {
this.setState({ showTotal: target.checked });
};
this.state = {
data: getData(),
connectorLines: false,
showTotal: false
};
}
render() {
return <div className="container-fluid">
<div className="form-group">
<label htmlFor="iptConnectorLines">Show Connector Lines: </label>
<input id="iptConnectorLines" type="checkbox" defaultChecked={false} onChange={e => this.updateConnectorLinesStatus(e.target)}/>
</div>
<div className="form-group">
<label htmlFor="iptShowTotal">Show Total Bar: </label>
<input id="iptShowTotal" type="checkbox" defaultChecked={false} onChange={e => this.updateTotalStatus(e.target)}/>
</div>
<div className="form-group">
<label htmlFor="btnRandomize">Randomize Data</label>
<button id="btnRandomize" className="btn btn-default" onClick={this.randomizeData}>
Go
</button>
</div>
<wjChart.FlexChart itemsSource={this.state.data} bindingX="date">
<wjChartAnalytics.FlexChartWaterfall name="Increase,Decrease,Total" binding="sales" connectorLines={this.state.connectorLines} showTotal={this.state.showTotal} initialized={this.onWaterfallInitialized}></wjChartAnalytics.FlexChartWaterfall>
</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>GrapeCity Wijmo FlexChart Waterfall</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: 200px;
text-align: right;
margin-right: 3px;
}
body {
margin-bottom: 24pt;
}
import * as wijmo from '@grapecity/wijmo';
export function getData() {
let data = [], date = new Date();
//
date = wijmo.DateTime.addYears(date, -1);
for (let month = 0; month < 12; month++) {
data.push({
date: wijmo.Globalize.format(date, 'MMM yyyy'),
sales: (Math.random() - .4) * 1000
});
//
date = wijmo.DateTime.addMonths(date, 1);
}
//
return data;
}
