import {Component} from 'angular2/core';
import {amChartDirective} from './chart';
import {DataService} from './data.service';
@Component({
selector: 'my-app',
template:`
<h1 class="title">AmCharts Integration into Angular2</h1>
<chart><div id="chartdiv" style="width:100%; height:600px;"></div></chart>
`,
directives: [amChartDirective],
providers: [DataService]
})
export class AppComponent {}
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
bootstrap(AppComponent,[HTTP_PROVIDERS]);
/*
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
*/
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
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
-->
/// <reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" />
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {DataService} from './data.service';
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
@Directive({
selector: 'chart',
providers: [DataService]
})
export class amChartDirective {
title: String;
chart_data:Array<object>;
constructor(el: ElementRef, renderer: Renderer,_dataService: DataService) {
this.chart_data =_dataService.getEntries().subscribe(
(data) => {
this.chart_data = data;
});
console.log('Does this work? '+this.chart_data);
this.title = _dataService.getTitle();
console.log('This works '+this.title);
// Transfer the http request to chartData to it can go into Amcharts
// I think this should be string?
var chartData = this.chart_data;
var chart;
if (AmCharts.isReady) {
createStockChart();
} else {
AmCharts.ready(function () {
createStockChart();
});
}
function createStockChart() {
chart = new AmCharts.AmStockChart();
chart.dataDateFormat = "M-D-YY";
chart.pathToImages = "http://www.strategic-options.com/trade/3_party/amcharts/images/";
var dataSet = new AmCharts.DataSet();
dataSet.dataProvider = chartData;
dataSet.fieldMappings = [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}];
dataSet.categoryField = "date";
chart.dataSets = [dataSet];
// PANELS ///////////////////////////////////////////
// first stock panel
var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = false;
stockPanel1.title = "Value";
stockPanel1.percentHeight = 70;
// graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = "value";
stockPanel1.addStockGraph(graph1);
// create stock legend
var stockLegend1 = new AmCharts.StockLegend();
stockLegend1.valueTextRegular = " ";
stockLegend1.markerType = "none";
stockPanel1.stockLegend = stockLegend1;
// second stock panel
var stockPanel2 = new AmCharts.StockPanel();
stockPanel2.title = "Volume";
stockPanel2.percentHeight = 30;
var graph2 = new AmCharts.StockGraph();
graph2.valueField = "volume";
graph2.type = "column";
graph2.fillAlphas = 1;
stockPanel2.addStockGraph(graph2);
// create stock legend
var stockLegend2 = new AmCharts.StockLegend();
stockLegend2.valueTextRegular = " ";
stockLegend2.markerType = "none";
stockPanel2.stockLegend = stockLegend2;
// set panels to the chart
chart.panels = [stockPanel1, stockPanel2];
// PERIOD SELECTOR ///////////////////////////////////
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.periods = [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
selected: true,
period: "MAX",
label: "MAX"
}];
periodSelector.selectFromStart = true;
chart.periodSelector = periodSelector;
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.usePrefixes = true;
chart.panelsSettings = panelsSettings;
//Cursor Settings
var cursorSettings = new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled = true;
cursorSettings.graphBulletSize = 1;
chart.chartCursorSettings = cursorSettings;
// EVENTS
var e0 = {date: new Date(2016,0,7), type: "arrowDown", backgroundColor: "#FF0707", graph: graph1, text: "Sell Short", description: "Sell Short equity here"};
dataSet.stockEvents = [e0];
chart.write("chartdiv");
}
function hideStockEvents() {
window.console.log('woop');
chart.hideStockEvents();
}
function showStockEvents() {
window.console.log('woop');
chart.showStockEvents();
}
}
}
import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core'
import 'rxjs/Rx'; // we need to import this now
import 'rxjs/add/operator/map';
@Injectable()
export class DataService {
http: Http;
constructor(http: Http) {
this.http = http;
}
getEntries() {
return this.http.get('./options.json').map(res => res.json());
}
getTitle() { return "This seems to work"; }
}
[{
"chart_data": [{
"date": "new Date(2015, 2, 31, 0, 0, 0, 0)",
"value": "372.10",
"volume": "2506100"
}, {
"date": "new Date(2015, 3, 1, 0, 0, 0, 0)",
"value": "370.26",
"volume": "2458100"
}, {
"date": "new Date(2015, 3, 2, 0, 0, 0, 0)",
"value": "372.25",
"volume": "1875300"
}, {
"date": "new Date(2015, 3, 6, 0, 0, 0, 0)",
"value": "377.04",
"volume": "3050700"
}]
}]
[{
"chart_data": [{
"date": "new Date(2015, 2, 31, 0, 0, 0, 0)",
"value": "372.10",
"volume": "2506100"
}, {
"date": "new Date(2015, 3, 1, 0, 0, 0, 0)",
"value": "370.26",
"volume": "2458100"
}, {
"date": "new Date(2015, 3, 2, 0, 0, 0, 0)",
"value": "372.25",
"volume": "1875300"
}, {
"date": "new Date(2015, 3, 6, 0, 0, 0, 0)",
"value": "377.04",
"volume": "3050700"
}]
}]