Skip to content

Commit aa87215

Browse files
harivenkatesheharivenkateshe
authored
Merge pull request #1 from vinoth-Kumar-S/master
Adding the Angular Spreadsheet Chart Sample
2 parents 94cb9b3 + 8aa610d commit aa87215

21 files changed

+567
-1
lines changed

‎README.md‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
1-
# how-to-insert-charts-in-an-angular-spreadsheet
1+
# How to Insert Charts in the Angular Spreadsheet Component
2+
23
A quick-start project that helps you insert a chart in the Syncfusion Angular Spreadsheet. In this project, a chart has been inserted in a specific cell using both the chart property and the "insertChart" method. To enable or disable this feature, use the "allowChart" property in the Spreadsheet component.
4+
5+
Refer to the following data visualization documentation for the Syncfusion Angular Spreadsheet component:
6+
https://ej2.syncfusion.com/angular/documentation/spreadsheet/illustrations#chart
7+
8+
Check out online data visualization examples for the Syncfusion Angular Spreadsheet component:
9+
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/spreadsheet/chart
10+
11+
Watch the video to get started with the Angular Spreadsheet component:
12+
https://www.youtube.com/watch?v=2Ozwe37X-7Q
13+
14+
Watch the video to check data binding in the Angular Spreadsheet component:
15+
https://www.youtube.com/watch?v=jCbBJdUil64
16+
17+
## Project prerequisites
18+
19+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
20+
21+
### How to run this application?
22+
23+
To run this application, you need to clone the `how-to-insert-charts-in-an-angular-spreadsheet` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.

‎angular.json‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"myangularproject": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/myangularproject",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "tsconfig.app.json",
21+
"assets": [
22+
"src/favicon.ico",
23+
"src/assets"
24+
],
25+
"styles": [
26+
"src/styles.css"
27+
],
28+
"scripts": []
29+
},
30+
"configurations": {
31+
"production": {
32+
"budgets": [
33+
{
34+
"type": "initial",
35+
"maximumWarning": "500kb",
36+
"maximumError": "1mb"
37+
},
38+
{
39+
"type": "anyComponentStyle",
40+
"maximumWarning": "2kb",
41+
"maximumError": "4kb"
42+
}
43+
],
44+
"fileReplacements": [
45+
{
46+
"replace": "src/environments/environment.ts",
47+
"with": "src/environments/environment.prod.ts"
48+
}
49+
],
50+
"outputHashing": "all"
51+
},
52+
"development": {
53+
"buildOptimizer": false,
54+
"optimization": false,
55+
"vendorChunk": true,
56+
"extractLicenses": false,
57+
"sourceMap": true,
58+
"namedChunks": true
59+
}
60+
},
61+
"defaultConfiguration": "production"
62+
},
63+
"serve": {
64+
"builder": "@angular-devkit/build-angular:dev-server",
65+
"configurations": {
66+
"production": {
67+
"browserTarget": "myangularproject:build:production"
68+
},
69+
"development": {
70+
"browserTarget": "myangularproject:build:development"
71+
}
72+
},
73+
"defaultConfiguration": "development"
74+
},
75+
"extract-i18n": {
76+
"builder": "@angular-devkit/build-angular:extract-i18n",
77+
"options": {
78+
"browserTarget": "myangularproject:build"
79+
}
80+
},
81+
"test": {
82+
"builder": "@angular-devkit/build-angular:karma",
83+
"options": {
84+
"main": "src/test.ts",
85+
"polyfills": "src/polyfills.ts",
86+
"tsConfig": "tsconfig.spec.json",
87+
"karmaConfig": "karma.conf.js",
88+
"assets": [
89+
"src/favicon.ico",
90+
"src/assets"
91+
],
92+
"styles": [
93+
"src/styles.css"
94+
],
95+
"scripts": []
96+
}
97+
}
98+
}
99+
}
100+
}
101+
}

