Pareto

Pareto charts, named after Vilfredo Pareto, contain both bars and a line graph, where individual values are represented in descending order by bars, and the cumulative total is represented by the line.

The left vertical axis may contain the frequency of occurrence, cost or any another important unit of measure. The right vertical axis is the cumulative percentage of the total number of occurrences, cost, or total of the particular unit of measure.

Pareto charts help identify the items that account for most of the occurrences so they can be prioritized.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create secondary Y axis for cumulative sales values let axisY2 = new wjChart.Axis(); axisY2.position = wjChart.Position.Right; axisY2.title = 'Cumulative Sales'; axisY2.format = 'p0'; axisY2.min = 0; axisY2.axisLine = true; // // create the Pareto chart let theChart = new wjChart.FlexChart('#theChart', { itemsSource: getData(), chartType: 'Column', bindingX: 'make', axisY: { format: 'n0,', title: 'Sales (thousands)', axisLine: true }, axisX: { labelAngle: -90 }, legend: { position: 'None' }, series: [ { binding: 'sales', name: 'Sales (thousands)' }, { binding: 'cumSales', name: 'Cumulative Sales', chartType: 'Line', axisY: axisY2, style: { stroke: 'orange', strokeWidth: 4 } } ], palette: getRandomPalette() }); // // change the data to update the chart document.querySelector('#btnUpdate').addEventListener('click', () => { let view = theChart.collectionView; // view.deferUpdate(() => { view.items.forEach((item) => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); }); } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.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 Pareto</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"> <button id="btnUpdate" class="btn btn-default">Update</button> </div> <div id="theChart"></div> </div> </body> </html> import * as wijmo from '@grapecity/wijmo'; // get the chart data export function getData() { // some raw data let data = [ { make: 'Vokswagen', sales: 2532435 }, { make: 'Toyota', sales: 2338453 }, { make: 'Renault-Nissan', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: 'Hyundai-Kia', sales: 1553547 }, { make: 'Ford', sales: 1521153 }, { make: 'Suzuki', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'Daimler', sales: 440234 }, { make: 'BMW Group', sales: 586121 }, { make: 'Geely', sales: 410353 }, { make: 'Mazda', sales: 389243 }, { make: 'Chang\'an', sales: 389323 }, { make: 'Subaru', sales: 230221 }, { make: 'Tata Group', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => updateCumSales(view)); // // done return view; } // // update cumulative sales function updateCumSales(view) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach((item) => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); } .wj-flexchart { margin: 0 auto; border: none; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, ViewChild, 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 { DataService, TDataItem } from './app.data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: wjCore.CollectionView; palette: any; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.palette = this._getRandomPalette(); } // updateData() { let view = this.data; // view.deferUpdate(() => { view.items.forEach((item: TDataItem) => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); } // private _getRandomPalette() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; } } // @NgModule({ imports: [FormsModule, WjChartModule, 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 Pareto</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"> <button id="btnUpdate" class="btn btn-default" (click)="updateData()">Update</button> </div> <wj-flex-chart [itemsSource]="data" chartType="Column" binding="make" [palette]="palette"> <wj-flex-chart-axis wjProperty="axisY" format="n0" title="Sales (thousands)" [axisLine]="true"> </wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisX" [labelAngle]="-90"></wj-flex-chart-axis> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series binding="sales" name="Sales (thousands)"></wj-flex-chart-series> <wj-flex-chart-series binding="cumSales" name="Cumulative Sales" chartType="Line" [style]="{'stroke':'orange', 'strokeWidth': 4}"> <wj-flex-chart-axis wjProperty="axisY" position="Right" title="Cumulative Sales" format="p0" [min]="0" [axisLine]="true"></wj-flex-chart-axis> </wj-flex-chart-series> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; import * as wijmo from '@grapecity/wijmo'; // export type TDataItem = { make: string; sales: number; cumSales?: number; } // @Injectable() export class DataService { getData() { // some raw data let data: TDataItem[] = [ { make: 'Vokswagen', sales: 2532435 }, { make: 'Toyota', sales: 2338453 }, { make: 'Renault-Nissan', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: 'Hyundai-Kia', sales: 1553547 }, { make: 'Ford', sales: 1521153 }, { make: 'Suzuki', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'Daimler', sales: 440234 }, { make: 'BMW Group', sales: 586121 }, { make: 'Geely', sales: 410353 }, { make: 'Mazda', sales: 389243 }, { make: 'Chang\'an', sales: 389323 }, { make: 'Subaru', sales: 230221 }, { make: 'Tata Group', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales this._updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => this._updateCumSales(view)); // // done return view; } // // update cumulative sales private _updateCumSales(view: wijmo.CollectionView) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach((item) => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); } } .wj-flexchart { margin: 0 auto; border: none; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="form-group"> <button id="btnUpdate" class="btn btn-default" @click="updateData">Update</button> </div> <wj-flex-chart :itemsSource="data" chartType="Column" binding="make" :palette="palette"> <wj-flex-chart-axis wjProperty="axisY" format="n0" title="Sales (thousands)" :axisLine=true> </wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisX" :labelAngle=-90></wj-flex-chart-axis> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series binding="sales" name="Sales (thousands)"></wj-flex-chart-series> <wj-flex-chart-series binding="cumSales" name="Cumulative Sales" chartType="Line" :style="{'stroke':'orange', 'strokeWidth': 4}"> <wj-flex-chart-axis wjProperty="axisY" position="Right" title="Cumulative Sales" format="p0" :min=0 :axisLine=true></wj-flex-chart-axis> </wj-flex-chart-series> </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 { getData } from './data'; // new Vue({ el: '#app', data: { data: getData(), 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: { updateData() { let view = this.data; // view.deferUpdate(() => { view.items.forEach(item => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); } } }); </script> <style> .container-fluid .wj-flexchart { margin: 0 auto; border: none; } 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 Pareto</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'; // export function getData() { // some raw data let data = [ { make: 'Vokswagen', sales: 2532435 }, { make: 'Toyota', sales: 2338453 }, { make: 'Renault-Nissan', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: 'Hyundai-Kia', sales: 1553547 }, { make: 'Ford', sales: 1521153 }, { make: 'Suzuki', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'Daimler', sales: 440234 }, { make: 'BMW Group', sales: 586121 }, { make: 'Geely', sales: 410353 }, { make: 'Mazda', sales: 389243 }, { make: 'Chang\'an', sales: 389323 }, { make: 'Subaru', sales: 230221 }, { make: 'Tata Group', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => updateCumSales(view)); // // done return view; } // // update cumulative sales function updateCumSales(view) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach(item => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); } 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 { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.updateData = () => { let view = this.state.data; // view.deferUpdate(() => { view.items.forEach(item => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); }; this.state = { data: getData(), 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"> <button id="btnUpdate" className="btn btn-default" onClick={this.updateData}>Update</button> </div> <wjChart.FlexChart itemsSource={this.state.data} palette={this.state.palette} chartType="Column" binding="make"> <wjChart.FlexChartAxis wjProperty="axisY" format="n0" title="Sales (thousands)" axisLine={true}> </wjChart.FlexChartAxis> <wjChart.FlexChartAxis wjProperty="axisX" labelAngle={-90}></wjChart.FlexChartAxis> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartSeries binding="sales" name="Sales (thousands)"></wjChart.FlexChartSeries> <wjChart.FlexChartSeries binding="cumSales" name="Cumulative Sales" chartType="Line" style={{ 'stroke': 'orange', 'strokeWidth': 4 }}> <wjChart.FlexChartAxis wjProperty="axisY" position="Right" title="Cumulative Sales" format="p0" min={0} axisLine={true}> </wjChart.FlexChartAxis> </wjChart.FlexChartSeries> </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 Pareto</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 { margin: 0 auto; border: none; } body { margin-bottom: 24pt; } import * as wijmo from '@grapecity/wijmo'; export function getData() { // some raw data let data = [ { make: 'Vokswagen', sales: 2532435 }, { make: 'Toyota', sales: 2338453 }, { make: 'Renault-Nissan', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: 'Hyundai-Kia', sales: 1553547 }, { make: 'Ford', sales: 1521153 }, { make: 'Suzuki', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'Daimler', sales: 440234 }, { make: 'BMW Group', sales: 586121 }, { make: 'Geely', sales: 410353 }, { make: 'Mazda', sales: 389243 }, { make: 'Chang\'an', sales: 389323 }, { make: 'Subaru', sales: 230221 }, { make: 'Tata Group', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales _updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => _updateCumSales(view)); // // done return view; } // // update cumulative sales function _updateCumSales(view) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach((item) => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); }