Demos
Features
Sparklines
Custom Sparkline

Custom Sparkline

SpreadJS allows users to create their own sparkline templates by implementing their own custom business logic, such as a customized clock for different time zones.

JavaScript
Angular
Vue3
React
Description
app.jsx
app-func.jsx
app-class.jsx
index.html
styles.css
Copy to CodeMine

The SparklineEx class has two methods that help you customize your own sparkline:

  • createFunction: The function of SparklineEx. The sparkline formula will be defined by the function and it provides the data and settings for Sparkline.
  • paint: Renders the Sparkline with the data and settings from the sparkline formula.

After creating a customized sparkline type, you can use the addSparklineEx method to add your custom sparkline to SpreadJS. For example:

    function CustomSparkline(){
       GC.Spread.Sheets.Sparklines.SparklineEx.call(this);
    }
    CustomSparkline.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
    CustomSparkline.prototype.createFunction = function(){
       var func = new GC.Spread.CalcEngine.Functions.Function('CUSTOMSPARKLINE',1,255);
       func.evaluate = function(args){};
       func.acceptsReference = function(argIndex){};
       //...
       return func;
    }
    CustomSparkline.prototype.paint = function(context,value,x,y,width,height){
       //context - The canvas's 2d context.
       //value - The value evaluated by the custom function.
       //paint sparkline.
    };
    $(function(){
       var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
       spread.addSparklineEx(new CustomSparkline());
    });
