向下钻取

该示例显示了具有分组和向下钻取的柱形图。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as core from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import * as animation from '@grapecity/wijmo.chart.animation'; import { getData, getGroupData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; var barchart; var view; // function init() { view = getData(); barchart = new chart.FlexChart('#chart', { legend: { position: chart.Position.None }, bindingX: 'name', series: [{ binding: 'gdp', name: 'GDP' }], axisX: { title: 'Year' }, axisY: { title: 'GDP (US$ in billions)' }, tooltip: { content: '' }, selectionMode: chart.SelectionMode.Point, selectionChanged: (s) => { if (s.selection) { let point = s.selection.collectionView.currentItem; if (point && point.group && !point.group.isBottomLevel) { showGroup(point.group); } } }, itemsSource: getGroupData(view), palette: ['rgba(45,159,199,1)', 'rgba(236,153,60,1)', 'rgba(137,194,53,1)', 'rgba(227,119,164,1)', 'rgba(166,137,49,1)', 'rgba(166,114,166,1)', 'rgba(208,192,65,1)', 'rgba(227,88,85,1)', 'rgba(104,112,106,1)'] }); // let ani = new animation.ChartAnimation(barchart); } // function showGroup(group) { // update titles updateChartHeader(group); let level = 'level' in group ? group.level + 1 : 0; barchart.axisX.title = core.toHeaderCase(view.groupDescriptions[level].propertyName); // // update the series color (use a different one for each level) let palette = barchart.palette || chart.Palettes.standard; barchart.series[0].style = { fill: palette[level], stroke: palette[level] }; // // update data barchart.itemsSource = getGroupData(group); barchart.selection = null; } // // update the chart header element var header = document.getElementById('header'); function updateChartHeader(group) { let item = group.items[0], path = '', headers = []; // for (let i = 0; i <= group.level; i++) { let prop = view.groupDescriptions[i].propertyName, hdr = core.format('<a href="#{path}">{prop}</a>: {value}', { path: path, prop: core.toHeaderCase(prop), value: item[prop] }); // headers.push(hdr); path += '/' + item[prop]; } // header.innerHTML = headers.length > 0 ? 'IMF estimates GDP(nominal) GDP for ' + headers.join(', ') : 'IMF estimates GDP(nominal) GDP'; } // // handle clicks on chart's header element to navigate back up header.addEventListener('click', function (e) { if (e.target instanceof HTMLAnchorElement) { e.preventDefault(); // // get the link path let path = e.target.href; path = path.substr(path.lastIndexOf('#') + 1); let paths = path.split('/'); // // find the group that matches the path let src = view; for (let i = 1; i < paths.length; i++) { for (let j = 0; j < src.groups.length; j++) { let group = src.groups[j]; if (group.name == paths[i]) { src = group; break; } } } // show the selected group showGroup(src); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Column with Drill-down</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"> <h4 id="header">IMF estimates GDP(nominal) GDP</h4> <div id="chart"></div> </div> </body> </html> // IMF estimates GDP(nominal) between 2020 and 2023 // https://en.wikipedia.org/wiki/List_of_countries_by_past_and_projected_GDP_(nominal) import * as core from '@grapecity/wijmo'; export function getData() { let data = [ { country: 'United States', continent: 'North America', year: 2020, gdp: 22289 }, { country: 'United States', continent: 'North America', year: 2021, gdp: 23096 }, { country: 'United States', continent: 'North America', year: 2022, gdp: 23874 }, { country: 'United States', continent: 'North America', year: 2023, gdp: 24670 }, { country: 'China', continent: 'Asia', year: 2020, gdp: 15461 }, { country: 'China', continent: 'Asia', year: 2021, gdp: 16768 }, { country: 'China', continent: 'Asia', year: 2022, gdp: 18131 }, { country: 'China', continent: 'Asia', year: 2023, gdp: 19580 }, { country: 'Japan', continent: 'Asia', year: 2020, gdp: 5371 }, { country: 'Japan', continent: 'Asia', year: 2021, gdp: 5522 }, { country: 'Japan', continent: 'Asia', year: 2022, gdp: 5714 }, { country: 'Japan', continent: 'Asia', year: 2023, gdp: 5907 }, { country: 'Gemany', continent: 'Europe', year: 2020, gdp: 4331 }, { country: 'Gemany', continent: 'Europe', year: 2021, gdp: 4523 }, { country: 'Gemany', continent: 'Europe', year: 2022, gdp: 4736 }, { country: 'Gemany', continent: 'Europe', year: 2023, gdp: 4937 }, { country: 'India', continent: 'Asia', year: 2020, gdp: 3258 }, { country: 'India', continent: 'Asia', year: 2021, gdp: 3586 }, { country: 'India', continent: 'Asia', year: 2022, gdp: 3941 }, { country: 'India', continent: 'Asia', year: 2023, gdp: 4329 }, { country: 'France', continent: 'Europe', year: 2020, gdp: 2979 }, { country: 'France', continent: 'Europe', year: 2021, gdp: 3100 }, { country: 'France', continent: 'Europe', year: 2022, gdp: 3234 }, { country: 'France', continent: 'Europe', year: 2023, gdp: 3363 }, { country: 'United Kindom', continent: 'Europe', year: 2020, gdp: 2912 }, { country: 'United Kindom', continent: 'Europe', year: 2021, gdp: 3012 }, { country: 'United Kindom', continent: 'Europe', year: 2022, gdp: 3135 }, { country: 'United Kindom', continent: 'Europe', year: 2023, gdp: 3257 }, { country: 'Italy', continent: 'Europe', year: 2020, gdp: 2191 }, { country: 'Italy', continent: 'Europe', year: 2021, gdp: 2255 }, { country: 'Italy', continent: 'Europe', year: 2022, gdp: 2329 }, { country: 'Italy', continent: 'Europe', year: 2023, gdp: 2395 }, { country: 'Brazil', continent: 'South America', year: 2020, gdp: 2027 }, { country: 'Brazil', continent: 'South America', year: 2021, gdp: 2129 }, { country: 'Brazil', continent: 'South America', year: 2022, gdp: 2237 }, { country: 'Brazil', continent: 'South America', year: 2023, gdp: 2351 }, { country: 'Canada', continent: 'North America', year: 2020, gdp: 1937 }, { country: 'Canada', continent: 'North America', year: 2021, gdp: 2053 }, { country: 'Canada', continent: 'North America', year: 2022, gdp: 2185 }, { country: 'Canada', continent: 'North America', year: 2023, gdp: 2321 }, { country: 'South Korea', continent: 'Asia', year: 2020, gdp: 1781 }, { country: 'South Korea', continent: 'Asia', year: 2021, gdp: 1864 }, { country: 'South Korea', continent: 'Asia', year: 2022, gdp: 1959 }, { country: 'South Korea', continent: 'Asia', year: 2023, gdp: 2054 }, { country: 'Russia', continent: 'Europe', year: 2020, gdp: 1683 }, { country: 'Russia', continent: 'Europe', year: 2021, gdp: 1719 }, { country: 'Russia', continent: 'Europe', year: 2022, gdp: 1757 }, { country: 'Russia', continent: 'Europe', year: 2023, gdp: 1818 }, { country: 'Spain', continent: 'Europe', year: 2020, gdp: 1550 }, { country: 'Spain', continent: 'Europe', year: 2021, gdp: 1616 }, { country: 'Spain', continent: 'Europe', year: 2022, gdp: 1690 }, { country: 'Spain', continent: 'Europe', year: 2023, gdp: 1758 }, { country: 'Australia', continent: 'Oceania', year: 2020, gdp: 1541 }, { country: 'Australia', continent: 'Oceania', year: 2021, gdp: 1615 }, { country: 'Australia', continent: 'Oceania', year: 2022, gdp: 1700 }, { country: 'Australia', continent: 'Oceania', year: 2023, gdp: 1794 }, { country: 'Mexico', continent: 'North America', year: 2020, gdp: 1306 }, { country: 'Mexico', continent: 'North America', year: 2021, gdp: 1376 }, { country: 'Mexico', continent: 'North America', year: 2022, gdp: 1449 }, { country: 'Mexico', continent: 'North America', year: 2023, gdp: 1526 }, { country: 'Indonesia', continent: 'Asia', year: 2020, gdp: 1175 }, { country: 'Indonesia', continent: 'Asia', year: 2021, gdp: 1259 }, { country: 'Indonesia', continent: 'Asia', year: 2022, gdp: 1349 }, { country: 'Indonesia', continent: 'Asia', year: 2023, gdp: 1446 }, { country: 'Netherlands', continent: 'Europe', year: 2020, gdp: 980 }, { country: 'Netherlands', continent: 'Europe', year: 2021, gdp: 1021 }, { country: 'Netherlands', continent: 'Europe', year: 2022, gdp: 1065 }, { country: 'Netherlands', continent: 'Europe', year: 2023, gdp: 1106 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2020, gdp: 815 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2021, gdp: 835 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2022, gdp: 860 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2023, gdp: 889 }, { country: 'Nigeria', continent: 'Africa', year: 2020, gdp: 504 }, { country: 'Nigeria', continent: 'Africa', year: 2021, gdp: 572 }, { country: 'Nigeria', continent: 'Africa', year: 2022, gdp: 649 }, { country: 'Nigeria', continent: 'Africa', year: 2023, gdp: 736 }, { country: 'Argentina', continent: 'South America', year: 2020, gdp: 444 }, { country: 'Argentina', continent: 'South America', year: 2021, gdp: 476 }, { country: 'Argentina', continent: 'South America', year: 2022, gdp: 508 }, { country: 'Argentina', continent: 'South America', year: 2023, gdp: 540 }, { country: 'South Africa', continent: 'South America', year: 2020, gdp: 403 }, { country: 'South Africa', continent: 'South America', year: 2021, gdp: 419 }, { country: 'South Africa', continent: 'South America', year: 2022, gdp: 438 }, { country: 'South Africa', continent: 'South America', year: 2023, gdp: 456 }, { country: 'Colombia', continent: 'South America', year: 2020, gdp: 367 }, { country: 'Colombia', continent: 'South America', year: 2021, gdp: 382 }, { country: 'Colombia', continent: 'South America', year: 2022, gdp: 400 }, { country: 'Colombia', continent: 'South America', year: 2023, gdp: 422 }, { country: 'Chile', continent: 'South America', year: 2020, gdp: 352 }, { country: 'Chile', continent: 'South America', year: 2021, gdp: 378 }, { country: 'Chile', continent: 'South America', year: 2022, gdp: 404 }, { country: 'Chile', continent: 'South America', year: 2023, gdp: 433 }, { country: 'Egypt', continent: 'Africa', year: 2020, gdp: 339 }, { country: 'Egypt', continent: 'Africa', year: 2021, gdp: 359 }, { country: 'Egypt', continent: 'Africa', year: 2022, gdp: 380 }, { country: 'Egypt', continent: 'Africa', year: 2023, gdp: 414 }, { country: 'Peru', continent: 'South America', year: 2020, gdp: 252 }, { country: 'Peru', continent: 'South America', year: 2021, gdp: 266 }, { country: 'Peru', continent: 'South America', year: 2022, gdp: 281 }, { country: 'Peru', continent: 'South America', year: 2023, gdp: 297 }, { country: 'New Zealand', continent: 'Oceania', year: 2020, gdp: 227 }, { country: 'New Zealand', continent: 'Oceania', year: 2021, gdp: 242 }, { country: 'New Zealand', continent: 'Oceania', year: 2022, gdp: 257 }, { country: 'New Zealand', continent: 'Oceania', year: 2023, gdp: 272 }, { country: 'Algeria', continent: 'Africa', year: 2020, gdp: 207 }, { country: 'Algeria', continent: 'Africa', year: 2021, gdp: 212 }, { country: 'Algeria', continent: 'Africa', year: 2022, gdp: 218 }, { country: 'Algeria', continent: 'Africa', year: 2023, gdp: 228 } ]; // return new core.CollectionView(data, { groupDescriptions: ['year', 'continent', 'country'] }); } // // get the group data for a selected point export function getGroupData(group) { // get items for this group, aggregate by sales let arr = []; // group.groups.forEach(g => { arr.push({ name: g.name, gdp: g.getAggregate(core.Aggregate.Sum, 'gdp'), group: g }); }); // // return a new collection view sorted by sales return new core.CollectionView(arr, { sortDescriptions: [ new core.SortDescription('gdp', false) ] }); } body { margin-bottom: 24px; } .container h4 { text-align: center; } .container a { cursor: pointer; } .container .wj-flexchart { border: none; } .container { border: 1px solid #e4e4e4; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; // import { Component, Inject, enableProdMode, NgModule, ViewChild, OnInit, ElementRef } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements OnInit { @ViewChild('flexChart') private _flexChart: chart.FlexChart; @ViewChild('header') private _header: ElementRef; private _view: wijmo.CollectionView; // groupedView: wijmo.CollectionView; // constructor(@Inject(DataService) private dataService: DataService) { this._view = dataService.getData(); this.groupedView = dataService.getGroupData(this._view); } // ngOnInit() { this._header.nativeElement.addEventListener('click', (e: MouseEvent) => this._onHeaderClick(e)); } // selectionChanged(flexChart: chart.FlexChart) { if (flexChart.selection) { let point = flexChart.selection.collectionView.currentItem; if (point && point.group && !point.group.isBottomLevel) { this.showGroup(point.group); } } } // showGroup(group: wijmo.CollectionViewGroup) { // update titles this._updateChartHeader(group); var level = 'level' in group ? group.level + 1 : 0; this._flexChart.axisX.title = wijmo.toHeaderCase(this._view.groupDescriptions[level].propertyName); // // update the series color (use a different one for each level) var palette = this._flexChart.palette || chart.Palettes.standard; this._flexChart.series[0].style = { fill: palette[level], stroke: palette[level] }; // // update data this._flexChart.itemsSource = this.dataService.getGroupData(group); this._flexChart.selection = null; } // private _onHeaderClick(e: Event) { if (e.target instanceof HTMLAnchorElement) { e.preventDefault(); // // get the link path let path = e.target.href; path = path.substr(path.lastIndexOf('#') + 1); let paths = path.split('/'); // // find the group that matches the path let src: any = this._view; for (let i = 1; i < paths.length; i++) { for (let j = 0; j < src.groups.length; j++) { let group = src.groups[j]; if (group.name == paths[i]) { src = group; break; } } } // show the selected group this.showGroup(src); } } // private _updateChartHeader(group: wijmo.CollectionViewGroup) { let item = group.items[0], path = '', headers = []; // for (let i = 0; i <= group.level; i++) { let prop = this._view.groupDescriptions[i].propertyName, hdr = wijmo.format('<a href="#{path}">{prop}</a>: {value}', { path: path, prop: wijmo.toHeaderCase(prop), value: item[prop] }); headers.push(hdr); path += '/' + item[prop]; } // this._header.nativeElement.innerHTML = headers.length > 0 ? 'IMF estimates GDP(nominal) GDP for ' + headers.join(', ') : 'IMF estimates GDP(nominal) GDP'; } } // @NgModule({ imports: [WjChartModule, WjChartAnimationModule, 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 Column with Drill-down</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"> <h4 #header>IMF estimates GDP(nominal) GDP</h4> <wj-flex-chart #flexChart [bindingX]="'name'" [selectionMode]="'Point'" [itemsSource]="groupedView" [tooltipContent]="''" (selectionChanged)="selectionChanged(flexChart)" [palette]="['rgba(45,159,199,1)', 'rgba(236,153,60,1)', 'rgba(137,194,53,1)', 'rgba(227,119,164,1)', 'rgba(166,137,49,1)', 'rgba(166,114,166,1)', 'rgba(208,192,65,1)', 'rgba(227,88,85,1)', 'rgba(104,112,106,1)']"> <wj-flex-chart-legend [position]="'None'"> </wj-flex-chart-legend> <wj-flex-chart-series [name]="'GDP'" [binding]="'gdp'"> </wj-flex-chart-series> <wj-flex-chart-axis [wjProperty]="'axisX'" [title]="'Year'"> </wj-flex-chart-axis> <wj-flex-chart-axis [wjProperty]="'axisY'" [title]="'GDP (US$ in billions)'"> </wj-flex-chart-axis> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; import * as wijmo from '@grapecity/wijmo'; // @Injectable() export class DataService { // IMF estimates GDP(nominal) between 2020 and 2023 // https://en.wikipedia.org/wiki/List_of_countries_by_past_and_projected_GDP_(nominal) getData() { let data = [ { country: 'United States', continent: 'North America', year: 2020, gdp: 22289 }, { country: 'United States', continent: 'North America', year: 2021, gdp: 23096 }, { country: 'United States', continent: 'North America', year: 2022, gdp: 23874 }, { country: 'United States', continent: 'North America', year: 2023, gdp: 24670 }, { country: 'China', continent: 'Asia', year: 2020, gdp: 15461 }, { country: 'China', continent: 'Asia', year: 2021, gdp: 16768 }, { country: 'China', continent: 'Asia', year: 2022, gdp: 18131 }, { country: 'China', continent: 'Asia', year: 2023, gdp: 19580 }, { country: 'Japan', continent: 'Asia', year: 2020, gdp: 5371 }, { country: 'Japan', continent: 'Asia', year: 2021, gdp: 5522 }, { country: 'Japan', continent: 'Asia', year: 2022, gdp: 5714 }, { country: 'Japan', continent: 'Asia', year: 2023, gdp: 5907 }, { country: 'Gemany', continent: 'Europe', year: 2020, gdp: 4331 }, { country: 'Gemany', continent: 'Europe', year: 2021, gdp: 4523 }, { country: 'Gemany', continent: 'Europe', year: 2022, gdp: 4736 }, { country: 'Gemany', continent: 'Europe', year: 2023, gdp: 4937 }, { country: 'India', continent: 'Asia', year: 2020, gdp: 3258 }, { country: 'India', continent: 'Asia', year: 2021, gdp: 3586 }, { country: 'India', continent: 'Asia', year: 2022, gdp: 3941 }, { country: 'India', continent: 'Asia', year: 2023, gdp: 4329 }, { country: 'France', continent: 'Europe', year: 2020, gdp: 2979 }, { country: 'France', continent: 'Europe', year: 2021, gdp: 3100 }, { country: 'France', continent: 'Europe', year: 2022, gdp: 3234 }, { country: 'France', continent: 'Europe', year: 2023, gdp: 3363 }, { country: 'United Kindom', continent: 'Europe', year: 2020, gdp: 2912 }, { country: 'United Kindom', continent: 'Europe', year: 2021, gdp: 3012 }, { country: 'United Kindom', continent: 'Europe', year: 2022, gdp: 3135 }, { country: 'United Kindom', continent: 'Europe', year: 2023, gdp: 3257 }, { country: 'Italy', continent: 'Europe', year: 2020, gdp: 2191 }, { country: 'Italy', continent: 'Europe', year: 2021, gdp: 2255 }, { country: 'Italy', continent: 'Europe', year: 2022, gdp: 2329 }, { country: 'Italy', continent: 'Europe', year: 2023, gdp: 2395 }, { country: 'Brazil', continent: 'South America', year: 2020, gdp: 2027 }, { country: 'Brazil', continent: 'South America', year: 2021, gdp: 2129 }, { country: 'Brazil', continent: 'South America', year: 2022, gdp: 2237 }, { country: 'Brazil', continent: 'South America', year: 2023, gdp: 2351 }, { country: 'Canada', continent: 'North America', year: 2020, gdp: 1937 }, { country: 'Canada', continent: 'North America', year: 2021, gdp: 2053 }, { country: 'Canada', continent: 'North America', year: 2022, gdp: 2185 }, { country: 'Canada', continent: 'North America', year: 2023, gdp: 2321 }, { country: 'South Korea', continent: 'Asia', year: 2020, gdp: 1781 }, { country: 'South Korea', continent: 'Asia', year: 2021, gdp: 1864 }, { country: 'South Korea', continent: 'Asia', year: 2022, gdp: 1959 }, { country: 'South Korea', continent: 'Asia', year: 2023, gdp: 2054 }, { country: 'Russia', continent: 'Europe', year: 2020, gdp: 1683 }, { country: 'Russia', continent: 'Europe', year: 2021, gdp: 1719 }, { country: 'Russia', continent: 'Europe', year: 2022, gdp: 1757 }, { country: 'Russia', continent: 'Europe', year: 2023, gdp: 1818 }, { country: 'Spain', continent: 'Europe', year: 2020, gdp: 1550 }, { country: 'Spain', continent: 'Europe', year: 2021, gdp: 1616 }, { country: 'Spain', continent: 'Europe', year: 2022, gdp: 1690 }, { country: 'Spain', continent: 'Europe', year: 2023, gdp: 1758 }, { country: 'Australia', continent: 'Oceania', year: 2020, gdp: 1541 }, { country: 'Australia', continent: 'Oceania', year: 2021, gdp: 1615 }, { country: 'Australia', continent: 'Oceania', year: 2022, gdp: 1700 }, { country: 'Australia', continent: 'Oceania', year: 2023, gdp: 1794 }, { country: 'Mexico', continent: 'North America', year: 2020, gdp: 1306 }, { country: 'Mexico', continent: 'North America', year: 2021, gdp: 1376 }, { country: 'Mexico', continent: 'North America', year: 2022, gdp: 1449 }, { country: 'Mexico', continent: 'North America', year: 2023, gdp: 1526 }, { country: 'Indonesia', continent: 'Asia', year: 2020, gdp: 1175 }, { country: 'Indonesia', continent: 'Asia', year: 2021, gdp: 1259 }, { country: 'Indonesia', continent: 'Asia', year: 2022, gdp: 1349 }, { country: 'Indonesia', continent: 'Asia', year: 2023, gdp: 1446 }, { country: 'Netherlands', continent: 'Europe', year: 2020, gdp: 980 }, { country: 'Netherlands', continent: 'Europe', year: 2021, gdp: 1021 }, { country: 'Netherlands', continent: 'Europe', year: 2022, gdp: 1065 }, { country: 'Netherlands', continent: 'Europe', year: 2023, gdp: 1106 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2020, gdp: 815 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2021, gdp: 835 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2022, gdp: 860 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2023, gdp: 889 }, { country: 'Nigeria', continent: 'Africa', year: 2020, gdp: 504 }, { country: 'Nigeria', continent: 'Africa', year: 2021, gdp: 572 }, { country: 'Nigeria', continent: 'Africa', year: 2022, gdp: 649 }, { country: 'Nigeria', continent: 'Africa', year: 2023, gdp: 736 }, { country: 'Argentina', continent: 'South America', year: 2020, gdp: 444 }, { country: 'Argentina', continent: 'South America', year: 2021, gdp: 476 }, { country: 'Argentina', continent: 'South America', year: 2022, gdp: 508 }, { country: 'Argentina', continent: 'South America', year: 2023, gdp: 540 }, { country: 'South Africa', continent: 'South America', year: 2020, gdp: 403 }, { country: 'South Africa', continent: 'South America', year: 2021, gdp: 419 }, { country: 'South Africa', continent: 'South America', year: 2022, gdp: 438 }, { country: 'South Africa', continent: 'South America', year: 2023, gdp: 456 }, { country: 'Colombia', continent: 'South America', year: 2020, gdp: 367 }, { country: 'Colombia', continent: 'South America', year: 2021, gdp: 382 }, { country: 'Colombia', continent: 'South America', year: 2022, gdp: 400 }, { country: 'Colombia', continent: 'South America', year: 2023, gdp: 422 }, { country: 'Chile', continent: 'South America', year: 2020, gdp: 352 }, { country: 'Chile', continent: 'South America', year: 2021, gdp: 378 }, { country: 'Chile', continent: 'South America', year: 2022, gdp: 404 }, { country: 'Chile', continent: 'South America', year: 2023, gdp: 433 }, { country: 'Egypt', continent: 'Africa', year: 2020, gdp: 339 }, { country: 'Egypt', continent: 'Africa', year: 2021, gdp: 359 }, { country: 'Egypt', continent: 'Africa', year: 2022, gdp: 380 }, { country: 'Egypt', continent: 'Africa', year: 2023, gdp: 414 }, { country: 'Peru', continent: 'South America', year: 2020, gdp: 252 }, { country: 'Peru', continent: 'South America', year: 2021, gdp: 266 }, { country: 'Peru', continent: 'South America', year: 2022, gdp: 281 }, { country: 'Peru', continent: 'South America', year: 2023, gdp: 297 }, { country: 'New Zealand', continent: 'Oceania', year: 2020, gdp: 227 }, { country: 'New Zealand', continent: 'Oceania', year: 2021, gdp: 242 }, { country: 'New Zealand', continent: 'Oceania', year: 2022, gdp: 257 }, { country: 'New Zealand', continent: 'Oceania', year: 2023, gdp: 272 }, { country: 'Algeria', continent: 'Africa', year: 2020, gdp: 207 }, { country: 'Algeria', continent: 'Africa', year: 2021, gdp: 212 }, { country: 'Algeria', continent: 'Africa', year: 2022, gdp: 218 }, { country: 'Algeria', continent: 'Africa', year: 2023, gdp: 228 } ]; // return new wijmo.CollectionView(data, { groupDescriptions: ['year', 'continent', 'country'] }); } // // get the group data for a selected point getGroupData(group: wijmo.CollectionView | wijmo.CollectionViewGroup) { // get items for this group, aggregate by sales let arr: any[] = []; group.groups.forEach(function (g) { arr.push({ name: g.name, gdp: g.getAggregate(wijmo.Aggregate.Sum, 'gdp'), group: g }); }); // // return a new collection view sorted by sales return new wijmo.CollectionView(arr, { sortDescriptions: [ new wijmo.SortDescription('gdp', false) ] }); } } body { margin-bottom: 24px; } .container h4 { text-align: center; } .container a { cursor: pointer; } .container .wj-flexchart { border: none; } .container { border: 1px solid #e4e4e4; } <template> <div class="container-fluid"> <h4 id="header">IMF estimates GDP(nominal) GDP</h4> <wj-flex-chart bindingX="name" selectionMode="Point" :itemsSource="groupedViewData" :selectionChanged="selectionChanged" :initialized="initializeChart" tooltipContent="" :palette="['rgba(45,159,199,1)', 'rgba(236,153,60,1)', 'rgba(137,194,53,1)', 'rgba(227,119,164,1)', 'rgba(166,137,49,1)', 'rgba(166,114,166,1)', 'rgba(208,192,65,1)', 'rgba(227,88,85,1)', 'rgba(104,112,106,1)']"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series name="GDP" binding="gdp"></wj-flex-chart-series> <wj-flex-chart-axis wjProperty="axisX" title="Year"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" title="GDP (US$ in billions)"></wj-flex-chart-axis> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </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 '@grapecity/wijmo.vue2.chart.animation'; import { getData, getGroupData } from './data'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), groupedViewData: null } }, methods: { initializeChart(flex) { this.theChart = flex; this.header = document.querySelector('#header'); this.header.addEventListener('click', e => this._onHeaderClick(e)); this.groupedViewData = getGroupData(this.data); }, selectionChanged() { if (this.theChart.selection) { let point = this.theChart.selection.collectionView.currentItem; if (point && point.group && !point.group.isBottomLevel) { this.showGroup(point.group); } } }, _onHeaderClick(e) { if (e.target instanceof HTMLAnchorElement) { e.preventDefault(); // // get the link path let path = e.target.href; path = path.substr(path.lastIndexOf('#') + 1); let paths = path.split('/'); // // find the group that matches the path let src = this.data; for (let i = 1; i < paths.length; i++) { for (let j = 0; j < src.groups.length; j++) { let group = src.groups[j]; if (group.name == paths[i]) { src = group; break; } } } // show the selected group this.showGroup(src); } }, showGroup(group) { // update titles this._updateChartHeader(group); var level = 'level' in group ? group.level + 1 : 0; this.theChart.axisX.title = wijmo.toHeaderCase(this.data.groupDescriptions[level].propertyName); // // update the series color (use a different one for each level) var palette = this.theChart.palette || chart.Palettes.standard; this.theChart.series[0].style = { fill: palette[level], stroke: palette[level] }; // // update data this.theChart.itemsSource = getGroupData(group); this.theChart.selection = null; }, _updateChartHeader(group) { let item = group.items[0], path = '', headers = []; // for (let i = 0; i <= group.level; i++) { let prop = this.data.groupDescriptions[i].propertyName, hdr = wijmo.format('<a href="#{path}">{prop}</a>: {value}', { path: path, prop: wijmo.toHeaderCase(prop), value: item[prop] }); headers.push(hdr); path += '/' + item[prop]; } // this.header.innerHTML = headers.length > 0 ? 'IMF estimates GDP(nominal) GDP for ' + headers.join(', ') : 'IMF estimates GDP(nominal) GDP'; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } .container h4 { text-align: center; } .container a { cursor: pointer; } .container .wj-flexchart { border: none; } .container { border: 1px solid #e4e4e4; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Column with Drill-down</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 wjCore from '@grapecity/wijmo'; // IMF estimates GDP(nominal) between 2020 and 2023 // https://en.wikipedia.org/wiki/List_of_countries_by_past_and_projected_GDP_(nominal) export function getData() { let data = [ { country: 'United States', continent: 'North America', year: 2020, gdp: 22289 }, { country: 'United States', continent: 'North America', year: 2021, gdp: 23096 }, { country: 'United States', continent: 'North America', year: 2022, gdp: 23874 }, { country: 'United States', continent: 'North America', year: 2023, gdp: 24670 }, { country: 'China', continent: 'Asia', year: 2020, gdp: 15461 }, { country: 'China', continent: 'Asia', year: 2021, gdp: 16768 }, { country: 'China', continent: 'Asia', year: 2022, gdp: 18131 }, { country: 'China', continent: 'Asia', year: 2023, gdp: 19580 }, { country: 'Japan', continent: 'Asia', year: 2020, gdp: 5371 }, { country: 'Japan', continent: 'Asia', year: 2021, gdp: 5522 }, { country: 'Japan', continent: 'Asia', year: 2022, gdp: 5714 }, { country: 'Japan', continent: 'Asia', year: 2023, gdp: 5907 }, { country: 'Gemany', continent: 'Europe', year: 2020, gdp: 4331 }, { country: 'Gemany', continent: 'Europe', year: 2021, gdp: 4523 }, { country: 'Gemany', continent: 'Europe', year: 2022, gdp: 4736 }, { country: 'Gemany', continent: 'Europe', year: 2023, gdp: 4937 }, { country: 'India', continent: 'Asia', year: 2020, gdp: 3258 }, { country: 'India', continent: 'Asia', year: 2021, gdp: 3586 }, { country: 'India', continent: 'Asia', year: 2022, gdp: 3941 }, { country: 'India', continent: 'Asia', year: 2023, gdp: 4329 }, { country: 'France', continent: 'Europe', year: 2020, gdp: 2979 }, { country: 'France', continent: 'Europe', year: 2021, gdp: 3100 }, { country: 'France', continent: 'Europe', year: 2022, gdp: 3234 }, { country: 'France', continent: 'Europe', year: 2023, gdp: 3363 }, { country: 'United Kindom', continent: 'Europe', year: 2020, gdp: 2912 }, { country: 'United Kindom', continent: 'Europe', year: 2021, gdp: 3012 }, { country: 'United Kindom', continent: 'Europe', year: 2022, gdp: 3135 }, { country: 'United Kindom', continent: 'Europe', year: 2023, gdp: 3257 }, { country: 'Italy', continent: 'Europe', year: 2020, gdp: 2191 }, { country: 'Italy', continent: 'Europe', year: 2021, gdp: 2255 }, { country: 'Italy', continent: 'Europe', year: 2022, gdp: 2329 }, { country: 'Italy', continent: 'Europe', year: 2023, gdp: 2395 }, { country: 'Brazil', continent: 'South America', year: 2020, gdp: 2027 }, { country: 'Brazil', continent: 'South America', year: 2021, gdp: 2129 }, { country: 'Brazil', continent: 'South America', year: 2022, gdp: 2237 }, { country: 'Brazil', continent: 'South America', year: 2023, gdp: 2351 }, { country: 'Canada', continent: 'North America', year: 2020, gdp: 1937 }, { country: 'Canada', continent: 'North America', year: 2021, gdp: 2053 }, { country: 'Canada', continent: 'North America', year: 2022, gdp: 2185 }, { country: 'Canada', continent: 'North America', year: 2023, gdp: 2321 }, { country: 'South Korea', continent: 'Asia', year: 2020, gdp: 1781 }, { country: 'South Korea', continent: 'Asia', year: 2021, gdp: 1864 }, { country: 'South Korea', continent: 'Asia', year: 2022, gdp: 1959 }, { country: 'South Korea', continent: 'Asia', year: 2023, gdp: 2054 }, { country: 'Russia', continent: 'Europe', year: 2020, gdp: 1683 }, { country: 'Russia', continent: 'Europe', year: 2021, gdp: 1719 }, { country: 'Russia', continent: 'Europe', year: 2022, gdp: 1757 }, { country: 'Russia', continent: 'Europe', year: 2023, gdp: 1818 }, { country: 'Spain', continent: 'Europe', year: 2020, gdp: 1550 }, { country: 'Spain', continent: 'Europe', year: 2021, gdp: 1616 }, { country: 'Spain', continent: 'Europe', year: 2022, gdp: 1690 }, { country: 'Spain', continent: 'Europe', year: 2023, gdp: 1758 }, { country: 'Australia', continent: 'Oceania', year: 2020, gdp: 1541 }, { country: 'Australia', continent: 'Oceania', year: 2021, gdp: 1615 }, { country: 'Australia', continent: 'Oceania', year: 2022, gdp: 1700 }, { country: 'Australia', continent: 'Oceania', year: 2023, gdp: 1794 }, { country: 'Mexico', continent: 'North America', year: 2020, gdp: 1306 }, { country: 'Mexico', continent: 'North America', year: 2021, gdp: 1376 }, { country: 'Mexico', continent: 'North America', year: 2022, gdp: 1449 }, { country: 'Mexico', continent: 'North America', year: 2023, gdp: 1526 }, { country: 'Indonesia', continent: 'Asia', year: 2020, gdp: 1175 }, { country: 'Indonesia', continent: 'Asia', year: 2021, gdp: 1259 }, { country: 'Indonesia', continent: 'Asia', year: 2022, gdp: 1349 }, { country: 'Indonesia', continent: 'Asia', year: 2023, gdp: 1446 }, { country: 'Netherlands', continent: 'Europe', year: 2020, gdp: 980 }, { country: 'Netherlands', continent: 'Europe', year: 2021, gdp: 1021 }, { country: 'Netherlands', continent: 'Europe', year: 2022, gdp: 1065 }, { country: 'Netherlands', continent: 'Europe', year: 2023, gdp: 1106 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2020, gdp: 815 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2021, gdp: 835 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2022, gdp: 860 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2023, gdp: 889 }, { country: 'Nigeria', continent: 'Africa', year: 2020, gdp: 504 }, { country: 'Nigeria', continent: 'Africa', year: 2021, gdp: 572 }, { country: 'Nigeria', continent: 'Africa', year: 2022, gdp: 649 }, { country: 'Nigeria', continent: 'Africa', year: 2023, gdp: 736 }, { country: 'Argentina', continent: 'South America', year: 2020, gdp: 444 }, { country: 'Argentina', continent: 'South America', year: 2021, gdp: 476 }, { country: 'Argentina', continent: 'South America', year: 2022, gdp: 508 }, { country: 'Argentina', continent: 'South America', year: 2023, gdp: 540 }, { country: 'South Africa', continent: 'South America', year: 2020, gdp: 403 }, { country: 'South Africa', continent: 'South America', year: 2021, gdp: 419 }, { country: 'South Africa', continent: 'South America', year: 2022, gdp: 438 }, { country: 'South Africa', continent: 'South America', year: 2023, gdp: 456 }, { country: 'Colombia', continent: 'South America', year: 2020, gdp: 367 }, { country: 'Colombia', continent: 'South America', year: 2021, gdp: 382 }, { country: 'Colombia', continent: 'South America', year: 2022, gdp: 400 }, { country: 'Colombia', continent: 'South America', year: 2023, gdp: 422 }, { country: 'Chile', continent: 'South America', year: 2020, gdp: 352 }, { country: 'Chile', continent: 'South America', year: 2021, gdp: 378 }, { country: 'Chile', continent: 'South America', year: 2022, gdp: 404 }, { country: 'Chile', continent: 'South America', year: 2023, gdp: 433 }, { country: 'Egypt', continent: 'Africa', year: 2020, gdp: 339 }, { country: 'Egypt', continent: 'Africa', year: 2021, gdp: 359 }, { country: 'Egypt', continent: 'Africa', year: 2022, gdp: 380 }, { country: 'Egypt', continent: 'Africa', year: 2023, gdp: 414 }, { country: 'Peru', continent: 'South America', year: 2020, gdp: 252 }, { country: 'Peru', continent: 'South America', year: 2021, gdp: 266 }, { country: 'Peru', continent: 'South America', year: 2022, gdp: 281 }, { country: 'Peru', continent: 'South America', year: 2023, gdp: 297 }, { country: 'New Zealand', continent: 'Oceania', year: 2020, gdp: 227 }, { country: 'New Zealand', continent: 'Oceania', year: 2021, gdp: 242 }, { country: 'New Zealand', continent: 'Oceania', year: 2022, gdp: 257 }, { country: 'New Zealand', continent: 'Oceania', year: 2023, gdp: 272 }, { country: 'Algeria', continent: 'Africa', year: 2020, gdp: 207 }, { country: 'Algeria', continent: 'Africa', year: 2021, gdp: 212 }, { country: 'Algeria', continent: 'Africa', year: 2022, gdp: 218 }, { country: 'Algeria', continent: 'Africa', year: 2023, gdp: 228 } ]; // return new wjCore.CollectionView(data, { groupDescriptions: ['year', 'continent', 'country'] }); } // // get the group data for a selected point export function getGroupData(group) { // get items for this group, aggregate by sales let arr = []; group.groups.forEach(function (g) { arr.push({ name: g.name, gdp: g.getAggregate(wijmo.Aggregate.Sum, 'gdp'), group: g }); }); // // return a new collection view sorted by sales return new wjCore.CollectionView(arr, { sortDescriptions: [ new wjCore.SortDescription('gdp', false) ] }); } 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 wijmo from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.react.chart'; import * as wjCharts from '@grapecity/wijmo.chart'; import * as wjChartAnimate from '@grapecity/wijmo.react.chart.animation'; import { getData, getGroupData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.initializeChart = (flex) => { this.theChart = flex; this.header = document.querySelector('#header'); this.header.addEventListener('click', (e) => this._onHeaderClick(e)); }; this.selectionChanged = () => { if (this.theChart.selection) { let point = this.theChart.selection.collectionView.currentItem; if (point && point.group && !point.group.isBottomLevel) { this.showGroup(point.group); } } }; this._onHeaderClick = (e) => { if (e.target instanceof HTMLAnchorElement) { e.preventDefault(); // // get the link path let path = e.target.href; path = path.substr(path.lastIndexOf('#') + 1); let paths = path.split('/'); // // find the group that matches the path let src = this.state.data; for (let i = 1; i < paths.length; i++) { for (let j = 0; j < src.groups.length; j++) { let group = src.groups[j]; if (group.name == paths[i]) { src = group; break; } } } // show the selected group this.showGroup(src); } }; this.showGroup = (group) => { // update titles this._updateChartHeader(group); var level = 'level' in group ? group.level + 1 : 0; this.theChart.axisX.title = wijmo.toHeaderCase(this.state.data.groupDescriptions[level].propertyName); // // update the series color (use a different one for each level) var palette = this.theChart.palette || wjCharts.Palettes.standard; this.theChart.series[0].style = { fill: palette[level], stroke: palette[level] }; // // update data this.theChart.itemsSource = getGroupData(group); this.theChart.selection = null; }; let data = getData(); this.state = { data: data, palette: ['rgba(45,159,199,1)', 'rgba(236,153,60,1)', 'rgba(137,194,53,1)', 'rgba(227,119,164,1)', 'rgba(166,137,49,1)', 'rgba(166,114,166,1)', 'rgba(208,192,65,1)', 'rgba(227,88,85,1)', 'rgba(104,112,106,1)'], groupedViewData: getGroupData(data) }; } ; _updateChartHeader(group) { let item = group.items[0], path = '', headers = []; // for (let i = 0; i <= group.level; i++) { let prop = this.state.data.groupDescriptions[i].propertyName, hdr = wijmo.format('<a href="#{path}">{prop}</a>: {value}', { path: path, prop: wijmo.toHeaderCase(prop), value: item[prop] }); headers.push(hdr); path += '/' + item[prop]; } // this.header.innerHTML = headers.length > 0 ? 'IMF estimates GDP(nominal) GDP for ' + headers.join(', ') : 'IMF estimates GDP(nominal) GDP'; } render() { return <div className="container-fluid"> <h4 id="header">IMF estimates GDP(nominal) GDP</h4> <wjChart.FlexChart bindingX="name" selectionMode="Point" itemsSource={this.state.groupedViewData} selectionChanged={this.selectionChanged} initialized={this.initializeChart} tooltipContent="" palette={this.state.palette}> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartSeries name="GDP" binding="gdp"></wjChart.FlexChartSeries> <wjChart.FlexChartAxis wjProperty="axisX" title="Year"></wjChart.FlexChartAxis> <wjChart.FlexChartAxis wjProperty="axisY" title="GDP (US$ in billions)"></wjChart.FlexChartAxis> <wjChartAnimate.FlexChartAnimation></wjChartAnimate.FlexChartAnimation> </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> body { margin-bottom: 24px; } .container-fluid h4 { text-align: center; } .container-fluid a { cursor: pointer; } .container-fluid .wj-flexchart { border: none; } .container-fluid { border: 1px solid #e4e4e4; } import * as wijmo from '@grapecity/wijmo'; // Comparison of imports vs exports of the United States // https://en.wikipedia.org/wiki/Comparison_of_imports_vs_exports_of_the_United_States export function getData() { let data = [ { country: 'United States', continent: 'North America', year: 2020, gdp: 22289 }, { country: 'United States', continent: 'North America', year: 2021, gdp: 23096 }, { country: 'United States', continent: 'North America', year: 2022, gdp: 23874 }, { country: 'United States', continent: 'North America', year: 2023, gdp: 24670 }, { country: 'China', continent: 'Asia', year: 2020, gdp: 15461 }, { country: 'China', continent: 'Asia', year: 2021, gdp: 16768 }, { country: 'China', continent: 'Asia', year: 2022, gdp: 18131 }, { country: 'China', continent: 'Asia', year: 2023, gdp: 19580 }, { country: 'Japan', continent: 'Asia', year: 2020, gdp: 5371 }, { country: 'Japan', continent: 'Asia', year: 2021, gdp: 5522 }, { country: 'Japan', continent: 'Asia', year: 2022, gdp: 5714 }, { country: 'Japan', continent: 'Asia', year: 2023, gdp: 5907 }, { country: 'Gemany', continent: 'Europe', year: 2020, gdp: 4331 }, { country: 'Gemany', continent: 'Europe', year: 2021, gdp: 4523 }, { country: 'Gemany', continent: 'Europe', year: 2022, gdp: 4736 }, { country: 'Gemany', continent: 'Europe', year: 2023, gdp: 4937 }, { country: 'India', continent: 'Asia', year: 2020, gdp: 3258 }, { country: 'India', continent: 'Asia', year: 2021, gdp: 3586 }, { country: 'India', continent: 'Asia', year: 2022, gdp: 3941 }, { country: 'India', continent: 'Asia', year: 2023, gdp: 4329 }, { country: 'France', continent: 'Europe', year: 2020, gdp: 2979 }, { country: 'France', continent: 'Europe', year: 2021, gdp: 3100 }, { country: 'France', continent: 'Europe', year: 2022, gdp: 3234 }, { country: 'France', continent: 'Europe', year: 2023, gdp: 3363 }, { country: 'United Kindom', continent: 'Europe', year: 2020, gdp: 2912 }, { country: 'United Kindom', continent: 'Europe', year: 2021, gdp: 3012 }, { country: 'United Kindom', continent: 'Europe', year: 2022, gdp: 3135 }, { country: 'United Kindom', continent: 'Europe', year: 2023, gdp: 3257 }, { country: 'Italy', continent: 'Europe', year: 2020, gdp: 2191 }, { country: 'Italy', continent: 'Europe', year: 2021, gdp: 2255 }, { country: 'Italy', continent: 'Europe', year: 2022, gdp: 2329 }, { country: 'Italy', continent: 'Europe', year: 2023, gdp: 2395 }, { country: 'Brazil', continent: 'South America', year: 2020, gdp: 2027 }, { country: 'Brazil', continent: 'South America', year: 2021, gdp: 2129 }, { country: 'Brazil', continent: 'South America', year: 2022, gdp: 2237 }, { country: 'Brazil', continent: 'South America', year: 2023, gdp: 2351 }, { country: 'Canada', continent: 'North America', year: 2020, gdp: 1937 }, { country: 'Canada', continent: 'North America', year: 2021, gdp: 2053 }, { country: 'Canada', continent: 'North America', year: 2022, gdp: 2185 }, { country: 'Canada', continent: 'North America', year: 2023, gdp: 2321 }, { country: 'South Korea', continent: 'Asia', year: 2020, gdp: 1781 }, { country: 'South Korea', continent: 'Asia', year: 2021, gdp: 1864 }, { country: 'South Korea', continent: 'Asia', year: 2022, gdp: 1959 }, { country: 'South Korea', continent: 'Asia', year: 2023, gdp: 2054 }, { country: 'Russia', continent: 'Europe', year: 2020, gdp: 1683 }, { country: 'Russia', continent: 'Europe', year: 2021, gdp: 1719 }, { country: 'Russia', continent: 'Europe', year: 2022, gdp: 1757 }, { country: 'Russia', continent: 'Europe', year: 2023, gdp: 1818 }, { country: 'Spain', continent: 'Europe', year: 2020, gdp: 1550 }, { country: 'Spain', continent: 'Europe', year: 2021, gdp: 1616 }, { country: 'Spain', continent: 'Europe', year: 2022, gdp: 1690 }, { country: 'Spain', continent: 'Europe', year: 2023, gdp: 1758 }, { country: 'Australia', continent: 'Oceania', year: 2020, gdp: 1541 }, { country: 'Australia', continent: 'Oceania', year: 2021, gdp: 1615 }, { country: 'Australia', continent: 'Oceania', year: 2022, gdp: 1700 }, { country: 'Australia', continent: 'Oceania', year: 2023, gdp: 1794 }, { country: 'Mexico', continent: 'North America', year: 2020, gdp: 1306 }, { country: 'Mexico', continent: 'North America', year: 2021, gdp: 1376 }, { country: 'Mexico', continent: 'North America', year: 2022, gdp: 1449 }, { country: 'Mexico', continent: 'North America', year: 2023, gdp: 1526 }, { country: 'Indonesia', continent: 'Asia', year: 2020, gdp: 1175 }, { country: 'Indonesia', continent: 'Asia', year: 2021, gdp: 1259 }, { country: 'Indonesia', continent: 'Asia', year: 2022, gdp: 1349 }, { country: 'Indonesia', continent: 'Asia', year: 2023, gdp: 1446 }, { country: 'Netherlands', continent: 'Europe', year: 2020, gdp: 980 }, { country: 'Netherlands', continent: 'Europe', year: 2021, gdp: 1021 }, { country: 'Netherlands', continent: 'Europe', year: 2022, gdp: 1065 }, { country: 'Netherlands', continent: 'Europe', year: 2023, gdp: 1106 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2020, gdp: 815 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2021, gdp: 835 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2022, gdp: 860 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2023, gdp: 889 }, { country: 'Nigeria', continent: 'Africa', year: 2020, gdp: 504 }, { country: 'Nigeria', continent: 'Africa', year: 2021, gdp: 572 }, { country: 'Nigeria', continent: 'Africa', year: 2022, gdp: 649 }, { country: 'Nigeria', continent: 'Africa', year: 2023, gdp: 736 }, { country: 'Argentina', continent: 'South America', year: 2020, gdp: 444 }, { country: 'Argentina', continent: 'South America', year: 2021, gdp: 476 }, { country: 'Argentina', continent: 'South America', year: 2022, gdp: 508 }, { country: 'Argentina', continent: 'South America', year: 2023, gdp: 540 }, { country: 'South Africa', continent: 'South America', year: 2020, gdp: 403 }, { country: 'South Africa', continent: 'South America', year: 2021, gdp: 419 }, { country: 'South Africa', continent: 'South America', year: 2022, gdp: 438 }, { country: 'South Africa', continent: 'South America', year: 2023, gdp: 456 }, { country: 'Colombia', continent: 'South America', year: 2020, gdp: 367 }, { country: 'Colombia', continent: 'South America', year: 2021, gdp: 382 }, { country: 'Colombia', continent: 'South America', year: 2022, gdp: 400 }, { country: 'Colombia', continent: 'South America', year: 2023, gdp: 422 }, { country: 'Chile', continent: 'South America', year: 2020, gdp: 352 }, { country: 'Chile', continent: 'South America', year: 2021, gdp: 378 }, { country: 'Chile', continent: 'South America', year: 2022, gdp: 404 }, { country: 'Chile', continent: 'South America', year: 2023, gdp: 433 }, { country: 'Egypt', continent: 'Africa', year: 2020, gdp: 339 }, { country: 'Egypt', continent: 'Africa', year: 2021, gdp: 359 }, { country: 'Egypt', continent: 'Africa', year: 2022, gdp: 380 }, { country: 'Egypt', continent: 'Africa', year: 2023, gdp: 414 }, { country: 'Peru', continent: 'South America', year: 2020, gdp: 252 }, { country: 'Peru', continent: 'South America', year: 2021, gdp: 266 }, { country: 'Peru', continent: 'South America', year: 2022, gdp: 281 }, { country: 'Peru', continent: 'South America', year: 2023, gdp: 297 }, { country: 'New Zealand', continent: 'Oceania', year: 2020, gdp: 227 }, { country: 'New Zealand', continent: 'Oceania', year: 2021, gdp: 242 }, { country: 'New Zealand', continent: 'Oceania', year: 2022, gdp: 257 }, { country: 'New Zealand', continent: 'Oceania', year: 2023, gdp: 272 }, { country: 'Algeria', continent: 'Africa', year: 2020, gdp: 207 }, { country: 'Algeria', continent: 'Africa', year: 2021, gdp: 212 }, { country: 'Algeria', continent: 'Africa', year: 2022, gdp: 218 }, { country: 'Algeria', continent: 'Africa', year: 2023, gdp: 228 } ]; // return new wijmo.CollectionView(data, { groupDescriptions: ['year', 'continent', 'country'] }); } // get the group data for a selected point export function getGroupData(group) { // get items for this group, aggregate by sales let arr = []; group.groups.forEach(function (g) { arr.push({ name: g.name, gdp: g.getAggregate(wijmo.Aggregate.Sum, 'gdp'), group: g }); }); // // return a new collection view sorted by sales return new wijmo.CollectionView(arr, { sortDescriptions: [ new wijmo.SortDescription('gdp', false) ] }); }