Custom Sparklines

This sample shows how you can use the provided APIs to customize the sparklines, including setting the sparkline group, changing the sparkline type, setting the sparkline data, setting the date axis data, and so on.

<p>You can use the <strong>groupSparkline</strong> and <strong>ungroupSparkline</strong> methods to group and ungroup the sparklines. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); <span class="hljs-keyword">var</span> es = sheet.getSparkline(<span class="hljs-number">11</span>, <span class="hljs-number">0</span>); <span class="hljs-keyword">var</span> esg = sheet.groupSparkline([es]); esg.sparklineType = GC.Spread.Sheets.Sparklines.SparklineType.column; sheet.ungroupSparkline(esg); </code></pre> <p>You can change the type of the sparkline using the <strong>sparklineType</strong> method. For example:</p> <pre><code class="hljs">var sparkline = sheet.get<span class="hljs-constructor">Sparkline(11, 0)</span>; sparkline.sparkline<span class="hljs-constructor">Type(GC.Spread.Sheets.Sparklines.SparklineType.<span class="hljs-params">column</span>)</span>; </code></pre> <p>Also you can get and set the data and dataAxisData methods. Use the <strong>data</strong> method to get and set the data object. Use the <strong>dataOrientation</strong> method to get and set the data orientation. Use the <strong>dateAxisData</strong> method to get and set the date axis data object. Use the <strong>dateAxisOrientation</strong> method to get and set the date axis orientation. Use the <strong>displayDateAxis</strong> method to get and set whether to display the date axis. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> sparkline = sheet.getSparkline(<span class="hljs-number">11</span>, <span class="hljs-number">0</span>); sparkline.data(<span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">8</span>, <span class="hljs-number">1</span>)); sparkline.dataOrientation(GC.Spread.Sheets.Sparklines.DataOrientation.vertical); sparkline.dateAxisData(<span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">1</span>)); sparkline.dateAxisOrientation(GC.Spread.Sheets.Sparklines.DataOrientation.vertical); sparkline.displayDateAxis(<span class="hljs-literal">true</span>); </code></pre> <p>There are many sparkline settings. You can use the <strong>setting</strong> method to get and set the sparkline settings. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> sparkline = sheet.getSparkline(<span class="hljs-number">11</span>, <span class="hljs-number">0</span>); <span class="hljs-keyword">var</span> setting = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Sparklines.SparklineSetting(); setting.showHigh(<span class="hljs-literal">true</span>); sparkline.setting(setting); </code></pre> <p>When several spraklines are grouped, these sparklines will share same settings. In the next step, you will see more details for the settings.</p> <p>There is an event for sparklines. It occurs when the sparkline has changed. For example:</p> <pre><code class="hljs js language-js"> sheet.bind(GC.Spread.Sheets.Events.SparklineChanged, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">//event handler </span> }); </code></pre>
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.options.allowCellOverflow = true; sheet.setValue(0, 0, "Data Range is A2-A9"); sheet.setValue(1, 0, 1); sheet.setValue(2, 0, -2); sheet.setValue(3, 0, -1); sheet.setValue(4, 0, 6); sheet.setValue(5, 0, 4); sheet.setValue(6, 0, -4); sheet.setValue(7, 0, 3); sheet.setValue(8, 0, 8); sheet.setValue(0, 1, "Data Range is A2-A9"); sheet.setValue(1, 1, 1); sheet.setValue(2, 1, 3); sheet.setValue(3, 1, -1); sheet.setValue(4, 1, 6); sheet.setValue(5, 1, -4); sheet.setValue(6, 1, 4); sheet.setValue(7, 1, -2); sheet.setValue(8, 1, 8); sheet.setValue(0, 3, "Date axis range is C2-C9"); sheet.setValue(1, 3, new Date(2011, 0, 5)); sheet.setValue(2, 3, new Date(2011, 0, 1)); sheet.setValue(3, 3, new Date(2011, 1, 11)); sheet.setValue(4, 3, new Date(2011, 2, 1)); sheet.setValue(5, 3, new Date(2011, 1, 1)); sheet.setValue(6, 3, new Date(2011, 1, 3)); sheet.setValue(7, 3, new Date(2011, 2, 6)); sheet.setValue(8, 3, new Date(2011, 1, 19)); var data = new spreadNS.Range(1, 0, 8, 1); var dateAxis = new spreadNS.Range(1, 3, 8, 1); sheet.getCell(9, 0).text("Sparkline with dateAxis:"); sheet.getCell(10, 0).text("(1) Line"); sheet.getCell(10, 3).text("(2)Column"); sheet.getCell(10, 6).text("(3)Winloss"); //line sheet.addSpan(11, 0, 4, 3); var setting = new spreadNS.Sparklines.SparklineSetting(); setting.options.showMarkers = true; setting.options.displayXAxis = true; setting.options.showFirst = true; setting.options.showLast = true; setting.options.showLow = true; setting.options.showHigh = true; setting.options.showNegative = true; sheet.setSparkline(11, 0, data , spreadNS.Sparklines.DataOrientation.vertical , spreadNS.Sparklines.SparklineType.line , setting , dateAxis , spreadNS.Sparklines.DataOrientation.vertical ); //column sheet.addSpan(11, 3, 4, 3); setting = new spreadNS.Sparklines.SparklineSetting(); setting.options.displayXAxis = true; setting.options.showFirst = true; setting.options.showLast = true; setting.options.showLow = true; setting.options.showHigh = true; setting.options.showNegative = true; sheet.setSparkline(11, 3, data , spreadNS.Sparklines.DataOrientation.vertical , spreadNS.Sparklines.SparklineType.column , setting , dateAxis , spreadNS.Sparklines.DataOrientation.vertical ); //winloss sheet.addSpan(11, 6, 4, 3); setting = new spreadNS.Sparklines.SparklineSetting(); setting.options.displayXAxis = true; setting.options.showNegative = true; sheet.setSparkline(11, 6, data , spreadNS.Sparklines.DataOrientation.vertical , spreadNS.Sparklines.SparklineType.winloss , setting , dateAxis , spreadNS.Sparklines.DataOrientation.vertical ); sheet.bind(spreadNS.Events.SelectionChanged, selectionChangedCallback); sheet.resumePaint(); function selectionChangedCallback() { var sheet = spread.getActiveSheet(); var sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (sparkline) { updateSetting(sparkline); } else { initSetting(); } } function updateSetting(sparkline) { var type = sparkline.sparklineType(), displayDateAxis = sparkline.displayDateAxis(); var sparklinetype = _getElementById("sparklinetype"); _selectOption(sparklinetype, type + ""); _getElementById("displayDateAxis").setAttribute("checked", !!displayDateAxis); } function initSetting() { var sparklinetype = _getElementById("sparklinetype"); _selectOption(sparklinetype, '0'); _getElementById("displayDateAxis").setAttribute("checked", false); } function getActualRange(range, maxRowCount, maxColCount) { var row = range.row < 0 ? 0 : range.row; var col = range.col < 0 ? 0 : range.col; var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount; var colCount = range.colCount < 0 ? maxColCount : range.colCount; return new spreadNS.Range(row, col, rowCount, colCount); } _getElementById("btnGroupSparkline").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var i = 0; var sparklines = []; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[n], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { var sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sparklines.push(sparkline); } } } sheet.groupSparkline(sparklines); } } sheet.resumePaint(); }); _getElementById("btnUnGroupSparkline").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var sparkline; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sheet.ungroupSparkline(sparkline.group()); } } } } } sheet.resumePaint(); }); _getElementById("sparklinetype").addEventListener('change',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var sparkline; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sparkline.sparklineType(parseInt(this.value)); } } } } } sheet.resumePaint(); }); _getElementById("displayDateAxis").addEventListener('change',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var sparkline; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sparkline.displayDateAxis(this.checked); } } } } } sheet.resumePaint(); }); }; function _getElementById(id){ return document.getElementById(id); } function _selectOption(select, value) { for (var i = 0; i < select.length; i++) { var op = select.options[i]; if (op.value === value) { op.selected = true; } else { op.selected = false; } } }
<!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$/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 class="options-container"> <p style="font-size:20px;padding:4px 0px">Select a sparkline in the spreadsheet to change its type</p> <p>You can also select multiple sparklines using Ctrl+Click/Shift+Click and click the “Group” button. You can then change the group sparkline type by selecting one of those sparklines in the group and selecting another option from the “Type” dropdown</p> <div class="option-group"> <label for="sparklinetype">Type:</label> <select id="sparklinetype"> <option value="0">line</option> <option value="1">column</option> <option value="2">winloss</option> </select> </div> <div class="option-group"> <input type="checkbox" id="displayDateAxis" checked /> <label for="displayDateAxis">displayDateAxis</label> </div> <div class="option-group"> <input id='btnGroupSparkline' type='button' value='Group' /> <input id='btnUnGroupSparkline' type='button' value='UnGroup' /> </div> </div> </div> </body> </html>
.sample { position: relative; height: 100%; overflow: auto; } .sample::after { display: block; content: ""; clear: both; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .option-group { margin-bottom: 12px; } input, select { padding: 4px 6px; box-sizing: border-box; } p{ padding:2px 10px; background-color:lavender; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }