title: Angular 2 and AmCharts
body: <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>