1.19.0-3 • Published 3 years ago
@dvsl/angular-zoomcharts v1.19.0-3
The Application Shell
Set up the Development Enviroment
You need to set up your development environment before you can do anything.
Install Node.js® and npm if they are not already on your machine.
Install the Angular CLI globally.
npm install -g @angular/cli
Create new project
ng new my-zoomchartsApp
Serve the application
Go to project directory.
cd my-zoomchartsApp
Install and import the ZoomCharts component library
Install ZoomCharts component library via npm
npm install --save @dvsl/angular-zoomcharts
src/app/app.module.ts file
Import ZoomchartsModule into app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ZoomchartsModule, WindowRef } from '@dvsl/angular-zoomcharts';
@NgModule({
declarations: [
AppComponent
], imports: [
BrowserModule,
ZoomchartsModule.forRoot({})
],
providers: [WindowRef],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/app.component.ts file
Import ZoomchartsService into app.component.ts.
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ZoomchartsService } from '@dvsl/angular-zoomcharts';
@Component({
selector: 'app-root',
template: `
<div class='chart-container'>
<div class='chart'>
<app-zoomcharts-component [settings]='piechartSettings' [id]='"component-1"'></app-zoomcharts-component>
</div>
</div>`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private zcService: ZoomchartsService) {
// add license key
this.zcService.setLicenseKey({
license: "",
licenseKey: ""
});
}
// set data
piechartSettings: any = {
pieChart: {
assetsUrlBase: '../assets/',
area: { height: 350 },
data: {
preloaded: {
subvalues: [
{
id: 'foo', value: 100, subvalues: [
{ id: 'foo-1', value: 50, style: { expandable: false } },
{ id: 'foo-2', value: 50, style: { expandable: false } }
]
},
{ id: 'bar', value: 50, style: { expandable: false } },
{ id: 'baz', value: 30, style: { expandable: false } }
]
}
}
}
}
ngOnInit() {
this.zcService.getComponent('component-1').then(component => {
component.instance.chart.updateSettings({
height: 450
});
});
}
}
To display the ZoomchartsComponent, you must add it to the template.
<app-zoomcharts-component [settings]='piechartSettings' [id]='"component-1"'></app-zoomcharts-component>
.angular.json file
//Add { "glob": "**/*", "input": "../node_modules/@dvsl/angular-zoomcharts/assets", "output": "./assets/" }
"options": [
{
...
"assets": [
"assets",
"favicon.ico",
{ "glob": "**/*", "input": "./node_modules/@dvsl/angular-zoomcharts/assets", "output": "./assets/" }
],
...
}
],
Launch the server
ng serve --open