Quick Start

DataCharts allow you to bind charts directly to the Data Manager data, eliminating the need to store data within the SpreadJS workbook. The below demo shows how to create a DataChart and edit all of the different options within the UI.

For our ReportSheets Add-On users, the DataCharts Add-On is included and seamlessly integrates with the same Data Manager, enabling you to enhance your reports with dynamic charts effortlessly. If you wish to utilize the DataCharts Add-On outside the ReportSheets Add-On within your spreadsheets, a separate DataCharts Add-On license is required.

Description
app.js
index.html
styles.css
Copy to CodeMine

To use the DataCharts feature, add the SpreadJS DataCharts JS file link into the document's head section:

<head>
   ...
   <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.shapes.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.datacharts.x.x.x.min.js' type='text/javascript'></script>
</head>

You can create a DataChart with the sheet.dataCharts.add method, as shown below:

const dataManager = spread.dataManager();
const salesTable = createSalesTable(dataManager);
await salesTable.fetch();
const sheet = spread.getActiveSheet();
const dataChart = sheet.dataCharts.add('data-chart-1', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        bar: {
            // category width
            width: 0.6,
        },
        header: {
            // title settings
            title: 'Column Chart',
            padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
            },
            style: {
                fill: {
                    type: 'CssColor',
                    color: 'rgba(242, 242, 242, 1)',
                }
            },
            textStyle: {
                color: 'rgba(51, 51, 51, 1)',
                fontSize: 18,
                fontFamily: 'Calibri',
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: 'Bold',
                alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
            }
        },
        // set padding for the chart
        plotAreas: [{
            padding: {
                left: 20,
                right: 20,
                top: 20,
                bottom: 20,
            }
        }]
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.column,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Product' },
                color: { field: 'Product' },
            }
        }
    ]
});

