RangeBlock

A Rangeblock sparkline can bind to and return a range template to make working with range templates easier. Take a look at the workbook below to see how the RenderSheet uses a range of cells in the TemplateSheet as the template and the OBJECT function to create an object from data in the DataSource sheet.

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

You can create a RangeBlock sparkline using the RANGEBLOCKSPARKLINE function in a formula: =RANGEBLOCKSPAKLINE(template_range, data_expr).

The function has the following parameters:

template_range: Reference that represents the range of rangetemplate, such as Template!A1:E10.

data_expr: Cell reference or the result of OBJECT function that represents the object data of range template for the data bind, such as A1 or OBJECT(E4:AB4, E5:AB5).

For example:

// the cell reference
renderSheet.setFormula(0, 0, 'OBJECT("name", "Peyton\'s Assets", "savings", 25000, "shares", 55000, "stocks", 15000, "house", 250000, "bonds", 11000, "car", 7500)');
renderSheet.setFormula(1, 0, '=RANGEBLOCKSPARKLINE(Template!A1:E10, A1)');

// the result of OBJECT function
renderSheet.setFormula(0, 0, 'RANGEBLOCKSPARKLINE(TemplateSheet!A2:F11, OBJECT(E4:AB4, E5:AB5))');

For the OBJECT function, you can create an object using OBJECT function in a formula:
=OBJECT(prop1, expr1, prop2, expr2, …) // the 1->1 case
or =OBJECT(props_range, exprs_range) // the n1->n2 case
or =OBJECT(property1, expressionArray1, property2, expressionArray2, …) // the 1->n case.
It defines an object and the params must be key-value order and needs to come in pairs. The prop and value support 1->1, 1->n, n1->n2(n1 equals to n2). The case of 1->1 and n1->n2 returns an object, the case of 1->n returns an object array.

For example:

sheet.setValue(0, 0, "name");
sheet.setValue(0, 1, "test");
sheet.setValue(1, 0, "sex");
sheet.setValue(1, 1, "M");
sheet.setValue(2, 0, "age");
sheet.setValue(2, 1, 20);

sheet.setFormula(3, 0, 'OBJECT(A1:A3, B1:B3)'); // the n1->n2 case

sheet.setFormula(3, 0, 'OBJECT(A1, B1, A2, B2, A3, B3)'); // the 1->1 case

sheet.setFormula(3, 0, 'OBJECT("name","test")'); // the 1->1 case



// The 1->n case
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
spread.options.allowDynamicArray = true;
var dataSheet = spread.getSheet(1);
dataSheet.name("Data");
var prefixes = ['a', 'b', 'c', 'd'];
var arrayValues = [], rowValues;
for (var i = 0; i < 6; i++) {
    rowValues = [];
    for (var j = 0; j < 4; j++) {
        rowValues[j] = prefixes[j] + (i + 1);
    }
    arrayValues[i] = rowValues;
}
dataSheet.setArray(0, 0, arrayValues);

var sheet = spread.getActiveSheet();
sheet.setRowCount(2);
sheet.setColumnCount(3);
for (var i = 0; i < 2; i++) {
    sheet.setRowHeight(i, 100);
    for (var j = 0; j < 3; j++) {
        sheet.setColumnWidth(j, 100);
    }
}
sheet.setFormula(0, 0, '=OBJECT("name", INDEX(Data!A1:D6,SEQUENCE(2,3,1),1), "age", INDEX(Data!A1:D6, SEQUENCE(2,3,1),2))');
You can create a RangeBlock sparkline using the RANGEBLOCKSPARKLINE function in a formula: =RANGEBLOCKSPAKLINE(template_range, data_expr). The function has the following parameters: template_range: Reference that represents the range of rangetemplate, such as Template!A1:E10. data_expr: Cell reference or the result of OBJECT function that represents the object data of range template for the data bind, such as A1 or OBJECT(E4:AB4, E5:AB5). For example: For the OBJECT function, you can create an object using OBJECT function in a formula: =OBJECT(prop1, expr1, prop2, expr2, …) // the 1->1 case or =OBJECT(props_range, exprs_range) // the n1->n2 case or =OBJECT(property1, expressionArray1, property2, expressionArray2, …) // the 1->n case. It defines an object and the params must be key-value order and needs to come in pairs. The prop and value support 1->1, 1->n, n1->n2(n1 equals to n2). The case of 1->1 and n1->n2 returns an object, the case of 1->n returns an object array. For example:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 }); spread.options.allowDynamicArray = true; initSpread(spread); }; function initSpread(spread) { var renderSheet = spread.getSheet(0); var templateSheet = spread.getSheet(1); var dataSheet = spread.getSheet(2); spread.options.scrollByPixel = true; spread.options.scrollPixel = 10; spread.suspendPaint(); initTemplateSheet(templateSheet); initDataSheet(dataSheet); initRenderSheet(renderSheet); spread.resumePaint(); } function initRenderSheet (renderSheet) { renderSheet.name("RenderSheet"); renderSheet.setColumnCount(50); renderSheet.setColumnWidth(0, 1200); renderSheet.getCell(0, 0).value("Top 5 Products (by units sold)") .font("20px Arial").vAlign(GC.Spread.Sheets.VerticalAlign.center) .foreColor("white").backColor("#82bc00"); renderSheet.setRowHeight(0, 35); for (var i = 1; i < 6; i++) { renderSheet.setRowHeight(i, 250); renderSheet.setFormula(i, 0, 'RANGEBLOCKSPARKLINE(TemplateSheet!A2:M11, OBJECT(product_table[#Headers], INDEX(product_table[#Data],ROW()-1,SEQUENCE(COUNTA(product_table[#Headers]),1))))'); } } function initTemplateSheet (templateSheet) { templateSheet.fromJSON(templateJson); templateSheet.name("TemplateSheet"); templateSheet.setFormatter(2,1,"=IMAGE(\"$DEMOROOT$/spread/source/images/products/\"&@)"); templateSheet.setBindingPath(2,1,"Image"); } function initDataSheet (dataSheet) { dataSheet.fromJSON(dataJson); }
<!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"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/range-block-data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/range-block-template.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" style="width:100%;height:100%"></div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }