Chad Chad - 1 year ago 120
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 Source

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