Column with Drill-down

The FlexChart control supports the implementation of drill-down charts. This column chart uses FlexChart's selectionChanged event to determine which column the user has clicked on, and then updates the chart's itemsSource with new data, as well as changing the chart's color to show that new data is being displayed.

Learn about FlexChart | Drill-Down Documentation | FlexChart API Reference

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; }
(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);