Angular 2 and AmCharts
<p>Does anybody have any idea on how to implement Amcharts into Angular2 (BETA)? </p>

<p>I was trying to follow the path/pattern of this <a href="https://stackoverflow.com/questions/34653045/third-party-js-in-angular2-typescript">question</a> 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.</p>

<pre><code>/// &lt;reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" /&gt;
</code></pre>

<p>There is a DefinitelyTyped library for amcharts (not one for plot.ly yet).  </p>

<p>UPDATE:
Here is the directive:</p>

<pre><code>/// &lt;reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" /&gt;



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();
          }
}
}
</code></pre>

<p>Then here is the template.html, from the app.component.ts</p>

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

<p>The javascript / amcharts code above works in on <a href="http://www.strategic-options.com/trade/stock/amazoncom-inc" rel="nofollow noreferrer">my php site</a>. W</p>

<p>When I run the code I don't get any errors. </p>

<p>I suspect it's one of two things?</p>

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

<pre><code>chart.write("chartdiv");
</code></pre>

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