Sorting

The FlexChart allows you to visualize tabular data as business charts. It provides a variety of options about how to present and interact with the data, including selection, zooming, drill-down, formatting, etc.

Like all Wijmo controls, the chart delegates all data-related tasks to the CollectionView class, so if you want to filter, sort, or group the data, you can do it using the CollectionView. It may be useful to think of the FlexChart as a special type of data grid, where columns are represented by series and rows are data points on the chart.

When you set the chart's itemsSource property to an array, or ObservableArray, the chart automatically creates a CollectionView instance to wrap the original array. This CollectionView is exposed by the collectionView property in case you want to access it.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new wjChart.FlexChart('#theChart', { itemsSource: getData(), bindingX: 'country', series: [ { binding: 'sales', name: 'Sales' }, { binding: 'expenses', name: 'Expenses' }, { binding: 'downloads', name: 'Downloads' } ] }); // // connect sort buttons sortOnClick('btnNone', null); sortOnClick('btnCountry', 'country'); sortOnClick('btnSales', 'sales'); sortOnClick('btnExpenses', 'expenses'); sortOnClick('btnDownloads', 'downloads'); // function sortOnClick(id, prop) { document.getElementById(id).addEventListener('click', () => { let sd = theChart.collectionView.sortDescriptions; // sd.clear(); sd.push(new wjCore.SortDescription(prop, true)); }); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Sorting</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"> <p> Sort by: <button id="btnNone" class="btn btn-default">None</button> <button id="btnCountry" class="btn btn-default">Country</button> <button id="btnSales" class="btn btn-default">Sales</button> <button id="btnExpenses" class="btn btn-default">Expenses</button> <button id="btnDownloads" class="btn btn-default">Downloads</button> </p> <div id="theChart"></div> </div> </body> </html> // create some random data export function getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000) }); } // return data; } .wj-flexgrid { height: 150px; margin-top:10px; } .wj-flexchart { height: 300px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, ViewChild, 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 { DataService } 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: any[]; @ViewChild('theChart') theChart: wjChart.FlexChart; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // sortOnClick(prop: string) { let sd = this.theChart.collectionView.sortDescriptions; // sd.clear(); sd.push(new wjCore.SortDescription(prop, true)) } } // @NgModule({ imports: [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 Sorting</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"> <p> Sort by: <button id="btnNone" class="btn btn-default" (click)="sortOnClick(null)">None</button> <button id="btnCountry" class="btn btn-default" (click)="sortOnClick('country')">Country</button> <button id="btnSales" class="btn btn-default" (click)="sortOnClick('sales')">Sales</button> <button id="btnExpenses" class="btn btn-default" (click)="sortOnClick('expenses')">Expenses</button> <button id="btnDownloads" class="btn btn-default" (click)="sortOnClick('downloads')">Downloads</button> </p> <wj-flex-chart #theChart [itemsSource]="data" bindingX="country"> <wj-flex-chart-series binding="sales" name="Sales"></wj-flex-chart-series> <wj-flex-chart-series binding="expenses" name="Expenses"></wj-flex-chart-series> <wj-flex-chart-series binding="downloads" name="Downloads"></wj-flex-chart-series> </wj-flex-chart> </div> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000) }); } // return data; } } body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-group"> <p> Sort by: <button id="btnNone" class="btn btn-default" v-on:click="sortOnClick(null)">None</button> <button id="btnCountry" class="btn btn-default" v-on:click="sortOnClick('country')">Country</button> <button id="btnSales" class="btn btn-default" v-on:click="sortOnClick('sales')">Sales</button> <button id="btnExpenses" class="btn btn-default" v-on:click="sortOnClick('expenses')">Expenses</button> <button id="btnDownloads" class="btn btn-default" v-on:click="sortOnClick('downloads')">Downloads</button> </p> <wj-flex-chart :itemsSource="data" bindingX="country" :initialized="initializeChart"> <wj-flex-chart-series binding="sales" name="Sales"></wj-flex-chart-series> <wj-flex-chart-series binding="expenses" name="Expenses"></wj-flex-chart-series> <wj-flex-chart-series binding="downloads" name="Downloads"></wj-flex-chart-series> </wj-flex-chart> </div> </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 { getData } from './data'; import * as wjCore from '@grapecity/wijmo'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData() } }, methods: { initializeChart: function(flex) { this.theChart = flex; }, sortOnClick: function(prop) { let sd = this.theChart.collectionView.sortDescriptions; // sd.clear(); sd.push(new wjCore.SortDescription(prop, true)) } } }) 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 Sorting</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> export function getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000) }); } // return data; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjCore from "@grapecity/wijmo"; import * as wjChart from "@grapecity/wijmo.react.chart"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <div className="form-group"> <p> Sort by: <button id="btnNone" className="btn btn-default" onClick={this.sortOnClick.bind(this, null)}>None</button> <button id="btnCountry" className="btn btn-default" onClick={this.sortOnClick.bind(this, 'country')}>Country</button> <button id="btnSales" className="btn btn-default" onClick={this.sortOnClick.bind(this, 'sales')}>Sales</button> <button id="btnExpenses" className="btn btn-default" onClick={this.sortOnClick.bind(this, 'expenses')}>Expenses</button> <button id="btnDownloads" className="btn btn-default" onClick={this.sortOnClick.bind(this, 'downloads')}>Downloads</button> </p> <wjChart.FlexChart itemsSource={this.state.data} bindingX="country" initialized={this.initializeChart.bind(this)}> <wjChart.FlexChartSeries binding="sales" name="Sales"></wjChart.FlexChartSeries> <wjChart.FlexChartSeries binding="expenses" name="Expenses"></wjChart.FlexChartSeries> <wjChart.FlexChartSeries binding="downloads" name="Downloads"></wjChart.FlexChartSeries> </wjChart.FlexChart> </div> </div>; } initializeChart(flex) { this.theChart = flex; } sortOnClick(prop) { let sd = this.theChart.collectionView.sortDescriptions; // sd.clear(); sd.push(new wjCore.SortDescription(prop, true)); } } 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 OLAP Pivot Chart Overview</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; } label { margin-right: 3px; } export function getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000) }); } // return data; }