<html>
<head>
<title>HighCharts with Angular 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.26?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
/**
* PLUNKER VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'highcharts/highcharts.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highcharts.src.js',
'highcharts/adapters/standalone-framework.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/adapters/standalone-framework.src.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@1.9.0-dev.20160409/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {HighchartsService} from './_services/index';
@NgModule({
imports: [
BrowserModule
],
providers: [HighchartsService],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import {
Component,
ElementRef,
AfterViewInit,
OnDestroy,
ChangeDetectorRef,
ViewChild
} from '@angular/core';
import {HighchartsService} from './_services/index';
const Highcharts = require('highcharts/highcharts.src');
import 'highcharts/adapters/standalone-framework.src';
@Component({
selector: 'my-app',
template: `
<button (click)="createChart()">Let's create a new chart !</button>
<button (click)="createCustomChart(myCustomOptions)">Let's create a custom chart !</button>
<button (click)="rmFirst()">Remove top chart</button>
<button (click)="rmLast()">Remove last chart</button>
<div #charts id="test"></div>
`
})
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild('charts') public chartEl: ElementRef;
chartsList;
const myCustomOptions = {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
};
constructor(private hcs: HighchartsService, private changeDetectionRef: ChangeDetectorRef) {
}
public ngAfterViewInit() {
}
public ngOnDestroy() {
}
rmFirst() {
this.hcs.removeFirst();
this.changeDetectionRef.detectChanges();
if (!!document.getElementById("test").firstChild) document.getElementById("test").firstChild.outerHTML = '';
console.log('rm first', this.hcs.getCharts());
}
rmLast() {
this.hcs.removeLast();
this.changeDetectionRef.detectChanges();
if (!!document.getElementById("test").lastChild) document.getElementById("test").lastChild.outerHTML = '';
console.log('rm last', this.hcs.getCharts());
}
createChart() {
this.hcs.createChart(this.chartEl.nativeElement);
}
createCustomChart(myOpts: Object) {
this.hcs.createChart(this.chartEl.nativeElement, myOpts);
}
}
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
import { Injectable } from '@angular/core';
const Highcharts = require('highcharts/highcharts.src');
import 'highcharts/adapters/standalone-framework.src';
@Injectable()
export class HighchartsService {
charts = [];
defaultOptions = {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
}
constructor() {
}
createChart(container, options?: Object) {
let opts = !!options ? options : this.defaultOptions;
let e = document.createElement("div");
container.appendChild(e);
if(!!opts.chart) {
opts.chart['renderTo'] = e;
}
else {
opts.chart = {
'renderTo': e
}
}
this.charts.push(new Highcharts.Chart(opts));
}
removeFirst() {
this.charts.shift();
}
removeLast() {
this.charts.pop();
}
getChartInstances(): number {
return this.charts.length;
}
getCharts() {
return this.charts;
}
}
export * from './highcharts.service';