(Showing Draft Content)

Rangeblock Sparkline

You can create a rangeblock sparkline with SpreadJS. This sparkline function binds and returns a rangetemplate.

Syntax

Use the following syntax for the rangeblock sparkline function:

RANGEBLOCKSPARKLINE(template_range, data_expression)

This function has the following arguments:

Argument	Description
template_range	Refers to the range reference for a range template.
data_expression	Refers to the object data for the range template. It accepts the cell reference, the value of which is an object or the result of the object function. You can use the OBJECT function to define an object.

Users may also note that they can use the formatstring function to bind the object from the cell.

RANGEBLOCKSPARKLINE(template-range, @)

Use Case

The workbook snapshot below gives an insight into 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 data sheet.

The following code sample creates Rangeblock sparklines.

<script>
 $(document).ready(function () {
 // initializing Spread
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 4 });
 // get the activesheet
 var activeSheet = spread.getActiveSheet();
 // enable DynamicArray
 spread.options.allowDynamicArray = true;
 var renderSheet = spread.getSheet(0);
 var templateSheet = spread.getSheet(1);
 var dataSheet = spread.getSheet(2);
 spread.suspendPaint();
 initTemplateSheet(templateSheet);
 initDataSheet(dataSheet);
 initRenderSheet(renderSheet);
 spread.resumePaint();
 });
 function ImageCellType() {
 this.typeName = "ImageCellType";
 }
 ImageCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
 ImageCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
 style.backgroundImage = value;
 style.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.center;
 GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, '', x, y, w, h, style, context]);
 }
 function initRenderSheet(renderSheet) {
 renderSheet.name("RenderSheet");
 renderSheet.setColumnCount(8);
 renderSheet.setRowCount(1);
 renderSheet.setRowHeight(0, 400);
 for (var i = 0; i < 8; i++) {
 renderSheet.setColumnWidth(i, 400);
 renderSheet.setFormula(0, i, 'RANGEBLOCKSPARKLINE(TemplateSheet!A2:F11, OBJECT(tblPlayers[#Headers], INDEX(tblPlayers[#Data],COLUMN(),SEQUENCE(COUNTA(tblPlayers[#Headers]),1))))');
 }
 }
 function initTemplateSheet(templateSheet) {
 templateSheet.fromJSON(templateJson);
 templateSheet.name("TemplateSheet");
 var imageCellType = new ImageCellType();
 templateSheet.getCell(2, 1).cellType(imageCellType);
 }
 function initDataSheet(dataSheet) {
 dataSheet.fromJSON(dataJson);
 }
</script>