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.vue
index.html
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.
<template> <div class="demo-host"> <div ref="parameterRef" class="parameter-ui"></div> <gc-spread-sheets-designer class="demo-designer" v-if="showDesigner" @designerInitialized="initDesigner" /> <gc-spread-sheets class="demo-runtime" v-else @workbookInitialized="initSpread" /> </div> </template> <script setup> 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-vue'; import '@mescius/spread-sheets-designer-resources-en'; import '@mescius/spread-sheets-designer-vue'; import { ref, onMounted } from 'vue'; import '$DEMOROOT$/spread/source/js/react_vue/license.js'; import { registerlic } from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'; registerlic(GC); const showDesigner = top === window; const spreadRef = ref(null); const parameterRef = ref(null); const designerRef = ref(null); async function initDesigner(designer) { designerRef.value = designer; let parameterUIHost = parameterRef.value; parameterUIHost.style.display = "none"; await initSpread(designer.getWorkbook(), true); designer.refresh(); } onMounted(() => { parameterRef.value; }); async function initSpread(spread, inDesigner) { spreadRef.value = spread; 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 = parameterRef.value; reportSheet.setParametersUI(parameterUIHost, initParametersUI, parameterOnChanged); } function initParametersUI (sheet) { } function parameterOnChanged (sheet, valueChangedArgs) { if (valueChangedArgs.tag === "submitOnChangeComboBoxYear" || valueChangedArgs.tag === "submitOnChangeComboBoxRegion") { sheet.regenerateReport(); } } </script> <style scoped> body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; } .demo-host { width: 100%; height: 100%; overflow: hidden; } .demo-designer { width: 100%; height: 100%; overflow: hidden; } .demo-runtime { width: 100%; height: calc(100% - 60px); overflow: hidden; } .parameter-ui { width: 100%; height: 60px; overflow: hidden; float: left; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> System.import("./src/app.js"); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.js", 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", '@mescius/spread-sheets-designer-resources-en': 'npm:@mescius/spread-sheets-designer-resources-en/index.js', '@mescius/spread-sheets-designer-vue': 'npm:@mescius/spread-sheets-designer-vue/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-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);