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:
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
type = 0;
spread: GC.Spread.Sheets.Workbook;
displayDateAxis = true
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
getActualRange(range: any, maxRowCount: number, maxColCount: number) {
let row = range.row < 0 ? 0 : range.row;
let col = range.col < 0 ? 0 : range.col;
let rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
let colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new GC.Spread.Sheets.Range(row, col, rowCount, colCount);
}
displayDateAxisChange(e: any) {
this.displayDateAxis = e.target.checked;
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
let sels = sheet.getSelections();
let sparkline;
for (let n = 0; n < sels.length; n++) {
if (sels) {
let sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
let rowCount = sel.rowCount;
let colCount = sel.colCount;
for (let i = 0; i < rowCount; i++) {
for (let j = 0; j < colCount; j++) {
sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
if (sparkline != null) {
sparkline.displayDateAxis(this.displayDateAxis);
}
}
}
}
}
sheet.resumePaint();
}
sparklinetypeChange(e: any) {
this.type = parseInt(e.target.value);
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
let sels = sheet.getSelections();
let sparkline;
for (let n = 0; n < sels.length; n++) {
if (sels) {
let sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
let rowCount = sel.rowCount;
let colCount = sel.colCount;
for (let i = 0; i < rowCount; i++) {
for (let j = 0; j < colCount; j++) {
sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
if (sparkline != null) {
sparkline.sparklineType(this.type);
}
}
}
}
}
sheet.resumePaint();
}
ungroup() {
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
let sels = sheet.getSelections();
let sparkline;
for (let n = 0; n < sels.length; n++) {
if (sels) {
let sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
let rowCount = sel.rowCount;
let colCount = sel.colCount;
for (let i = 0; i < rowCount; i++) {
for (let j = 0; j < colCount; j++) {
sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
if (sparkline != null) {
sheet.ungroupSparkline(sparkline.group());
}
}
}
}
}
sheet.resumePaint();
}
group() {
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
let sels = sheet.getSelections();
let i = 0;
let sparklines = [];
for (let n = 0; n < sels.length; n++) {
if (sels) {
let sel = this.getActualRange(sels[n], sheet.getRowCount(), sheet.getColumnCount());
let rowCount = sel.rowCount;
let colCount = sel.colCount;
for (let i = 0; i < rowCount; i++) {
for (let j = 0; j < colCount; j++) {
let sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
if (sparkline != null) {
sparklines.push(sparkline);
}
}
}
sheet.groupSparkline(sparklines);
}
}
sheet.resumePaint();
}
_selectOption(value: number) {
this.type = value;
}
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
let self = this;
var spreadNS = GC.Spread.Sheets;
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.resumePaint();
function selectionChangedCallback() {
let sheet = spread.getActiveSheet();
let sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (sparkline) {
updateSetting(sparkline);
} else {
initSetting();
}
}
function updateSetting(sparkline: any) {
let type = sparkline.sparklineType(), displayDateAxis = sparkline.displayDateAxis();
self._selectOption(type);
self.displayDateAxis = !!displayDateAxis;
}
function initSetting() {
self._selectOption(0);
self.displayDateAxis = false;
}
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet [allowCellOverflow] = true>
</gc-worksheet>
</gc-spread-sheets>
<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 id='btnGroupSparkline' value='Group' type='button' (click) = "group($event)"/>
</div>
<div class="option-group">
<label>Un Group Sparklines</label>
</div>
<div class="option-group">
<input id='btnUnGroupSparkline' value = 'unGroup' type='button' (click) = "ungroup($event)" />
</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" value="{{type}}" (change)="sparklinetypeChange($event)">
<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="displayDateAxis" (change)="displayDateAxisChange($event)"/>
<label for="displayDateAxis">Display DateAxis</label>
</div>
</div>
</div>
.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;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.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',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
