Camera Shape

The Camera shape provides a live snapshot, or mirror image, of a referenced range area in the spreadsheet. It is a dynamic image, meaning that any change in the referenced region is immediately reflected in the camera shape image making them ideal for creating informative dashboards.

Camera shapes can be moved, resized, rotated and supported for Excel I/O. They can also be grouped or ungrouped with other shapes and copy pasted from one sheet to another.

SpreadJS provides camera shape. You can add a camera shape and change the camera shape style using the CameraShape API
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.name("CameraShape"); prepareCellRangeData(sheet); initShape(sheet); } function prepareCellRangeData(sheet){ sheet.setArray(0, 0, [ ["Product", "Price", "Quantity", "Sales"], ['Kraft Real Mayo', 5.71, 1], ['Smartfood Popcorn', 2.5, 4], ['Teddy Grahams Crackers', 35, 5], ['Parmesan Cheese', 14.89, 9], ['Planter Deluxe Whole Cashew', 8.52, 3], ['Total'] ]); sheet.setColumnWidth(0, 190); sheet.setColumnWidth(1, 100); sheet.setColumnWidth(2, 100); sheet.setColumnWidth(3, 100); sheet.setFormula(1, 3, "B2*C2"); sheet.setFormula(2, 3, "B3*C3"); sheet.setFormula(3, 3, "B4*C4"); sheet.setFormula(4, 3, "B5*C5"); sheet.setFormula(5, 3, "B6*C6"); sheet.addCustomName('customerName1', '=$B$2:$B$6', 0, 0); sheet.addCustomName('customerName2', '=$C$2:$C$6', 0, 0); sheet.setFormula(6, 1, "=SUM(customerName1)"); sheet.setFormula(6, 2, "=SUM(customerName2)"); sheet.getRange(6, 0, 1, 4).foreColor('red'); sheet.setFormula(6, 3, "B7*C7"); sheet.getRange(-1,1,0,1).formatter("$ #,##0.00"); sheet.getRange(-1,3,0,1).formatter("$ #,##0.00"); var table = sheet.tables.add("table1", 0, 0, 7, 4, GC.Spread.Sheets.Tables.TableThemes.light7); table.filterButtonVisible(false); } function initShape(sheet) { var shape = sheet.shapes.addCameraShape("myCameraShape1", "CameraShape!A1:D7", 240, 200); var shapeStyle = shape.style(); shapeStyle.fill.color = 'pink'; shapeStyle.fill.transparency = 0.8; shapeStyle.line.color = 'black'; shapeStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot; shapeStyle.line.width = 4; shapeStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square; shapeStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter; shapeStyle.line.transparency = 0.1; shape.style(shapeStyle); }
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }