Chad Chad - 4 months ago 20
Javascript Question

Angular 2 and AmCharts

Does anybody have any idea on how to implement Amcharts into Angular2 (BETA)?

I was trying to follow the path/pattern of this question however, I was pretty successful with charts.js, but unfortunately, I can't use charts.js,for my charting program. Since it seems like everything in Angular2 Beta is uncharted territory, I don't have a clue where to start? I mimicked the charts.js example above with no luck, no error.

/// <reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" />


There is a DefinitelyTyped library for amcharts (not one for plot.ly yet).

UPDATE:
Here is the directive:

/// <reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" />



import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
selector: '[chart]',
})

export class amChartDirective {
var chartData = [{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}];
var chart;
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();
}
}
}


Then here is the template.html, from the app.component.ts

<chart>helllo from AmCharts part 2<divid="chartdiv" style="width:100%; height:600px;"></div></chart>


The javascript / amcharts code above works in on my php site. W

When I run the code I don't get any errors.

I suspect it's one of two things?

Something is wrong with my Selector or the html get rendered but the JavaScript doesn't "write the chart".

chart.write("chartdiv");


Finally, it's not throwing any errors in the console, which is really weird because this Angular2 Beta throws errors all the time.

Answer

Thanks to the help of customer support at AmCharts.

A working plunker can be found here.

The key issue was this line of code: Instead of doing this:

AmCharts.ready(function () {
    createStockChart();
});

Instead do this:

if (AmCharts.isReady) {
    createStockChart();

} else {
    AmCharts.ready(function () {
        createStockChart();
    });
}

UPDATE:

Here is the extended answer using Angular Service to get the data for the chart. Angular2 HTTP Providers, get a string from JSON for Amcharts