Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
e2e
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

JSCharting: Any Chart. Anywhere.

JSCharting is a JavaScript chart library for visualizing your data, providing resolution independent results across all devices and platorms. Every JSCharting license includes the full suite of 150+ advanced chart types, interactive stock charts and JSMapping at no additional charge.

Official JSCharting Samples for Angular

This set of samples demonstrate how to use JSCharting with the Angular framework. Samples are located in the src/app/samples folder.

How to use

Install the necessary packages including JSCharting.

npm install

Run the webpack dev server: http://localhost:4200/

npm run start

Or build the dashboard manually.

npm run build

Or.

npm run build-prod

How it works

  1. In your component import Chart and create an instance.
import {Chart} from 'jscharting';

this.chart = new Chart({});

  1. In your app module, import the JSChartingModule module and add it to the imports:
import {JSChartingModule} from './jscharting/jscharting.module';

@NgModule({
	imports: [
	JSChartingModule
	]
})
export class AppModule {}

  1. Inject the JSChartingService into your app component, create a '
    ' element with reference chartTargetElement: ElementRef.
import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';

import {Chart} from './jscharting/jscharting';
import {JSChartingService} from './shared/jscharting.service';

@Component({
	template: '<div><div #chartTargetElement class="chart-container"></div></div>'
})
export class AppComponent implements AfterViewInit, OnDestroy {
	@ViewChild('chartTargetElement') chartTargetElement: ElementRef;

	private chart: Chart;

	constructor(private chartService: JSChartingService) {
	}

	ngAfterViewInit(): void {
		this.chart = this.chartService.chart({
			targetElement: this.chartTargetElement.nativeElement
		});
	}

	ngOnDestroy(): void {
		if (this.chart) {
			this.chart.destroy();
		}
	}

Make sure you destroy chart in ngOnDestroy method.


  1. Rather than using JSChartingService you can instead use the appJSCharting directive:
import {Component, OnInit} from '@angular/core';

import {JSCChartConfig} from './jscharting/jscharting';

@Component({
	template: '<div><div appJSCharting [options]="chartOptions" class="chart-container"></div></div>'
})
export class AppComponent implements OnInit {
	public chartOptions = {
		...
	};

	ngOnInit(): void {
		// You can update config.
		this.chartOptions = {};
	}
}

It is easer to use appJSCharting directive than service or create chart directly.


Please see full samples in the src/app/samples folder.

About

Official JSCharting Samples for Angular

Topics

Resources

Releases

No releases published

Packages

No packages published