The SparklineEx class has two methods that help you customize your own sparkline: createFunction: The function of SparklineEx. The sparkline formula will be defined by the function and it provides the data and settings for Sparkline. paint: Renders the Sparkline with the data and settings from the sparkline formula. After creating a customized sparkline type, you can use the addSparklineEx method to add your custom sparkline to SpreadJS. For example:
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; // import { App } from './app-class'; // 1. Functional Component sample ReactDOM.render(<AppFunc />, document.getElementById('app')); // 2. Class Component sample // ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; class Clock extends GC.Spread.Sheets.Sparklines.SparklineEx { constructor() { super(); } createFunction() { let func = new GC.Spread.CalcEngine.Functions.Function("CLOCK", 1, 1); func.evaluate = function (args) { return args[0]; }; return func; } _drawCircle(context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true); context.stroke(); } _drawCenter(context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true); context.fill(); } _drawHand(context, centerX, centerY, loc, radius) { let angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2; context.beginPath(); context.moveTo(centerX, centerY); context.lineTo(centerX + Math.cos(angle) * radius, centerY + Math.sin(angle) * radius); context.stroke(); } _drawHands(context, value, centerX, centerY, radius) { let date = value, hour = date.getHours(); hour = hour > 12 ? hour - 12 : hour; this._drawHand(context, centerX, centerY, hour * 5 + (date.getMinutes() / 60) * 5, radius / 2); this._drawHand(context, centerX, centerY, date.getMinutes(), radius * 3 / 4); context.strokeStyle = "red"; this._drawHand(context, centerX, centerY, date.getSeconds(), radius * 3 / 4); } _drawNumerals(context, centerX, centerY, radius) { let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], angle, numeralWidth; if (radius > 0) { numerals.forEach(function (numeral) { angle = Math.PI / 6 * (numeral - 3); numeralWidth = context.measureText(numeral).width; context.beginPath(); context.fillText(numeral, centerX + Math.cos(angle) * radius + numeralWidth / 2, centerY + Math.sin(angle) * radius + numeralWidth / 2); }); } } paint(context, value, x, y, width, height) { if (!(value instanceof Date)) { return; } let centerX = x + width / 2, centerY = y + height / 2, margin = 10, padding = 10, radius = Math.min(width, height) / 2 - margin; if (radius <= 0) { return; } context.save(); //draw circle this._drawCircle(context, centerX, centerY, radius); //draw center this._drawCenter(context, centerX, centerY, 3); //draw hands this._drawHands(context, value, centerX, centerY, radius); //draw numerals this._drawNumerals(context, centerX, centerY, radius - padding); context.restore(); } } export function AppFunc() { const initSpread = (spread) => { spread.suspendPaint(); spread.addSparklineEx(new Clock()); let sheet = spread.sheets[0]; let style = new GC.Spread.Sheets.Style(); style.hAlign = GC.Spread.Sheets.HorizontalAlign.center; style.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet.setDefaultStyle(style); sheet.getCell(0, 1).value("Universal Time").font("20px Arial"); sheet.setValue(1, 0, "Beijing"); sheet.setValue(1, 1, "London"); sheet.setValue(1, 2, "New York"); sheet.setFormula(2, 0, '=CLOCK(A4)'); sheet.setFormula(2, 1, '=CLOCK(B4)'); sheet.setFormula(2, 2, '=CLOCK(C4)'); sheet.getRange(3, -1, 1, -1).formatter("hh:mm:ss tt"); sheet.setRowHeight(0, 50); sheet.setRowHeight(2, 200); sheet.setColumnWidth(0, 200); sheet.setColumnWidth(1, 200); sheet.setColumnWidth(2, 200); function updateTime() { let now = new Date(); let utcNow = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(), now.getUTCMilliseconds()); sheet.setValue(3, 0, new Date(utcNow.setHours(utcNow.getHours() + 8)));//+8 sheet.setValue(3, 1, new Date(utcNow.setHours(utcNow.getHours() - 8)));//0 sheet.setValue(3, 2, new Date(utcNow.setHours(utcNow.getHours() - 5)));//-4 } setInterval(updateTime, 1000); updateTime(); spread.resumePaint(); } return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => initSpread(spread)}> <Worksheet> </Worksheet> </SpreadSheets> </div> </div> ); }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; const Component = React.Component; class Clock extends GC.Spread.Sheets.Sparklines.SparklineEx { constructor() { super(); } createFunction() { let func = new GC.Spread.CalcEngine.Functions.Function("CLOCK", 1, 1); func.evaluate = function (args) { return args[0]; }; return func; } _drawCircle(context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true); context.stroke(); } _drawCenter(context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true); context.fill(); } _drawHand(context, centerX, centerY, loc, radius) { let angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2; context.beginPath(); context.moveTo(centerX, centerY); context.lineTo(centerX + Math.cos(angle) * radius, centerY + Math.sin(angle) * radius); context.stroke(); } _drawHands(context, value, centerX, centerY, radius) { let date = value, hour = date.getHours(); hour = hour > 12 ? hour - 12 : hour; this._drawHand(context, centerX, centerY, hour * 5 + (date.getMinutes() / 60) * 5, radius / 2); this._drawHand(context, centerX, centerY, date.getMinutes(), radius * 3 / 4); context.strokeStyle = "red"; this._drawHand(context, centerX, centerY, date.getSeconds(), radius * 3 / 4); } _drawNumerals(context, centerX, centerY, radius) { let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], angle, numeralWidth; if (radius > 0) { numerals.forEach(function (numeral) { angle = Math.PI / 6 * (numeral - 3); numeralWidth = context.measureText(numeral).width; context.beginPath(); context.fillText(numeral, centerX + Math.cos(angle) * radius + numeralWidth / 2, centerY + Math.sin(angle) * radius + numeralWidth / 2); }); } } paint(context, value, x, y, width, height) { if (!(value instanceof Date)) { return; } let centerX = x + width / 2, centerY = y + height / 2, margin = 10, padding = 10, radius = Math.min(width, height) / 2 - margin; if (radius <= 0) { return; } context.save(); //draw circle this._drawCircle(context, centerX, centerY, radius); //draw center this._drawCenter(context, centerX, centerY, 3); //draw hands this._drawHands(context, value, centerX, centerY, radius); //draw numerals this._drawNumerals(context, centerX, centerY, radius - padding); context.restore(); } } export class App extends Component { constructor(props) { super(props); this.spread = null; } render() { return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet> </Worksheet> </SpreadSheets> </div> </div> ) } initSpread(spread) { spread.suspendPaint(); spread.addSparklineEx(new Clock()); let sheet = spread.sheets[0]; let style = new GC.Spread.Sheets.Style(); style.hAlign = GC.Spread.Sheets.HorizontalAlign.center; style.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet.setDefaultStyle(style); sheet.getCell(0, 1).value("Universal Time").font("20px Arial"); sheet.setValue(1, 0, "Beijing"); sheet.setValue(1, 1, "London"); sheet.setValue(1, 2, "New York"); sheet.setFormula(2, 0, '=CLOCK(A4)'); sheet.setFormula(2, 1, '=CLOCK(B4)'); sheet.setFormula(2, 2, '=CLOCK(C4)'); sheet.getRange(3, -1, 1, -1).formatter("hh:mm:ss tt"); sheet.setRowHeight(0, 50); sheet.setRowHeight(2, 200); sheet.setColumnWidth(0, 200); sheet.setColumnWidth(1, 200); sheet.setColumnWidth(2, 200); function updateTime() { let now = new Date(); let utcNow = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(), now.getUTCMilliseconds()); sheet.setValue(3, 0, new Date(utcNow.setHours(utcNow.getHours() + 8)));//+8 sheet.setValue(3, 1, new Date(utcNow.setHours(utcNow.getHours() - 8)));//0 sheet.setValue(3, 2, new Date(utcNow.setHours(utcNow.getHours() - 5)));//-4 } setInterval(updateTime, 1000); updateTime(); spread.resumePaint(); } }
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app" style="height: 100%;"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-spreadsheets { height: 100%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);