function createSalesTable (dataManager) {
    const records = [
        ['2021', 'East', 'SunLin', 'Drinks', 'Apple Juice', 140, 9],
        ['2021', 'East', 'JinShiPeng', 'Drinks', 'Apple Juice', 290, 17],
        ['2021', 'East', 'ZhangShang', 'Drinks', 'Apple Juice', 300, 28],
        ['2021', 'East', 'SunYang', 'Drinks', 'Apple Juice', 120, 10],
        ['2021', 'East', 'YuanChengJie', 'Drinks', 'Apple Juice', 220, 15],
        ['2021', 'North', 'ZhangYing', 'Drinks', 'Apple Juice', 250.0, 23],
        ['2021', 'North', 'WangWei', 'Drinks', 'Apple Juice', 180.0, 17],
        ['2021', 'North', 'ZhangWu', 'Drinks', 'Apple Juice', 233.0, 23],
        ['2021', 'North', 'HanWen', 'Drinks', 'Apple Juice', 123.0, 12],
        ['2021', 'East', 'SunLin', 'Drinks', 'Milk', 431.0, 38],
        ['2021', 'East', 'JinShiPeng', 'Drinks', 'Milk', 635.0, 56],
        ['2021', 'East', 'ZhangShang', 'Drinks', 'Milk', 324.0, 33],
        ['2021', 'East', 'SunYang', 'Drinks', 'Milk', 644.0, 68],
        ['2021', 'East', 'YuanChengJie', 'Drinks', 'Milk', 343.0, 19],
        ['2021', 'North', 'ZhangYing', 'Drinks', 'Milk', 234.0, 13],
        ['2021', 'North', 'WangWei', 'Drinks', 'Milk', 666.0, 39],
        ['2021', 'North', 'ZhangWu', 'Drinks', 'Milk', 700.0, 77],
        ['2021', 'North', 'HanWen', 'Drinks', 'Milk', 111.0, 8],
        ['2021', 'East', 'SunLin', 'Drinks', 'Orange Juice', 176.0, 18],
        ['2021', 'East', 'JinShiPeng', 'Drinks', 'Orange Juice', 500.0, 20],
        ['2021', 'East', 'ZhangShang', 'Drinks', 'Orange Juice', 340.0, 19],
        ['2021', 'East', 'SunYang', 'Drinks', 'Orange Juice', 540.0, 45],
        ['2021', 'East', 'YuanChengJie', 'Drinks', 'Orange Juice', 563.0, 56],
        ['2021', 'North', 'ZhangYing', 'Drinks', 'Orange Juice', 300.0, 19],
        ['2021', 'North', 'WangWei', 'Drinks', 'Orange Juice', 490.0, 44],
        ['2021', 'North', 'ZhangWu', 'Drinks', 'Orange Juice', 233.0, 25],
        ['2021', 'North', 'HanWen', 'Drinks', 'Orange Juice', 760.0, 78],
        ['2021', 'East', 'SunLin', 'Dessert', 'Chocolate', 333.0, 32],
        ['2021', 'East', 'JinShiPeng', 'Dessert', 'Chocolate', 420.0, 46],
        ['2021', 'East', 'ZhangShang', 'Dessert', 'Chocolate', 318.0, 37],
        ['2021', 'East', 'SunYang', 'Dessert', 'Chocolate', 256.0, 21],
        ['2021', 'East', 'YuanChengJie', 'Dessert', 'Chocolate', 583.0, 54],
        ['2021', 'North', 'ZhangYing', 'Dessert', 'Chocolate', 352.0, 33],
        ['2021', 'North', 'WangWei', 'Dessert', 'Chocolate', 384.0, 39],
        ['2021', 'North', 'ZhangWu', 'Dessert', 'Chocolate', 435.0, 42],
        ['2021', 'North', 'HanWen', 'Dessert', 'Chocolate', 356.0, 36],
        ['2021', 'East', 'SunLin', 'Dessert', 'Beef Jerky', 789.0, 73],
        ['2021', 'East', 'JinShiPeng', 'Dessert', 'Beef Jerky', 156.0, 14],
        ['2021', 'East', 'ZhangShang', 'Dessert', 'Beef Jerky', 289.0, 23],
        ['2021', 'East', 'SunYang', 'Dessert', 'Beef Jerky', 562.0, 45],
        ['2021', 'East', 'YuanChengJie', 'Dessert', 'Beef Jerky', 546.0, 56],
        ['2021', 'North', 'ZhangYing', 'Dessert', 'Beef Jerky', 218.0, 17],
        ['2021', 'North', 'WangWei', 'Dessert', 'Beef Jerky', 541.0, 56],
        ['2021', 'North', 'ZhangWu', 'Dessert', 'Beef Jerky', 219.0, 21],
        ['2021', 'North', 'HanWen', 'Dessert', 'Beef Jerky', 345.0, 21],
    ];

    const columns = ['Year', 'Region', 'Salesman', 'ProductCategory', 'Product', 'Sales', 'Return'];
    return dataManager.addTable('Sales', {
        data: records.map((x) => {
            const record = {};
            columns.forEach((c, i) => record[c] = x[i]);
            return record;
        })
    });
}
To use the DataCharts feature, add the SpreadJS DataCharts JS file link into the document's head section: You can create a DataChart with the sheet.dataCharts.add method, as shown below:
window.onload = async () => { const loadingTip = addLoadingTip(); const { spread, designer } = createSpreadAndDesigner(); const res = await fetch('$DEMOROOT$/en/sample/features/data-charts/quick-start/spread.json'); await spread.fromJSON(await res.json()); new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('panel-host', spread); spread.getActiveSheet().dataCharts.all()[0].isSelected(true); loadingTip.remove(); if (designer) { designer.refresh(); } } function createSpreadAndDesigner() { const demoHost = document.getElementById('demo-host'); if (window !== top) { return { spread: new GC.Spread.Sheets.Workbook('spread-host', { 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; }
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-datacharts-addon/dist/gc.spread.sheets.datacharts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script> const designerDependencyScripts = [ '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-designer-resources-en/dist/gc.spread.sheets.designer.resource.en.min.js', '$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js', '$DEMOROOT$/spread/source/js/designer/license.js', ] function appendScriptNode (src) { const script = document.createElement('script'); script.src = src; script.async = false; script.type = 'text/javascript'; document.head.appendChild(script); } if (top === window) { // not in iframe designerDependencyScripts.forEach(appendScriptNode); } </script> <script src="app.js" type="text/javascript"></script> </head> <body> <div class="sample-tutorial"> <div id="demo-host"> <div id="spread-host"></div> <div id="panel-host"></div> </div> </div> </body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } #demo-host { width: 100%; height: 100%; overflow: hidden; float: left; } #spread-host { position: absolute; top: 0; left: 0; width: calc(100% - 380px); height: 100%; } #panel-host { position: absolute; top: 0; right: 0; width: 380px; height: 100%; }