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.

Learn about FlexChart | FlexChart API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { isArray } from '@grapecity/wijmo'; import { FlexChart, Axis, Position, Palettes } 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 Axis(); axisY2.position = Position.Right; axisY2.title = 'Cumulative Sales'; axisY2.format = 'p0'; axisY2.min = 0; axisY2.axisLine = true; // // create the Pareto chart let theChart = new 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.keys(Palettes).filter(prop => isArray(Palettes[prop])); let rand = Math.floor(Math.random() * palettes.length); // return Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS 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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);