You can use the groupSparkline and ungroupSparkline methods to group and ungroup the sparklines. For example:
You can change the type of the sparkline using the sparklineType method. For example:
Also you can get and set the data and dateAxisData methods. Use the data method to get and set the data object. Use the dataOrientation method to get and set the data orientation. Use the dateAxisData method to get and set the date axis data object. Use the dateAxisOrientation method to get and set the date axis orientation. Use the displayDateAxis method to get and set whether to display the date axis. For example:
There are many sparkline settings. You can use the setting method to get and set the sparkline settings. For example:
When several spraklines are grouped, these sparklines will share same settings. In the next step, you will see more details for the settings.
There is an event for sparklines. It occurs when the sparkline has changed. For example:
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;
var data = [1,-2,-1,6,4,-4,3,8];
var dateAxis = [new Date(2011, 0, 5),new Date(2011, 0, 1),new Date(2011, 1, 11),new Date(2011, 2, 1),
new Date(2011, 1, 1),new Date(2011, 1, 3),new Date(2011, 2, 6),new Date(2011, 1, 19)];
sheet.setValue(0, 0, "Series 1");
sheet.setValue(0, 1, "Series 2");
for(let i=0;i<8;i++)
{
sheet.setValue(i+1, 0,data[i]);
sheet.getCell(i+1, 1).value(dateAxis[i]).formatter("yyyy-mm-dd");
}
sheet.setColumnWidth(1,100);
sheet.setValue(10, 0, "*Data Range is A2-A9");
sheet.setValue(11, 0, "*Date axis range is B2-B9");
var dataRange = new spreadNS.Range(1, 0, 8, 1);
var dateAxisRange = new spreadNS.Range(1, 1, 8, 1);
sheet.getCell(13, 0).text("Sparkline with dateAxis:");
sheet.getCell(14, 0).text("(1) Line");
sheet.getCell(14, 3).text("(2)Column");
sheet.getCell(14, 6).text("(3)Winloss");
//line
sheet.addSpan(15, 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(15, 0, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.line
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
//column
sheet.addSpan(15, 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(15, 3, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.column
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
//winloss
sheet.addSpan(15, 6, 4, 3);
setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.displayXAxis = true;
setting.options.showNegative = true;
sheet.setSparkline(15, 6, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.winloss
, setting
, dateAxisRange
, 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/@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="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">
<div class="option-group">
<label><b>Group and UnGroup SparkLines:</b></label>
</div>
<hr>
<div class="option-group">
<label>You can select multiple sparklines and group (or ungroup them).</label>
</div>
<div class="option-group">
<label>Group Sparklines</label>
</div>
<div class="option-group">
<input type="button" value="Group" id="btnGroupSparkline">
</div>
<div class="option-group">
<label>Un Group Sparklines</label>
</div>
<div class="option-group">
<input id='btnUnGroupSparkline' type='button' value='UnGroup' />
</div>
<br>
<div class="option-group">
<label>*The sparklines in a group have the same settings.
If you change the settings on one sparkline, the change is mirrored in all sparklines in that group.</label>
</div>
<div class="option-group">
<label><b>Change the Sparkline settings:</b></label>
</div>
<hr>
<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">Display DateAxis</label>
</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:#F4F8EB;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