‎karma.conf.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
jasmine: {
17+
// you can add configuration options for Jasmine here
18+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19+
// for example, you can disable the random execution with `random: false`
20+
// or set a specific seed with `seed: 4321`
21+
},
22+
clearContext: false // leave Jasmine Spec Runner output visible in browser
23+
},
24+
jasmineHtmlReporter: {
25+
suppressAll: true // removes the duplicated traces
26+
},
27+
coverageReporter: {
28+
dir: require('path').join(__dirname, './coverage/myangularproject'),
29+
subdir: '.',
30+
reporters: [
31+
{ type: 'html' },
32+
{ type: 'text-summary' }
33+
]
34+
},
35+
reporters: ['progress', 'kjhtml'],
36+
port: 9876,
37+
colors: true,
38+
logLevel: config.LOG_INFO,
39+
autoWatch: true,
40+
browsers: ['Chrome'],
41+
singleRun: false,
42+
restartOnFileChange: true
43+
});
44+
};

‎package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "myangularproject",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^14.2.0",
14+
"@angular/common": "^14.2.0",
15+
"@angular/compiler": "^14.2.0",
16+
"@angular/core": "^14.2.0",
17+
"@angular/forms": "^14.2.0",
18+
"@angular/platform-browser": "^14.2.0",
19+
"@angular/platform-browser-dynamic": "^14.2.0",
20+
"@angular/router": "^14.2.0",
21+
"@syncfusion/ej2-angular-spreadsheet": "^20.3.61",
22+
"rxjs": "~7.5.0",
23+
"tslib": "^2.3.0",
24+
"zone.js": "~0.11.4"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "^14.2.7",
28+
"@angular/cli": "~14.2.7",
29+
"@angular/compiler-cli": "^14.2.0",
30+
"@types/jasmine": "~4.0.0",
31+
"jasmine-core": "~4.3.0",
32+
"karma": "~6.4.0",
33+
"karma-chrome-launcher": "~3.1.0",
34+
"karma-coverage": "~2.2.0",
35+
"karma-jasmine": "~5.1.0",
36+
"karma-jasmine-html-reporter": "~2.0.0",
37+
"typescript": "~4.7.2"
38+
}
39+
}

‎src/app/app.component.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* You can add styles to this file, and also import other style files */

‎src/app/app.component.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="wrapper">
2+
<button class="e-btn" style="margin: 5px;" (click)="btnClick()">Delete Chart</button>
3+
<ejs-spreadsheet #spreadsheet
4+
(created)="onCreated()"
5+
[height]="500">
6+
<e-sheets>
7+
<e-sheet>
8+
<e-rows>
9+
<e-row>
10+
<e-cells>
11+
<e-cell [index]="6" [chart]="chart"></e-cell>
12+
</e-cells>
13+
</e-row>
14+
</e-rows>
15+
<e-ranges>
16+
<e-range [dataSource]="data"></e-range>
17+
</e-ranges>
18+
<e-columns>
19+
<e-column [width]=80></e-column>
20+
<e-column [width]=75></e-column>
21+
<e-column [width]=75></e-column>
22+
<e-column [width]=75></e-column>
23+
<e-column [width]=75></e-column>
24+
</e-columns>
25+
</e-sheet>
26+
</e-sheets>
27+
</ejs-spreadsheet>
28+
</div>

‎src/app/app.component.spec.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(async () => {
6+
await TestBed.configureTestingModule({
7+
declarations: [
8+
AppComponent
9+
],
10+
}).compileComponents();
11+
});
12+
13+
it('should create the app', () => {
14+
const fixture = TestBed.createComponent(AppComponent);
15+
const app = fixture.componentInstance;
16+
expect(app).toBeTruthy();
17+
});
18+
19+
it(`should have as title 'myangularproject'`, () => {
20+
const fixture = TestBed.createComponent(AppComponent);
21+
const app = fixture.componentInstance;
22+
expect(app.title).toEqual('myangularproject');
23+
});
24+
25+
it('should render title', () => {
26+
const fixture = TestBed.createComponent(AppComponent);
27+
fixture.detectChanges();
28+
const compiled = fixture.nativeElement as HTMLElement;
29+
expect(compiled.querySelector('.content span')?.textContent).toContain('myangularproject app is running!');
30+
});
31+
});

