Isue with SpreadJS Designer Quickstart Tutorial

Posted by: georgeg on 3 January 2025, 3:16 pm EST

    • Post Options:
    • Link

    Posted 3 January 2025, 3:16 pm EST - Updated 3 January 2025, 3:19 pm EST

    Was trying to complete this part of the quick start tutorial:

    https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/quick-start-designer#use-designer-component-with-an-existing-spreadsheet

    This is my code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
        
    
        <!--CSS files-->
        <link href="css/gc.spread.sheets.18.0.0.css" rel="stylesheet" type="text/css" />
        <!--Designer Component CSS file--> 
        <link href="css/gc.spread.sheets.designer.18.0.0.min.css" rel="stylesheet" type="text/css" />
    
        <!--Script files-->
        <script src="scripts/gc.spread.sheets.all.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.charts.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.shapes.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.print.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.barcode.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.pdf.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.tablesheet.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.excelio.18.0.0.min.js" type="text/javascript"></script>
        <!--Designer Component JS files--> 
        <script src="scripts/gc.spread.sheets.designer.resource.en.18.0.0.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.designer.all.18.0.0.min.js" type="text/javascript"></script>
    
        <script>
            $(document).ready(function () {
                // initialize Spread
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
                // Get the activesheet
                var sheet = spread.getSheet(0);
                // Set Column Width
                sheet.setColumnWidth(2, 100);
                sheet.setColumnWidth(4, 100);
                // Create Data Array
                var dataArray =
                    [
                        ['Region', 'Subregion', 'country', 'Population'],
                        ['Asia', 'Southern', 'India', 1354051854],
                        [, , 'Pakistan', 200813818],
                        [, , 'Bangladesh', 166368149],
                        [, , 'Others', 170220300],
                        [, 'Eastern', 'China', 1415045928],
                        [, , 'Japan', 127185332],
                        [, , 'Others', 111652273],
                        [, 'South-Eastern', , 655636576],
                        [, 'Western', , 272298399],
                        [, 'Central', , 71860465],
                        ['Africa', 'Eastern', , 433643132],
                        [, 'Western', , 381980688],
                        [, 'Northern', , 237784677],
                        [, 'Others', , 234512021],
                        ['Europe', , , 742648010],
                        ['Others', , , 1057117703]
                    ];
                // Set Array
                sheet.setArray(1, 1, dataArray);
                var treemapChart = sheet.charts.add('chart1',
                GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
                
                // Initialize designer components and use above created spread component
                var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);
    
            });
        </script>
    </head>
    <body>
        <div id="ss"></div>
        <!--DOM element for designer components-->
        <div id="designerHost" style="width:100%; height:1000px; border: 1px solid gray;"></div>
    </body>
    </html>

    BTW the very first simple Designer worked great.

    I am getting the following Uncaught TypeErrors:

    gc.spread.sheets.charts.18.0.0.min.js:12  Uncaught TypeError: Cannot read properties of undefined (reading 'ShapeBaseData')
        at ./dist/plugins/chart/shapeChart/chartShapeData.js (gc.spread.sheets.charts.18.0.0.min.js:12:3069245)
        at i (gc.spread.sheets.charts.18.0.0.min.js:12:488)
        at ./dist/plugins/chart/shapeChart/chart.js (gc.spread.sheets.charts.18.0.0.min.js:12:3057391)
        at i (gc.spread.sheets.charts.18.0.0.min.js:12:488)
        at ./dist/plugins/chart/shapeChart/chart.entry.js (gc.spread.sheets.charts.18.0.0.min.js:12:3054703)
        at i (gc.spread.sheets.charts.18.0.0.min.js:12:488)
        at ./dist/plugins/chart/chart.entry.js (gc.spread.sheets.charts.18.0.0.min.js:12:150999)
        at i (gc.spread.sheets.charts.18.0.0.min.js:12:488)
        at gc.spread.sheets.charts.18.0.0.min.js:12:3082307
        at gc.spread.sheets.charts.18.0.0.min.js:12:393
    ./dist/plugins/chart/shapeChart/chartShapeData.js @ gc.spread.sheets.charts.18.0.0.min.js:12
    i @ gc.spread.sheets.charts.18.0.0.min.js:12
    ./dist/plugins/chart/shapeChart/chart.js @ gc.spread.sheets.charts.18.0.0.min.js:12
    i @ gc.spread.sheets.charts.18.0.0.min.js:12
    ./dist/plugins/chart/shapeChart/chart.entry.js @ gc.spread.sheets.charts.18.0.0.min.js:12
    i @ gc.spread.sheets.charts.18.0.0.min.js:12
    ./dist/plugins/chart/chart.entry.js @ gc.spread.sheets.charts.18.0.0.min.js:12
    i @ gc.spread.sheets.charts.18.0.0.min.js:12
    (anonymous) @ gc.spread.sheets.charts.18.0.0.min.js:12
    (anonymous) @ gc.spread.sheets.charts.18.0.0.min.js:12
    (anonymous) @ gc.spread.sheets.charts.18.0.0.min.js:12
    gc.spread.sheets.designer.all.18.0.0.min.js:1  Uncaught TypeError: Cannot read properties of undefined (reading 'ChartUtility')
        at ./src/commands/chartHelper.ts (gc.spread.sheets.designer.all.18.0.0.min.js:1:305711)
        at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)
        at ./src/components/compositeComponents/rangeSelect/rangeSelectDialog.ts (gc.spread.sheets.designer.all.18.0.0.min.js:1:6932813)
        at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)
        at ./src/components/compositeComponents/dialog/templateBindDialog.ts (gc.spread.sheets.designer.all.18.0.0.min.js:1:6729785)
        at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)
        at ./src/interfaces/designercoreInterfaceentry.ts (gc.spread.sheets.designer.all.18.0.0.min.js:1:7348265)
        at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)
        at ./src/commands/ribbon/home/fonts/formatCellHandler/formatCellHandler.ts (gc.spread.sheets.designer.all.18.0.0.min.js:1:2957312)
        at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)
    ./src/commands/chartHelper.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    ./src/components/compositeComponents/rangeSelect/rangeSelectDialog.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    ./src/components/compositeComponents/dialog/templateBindDialog.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    ./src/interfaces/designercoreInterfaceentry.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    ./src/commands/ribbon/home/fonts/formatCellHandler/formatCellHandler.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    ./src/commands/ribbon/home/alignment/orientation/orientation/formatCellAlignment.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    e.exports @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    Bt @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    ./src/commands/defaultConfig.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    ./src/all.entry.ts @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    i @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    (anonymous) @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    (anonymous) @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    (anonymous) @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    (anonymous) @ gc.spread.sheets.designer.all.18.0.0.min.js:1
    gc.spread.sheets.charts.18.0.0.min.js:12  Uncaught TypeError: Cannot read properties of undefined (reading 'all')
        at O (gc.spread.sheets.charts.18.0.0.min.js:12:141893)
        at HTMLInputElement.<anonymous> (gc.spread.sheets.charts.18.0.0.min.js:12:147076)
        at HTMLInputElement.n (gc.spread.sheets.all.18.0.0.min.js:12:407465)
        at ct (gc.spread.sheets.all.18.0.0.min.js:12:405142)
        at ct (gc.spread.sheets.all.18.0.0.min.js:12:405164)
        at z.trigger (gc.spread.sheets.all.18.0.0.min.js:12:408201)
        at Y.ki (gc.spread.sheets.all.18.0.0.min.js:12:1285962)
        at Y.vj (gc.spread.sheets.all.18.0.0.min.js:12:1282815)
        at Y.qL (gc.spread.sheets.all.18.0.0.min.js:12:1228749)
        at Y.setColumnWidth (gc.spread.sheets.all.18.0.0.min.js:12:1230356)

    Seems like I might be missing some .js files?

    George

  • Posted 6 January 2025, 5:05 am EST - Updated 6 January 2025, 5:10 am EST

    Hi George,

    I was able to replicate the behavior by following the steps in this documentation: https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/quick-start-designer#use-designer-component-with-an-existing-spreadsheet

    Upon investigation, I discovered an issue with the script file order specified in the documentation. I have escalated this to the relevant team for correction. The current documentation adds the shape script after the chart script, but the shape script must be included before the chart script, as the chart script depends on it. Adding the shape script before the chart resolves the issue.

    Please refer to the attached GIF “Steps.gif” and the provided sample for clarification.

    Gif:

    Sample: Sample.zip

    The sample includes an index.html file without the scripts and CSS. To run it, add the required script and CSS files as specified in the index.html.

    Regards,

    Priyam

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels