Demos
Enhanced Add-Ons
ReportSheet
Chart
Filter Chart Data By Multiple Parameters

Filter Chart Data By Multiple Parameters

Charts in a ReportSheet can be filtered by multiple parameters to show different parts of the data. In the below demo, the Region and Year can be changed to show specific chart data.

JavaScript
Angular
Vue3
React
Description
app.jsx
app-func.jsx
index.html
styles.css
Copy to CodeMine

This report is loading a predefined template using fromJSON. You can open the sample in a new window to view the ReportSheet settings in the SpreadJS Designer.

How to open desgnr

window.onload = async () => {
    const loadingTip = addLoadingTip();
    const { spread, designer } = createSpreadAndDesigner();
    const res = await fetch('$DEMOROOT$/en/sample/features/report-sheet/chart/filter-chart-data-by-multiple-parameters/spread.json');
    await spread.fromJSON(await res.json());
    loadingTip.remove();
    if (designer) {
        designer.refresh();
    }
}

function createSpreadAndDesigner() {
    const demoHost = document.getElementById('demo-host');
    if (window !== top) {
        return {
            spread: new GC.Spread.Sheets.Workbook(demoHost, { sheetCount: 1 }),
        }
    } else {
        const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 });
        return {
            designer,
            spread: designer.getWorkbook(),
        }
    }
}
function addLoadingTip() {
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.inset = '0';
    div.style.display = 'flex';
    div.style.alignItems = 'center';
    div.style.justifyContent = 'center';
    div.style.background = 'white';
    div.style.zIndex = '100';
    div.textContent = 'Loading data from server ...';
    document.body.appendChild(div);
    return div;
}
This report is loading a predefined template using fromJSON. You can open the sample in a new window to view the ReportSheet settings in the SpreadJS Designer.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; ReactDOM.render(<AppFunc />, document.getElementById('app'));
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { SpreadSheets } from '@mescius/spread-sheets-react'; import GC from '@mescius/spread-sheets'; import '@mescius/spread-sheets-print'; import '@mescius/spread-sheets-shapes'; import '@mescius/spread-sheets-charts'; import '@mescius/spread-sheets-reportsheet-addon'; import '@mescius/spread-sheets-datacharts-addon'; import '@mescius/spread-sheets-tablesheet'; import '@mescius/spread-sheets-ganttsheet'; import '@mescius/spread-sheets-formula-panel'; import '@mescius/spread-sheets-designer-resources-en'; import { Designer } from '@mescius/spread-sheets-designer-react'; import './styles.css'; import '$DEMOROOT$/spread/source/js/react_vue/license.js'; import { registerlic } from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'; registerlic(GC); export function AppFunc() { return ( <div class='demo-host'> <div id="report-sheet-parameter-ui" class="parameter-ui"></div> {top === window ? <Designer styleInfo={{ height: '100%' }} designerInitialized={initDesigner} /> : <div class="demo"> <SpreadSheets workbookInitialized={initSpread} /> </div> } </div> ); } async function initDesigner(designer) { await initSpread(designer.getWorkbook()); let parameterUIHost = document.getElementById("report-sheet-parameter-ui"); parameterUIHost.style.display = "none"; designer.refresh(); } async function initSpread(spread, inDesigner) { spread.suspendPaint(); spread.setSheetCount(1); const loadingTip = addLoadingTip(); const res = await fetch('$DEMOROOT$/en/sample/features/report-sheet/chart/filter-chart-data-by-multiple-parameters/spread.json'); await spread.fromJSON(await res.json()); if (!inDesigner) { initParameterFilterReportParameterUI(spread.getActiveSheetTab()); } loadingTip.remove(); spread.resumePaint(); } function addLoadingTip() { const div = document.createElement('div'); div.style.position = 'absolute'; div.style.inset = '0'; div.style.display = 'flex'; div.style.alignItems = 'center'; div.style.justifyContent = 'center'; div.style.background = 'white'; div.style.zIndex = '100'; div.textContent = 'Loading data from server ...'; document.body.appendChild(div); return div; } function initParameterFilterReportParameterUI (reportSheet) { let parameterUIHost = document.getElementById("report-sheet-parameter-ui"); reportSheet.setParametersUI(parameterUIHost, initParametersUI, parameterOnChanged); } function initParametersUI (sheet) { } function parameterOnChanged (sheet, valueChangedArgs) { if (valueChangedArgs.tag === "submitOnChangeComboBoxYear" || valueChangedArgs.tag === "submitOnChangeComboBoxRegion") { sheet.regenerateReport(); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <script src="$DEMOROOT$/en/react/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" style="height: 100%;"></div> </body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .demo-host { width: 100%; height: 100%; overflow: hidden; } .demo { width: 100%; height: calc(100% - 60px); overflow: hidden; } .parameter-ui { width: 100%; height: 60px; overflow: hidden; float: left; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets-designer-resources-en': 'npm:@mescius/spread-sheets-designer-resources-en/index.js', '@mescius/spread-sheets-designer-react': 'npm:@mescius/spread-sheets-designer-react/index.js', '@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js', '@mescius/spread-excelio': 'npm:@mescius/spread-excelio/index.js', '@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js', '@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js', '@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js', '@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js', '@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js', '@mescius/spread-sheets-datacharts-addon': 'npm:@mescius/spread-sheets-datacharts-addon/index.js', '@mescius/spread-sheets-reportsheet-addon': 'npm:@mescius/spread-sheets-reportsheet-addon/index.js', '@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js', '@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js', '@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', '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: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);