‎src/app/app.component.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { SpreadsheetComponent, getFormatFromType, ChartModel, getCell, getRangeIndexes, SheetModel } from '@syncfusion/ej2-angular-spreadsheet';
3+
import {GDPData} from './data';
4+
@Component({
5+
selector: 'app-root',
6+
templateUrl: './app.component.html',
7+
styleUrls: ['./app.component.css']
8+
})
9+
export class AppComponent {
10+
title = 'myangularproject';
11+
12+
@ViewChild("spreadsheet")
13+
public ssObj: SpreadsheetComponent|undefined;
14+
15+
public data:object = GDPData();
16+
17+
public chart: ChartModel[] = [{ type:'Bar', theme:'Material', isSeriesInRows:true, range:'A2:E8'}]
18+
19+
public btnClick(){
20+
let rangeIndex = getRangeIndexes("G1")
21+
let cell = getCell(rangeIndex[0], rangeIndex[1], (this.ssObj?.getActiveSheet() as SheetModel))
22+
if(cell.chart){
23+
this.ssObj?.deleteChart(cell.chart[0].id)
24+
}
25+
}
26+
27+
public onCreated(){
28+
this.ssObj?.cellFormat(
29+
{ backgroundColor: '#e56590',
30+
color: '#fff',
31+
fontWeight: 'bold',
32+
textAlign: 'center' },
33+
'A1:E1');
34+
this.ssObj?.numberFormat(getFormatFromType('Currency'), 'B2:E8');
35+
// this.ssObj?.insertChart(this.chart);
36+
}
37+
}

‎src/app/app.module.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
4+
import { AppComponent } from './app.component';
5+
6+
@NgModule({
7+
declarations: [
8+
AppComponent
9+
],
10+
imports: [
11+
BrowserModule,
12+
SpreadsheetAllModule
13+
],
14+
providers: [],
15+
bootstrap: [AppComponent]
16+
})
17+
export class AppModule { }

‎src/app/data.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
export function GDPData(): object[] {
2+
return [
3+
{
4+
"Country": "USA",
5+
"Year 2017": "18.00",
6+
"Year 2018": "20.40",
7+
"Year 2019": "21.42",
8+
"Year 2020": "19.48"
9+
},
10+
{
11+
"Country": "China",
12+
"Year 2017": "11.00",
13+
"Year 2018": "14.00",
14+
"Year 2019": "14.32",
15+
"Year 2020": "12.23"
16+
},
17+
{
18+
"Country": "Japan",
19+
"Year 2017": "4.4",
20+
"Year 2018": "5.10",
21+
"Year 2019": "5.08",
22+
"Year 2020": "4.87"
23+
},
24+
{
25+
"Country": "Germany",
26+
"Year 2017": "3.3",
27+
"Year 2018": "4.20",
28+
"Year 2019": "3.84",
29+
"Year 2020": "3.69"
30+
},
31+
{
32+
"Country": "India",
33+
"Year 2017": "2.00",
34+
"Year 2018": "2.85",
35+
"Year 2019": "2.87",
36+
"Year 2020": "2.65"
37+
},
38+
{
39+
"Country": "UK",
40+
"Year 2017": "2.90",
41+
"Year 2018": "2.94",
42+
"Year 2019": "2.82",
43+
"Year 2020": "2.63"
44+
},
45+
{
46+
"Country": "France",
47+
"Year 2017": "2.40",
48+
"Year 2018": "2.93",
49+
"Year 2019": "2.71",
50+
"Year 2020": "2.58"
51+
}];
52+
}
53+

0 commit comments

Comments
 (0)