AMCharts Integration

components.basic-chart.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function() {
    
    var chartDiv = $("#chartdiv");
   
    var chart = AmCharts.makeChart(chartDiv, {
    "type": "serial",
    "theme": "light",
    "marginRight": 70,
    "dataProvider": [{
      "country": "USA",
      "visits": 3025,
      "color": "#FF0F00"
    }, {
      "country": "China",
      "visits": 1882,
      "color": "#FF6600"
    }, {
      "country": "Japan",
      "visits": 1809,
      "color": "#FF9E01"
    }, {
      "country": "Germany",
      "visits": 1322,
      "color": "#FCD202"
    }, {
      "country": "UK",
      "visits": 1122,
      "color": "#F8FF01"
    }, {
      "country": "France",
      "visits": 1114,
      "color": "#B0DE09"
    }, {
      "country": "India",
      "visits": 984,
      "color": "#04D215"
    }, {
      "country": "Spain",
      "visits": 711,
      "color": "#0D8ECF"
    }, {
      "country": "Netherlands",
      "visits": 665,
      "color": "#0D52D1"
    }, {
      "country": "Russia",
      "visits": 580,
      "color": "#2A0CD0"
    }, {
      "country": "South Korea",
      "visits": 443,
      "color": "#8A0CCF"
    }, {
      "country": "Canada",
      "visits": 441,
      "color": "#CD0D74"
    }],
    "valueAxes": [{
      "axisAlpha": 0,
      "position": "left",
      "title": "Visitors from country"
    }],
    "startDuration": 1,
    "graphs": [{
      "balloonText": "<b>[[category]]: [[value]]</b>",
      "fillColorsField": "color",
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "visits"
    }],
    "chartCursor": {
      "categoryBalloonEnabled": false,
      "cursorAlpha": 0,
      "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
      "gridPosition": "start",
      "labelRotation": 45
    },
    "export": {
      "enabled": true
    }

  });
    
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('chart');
});

export default Router;

routes.chart.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.chart.hbs

{{basic-chart}}

templates.components.basic-chart.hbs

<div id="chartdiv"></div>		

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0",
    "amcharts": "https://www.amcharts.com/lib/3/amcharts.js",
    "am-serial": "https://www.amcharts.com/lib/3/serial.js",
    "am-light": "https://www.amcharts.com/lib/3/themes/light.js"
  },
  "addons": {}
}