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:
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