Use amCharts.js with ember-cli


#1

Hi,

I am trying to use amCharts.js with ember-cli. But I do not know how to properly import.

  1. My question is similar to this link, I tried several approaches, but still do not know how to solve. https://github.com/ember-cli/ember-cli/issues/770#issuecomment-43845313

  2. Code

    import Ember from “ember”;

    export default Ember.Component.extend({ didInsertElement: function(){ var chart = AmCharts.makeChart(“chartdiv”, { … }

Error: components/line-chart.js: line 17, col 17, ‘AmCharts’ is not defined.

What is the best practice to use those libraries? Anyone help me please?

Thanks!!


#2

I have not yet created a component but I think you must do something like this:

https://github.com/broerse/ember-cli-amcharts/commit/1f8ec9ee19e1b7983f496fb5fd4bfa9fd19c6239


#4

I tried it this really works.

Just need according to the chart type, import pie.js, serial.js … etc.

example => app.import('bower_components/amcharts/dist/amcharts/serial.js');

Thank you for your help !!


#5

Super! Can you show me a amChart component example. Maybe a PR on my ember-cli-amcharts example.


#6

Continue these modifiers. ( https://github.com/broerse/ember-cli-amcharts/commit/1f8ec9ee19e1b7983f496fb5fd4bfa9fd19c6239 )

Step1. According to the chart type, import pie.js, serial.js … etc.

[Brocfile.js]
+ app.import('vendor/amcharts/serial.js');

Step2. Create Component : {{am-chart}}

+ [components/am-chart.js]
import Ember from "ember";

export default Ember.Component.extend({

  didInsertElement: function(){
    var chart = AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "theme": "none",
      "dataProvider": [{
          "country": "USA",
          "visits": 2025
      }, {
          "country": "China",
          "visits": 1882
      }, {
          "country": "Japan",
          "visits": 1809
      }],
      "valueAxes": [{
          "gridColor":"#FFFFFF",
      "gridAlpha": 0.2,
      "dashLength": 0
      }],
      "gridAboveGraphs": true,
      "startDuration": 1,
      "graphs": [{
          "balloonText": "[[category]]: <b>[[value]]</b>",
          "fillAlphas": 0.8,
          "lineAlpha": 0.2,
          "type": "column",
          "valueField": "visits"    
      }],
      "chartCursor": {
          "categoryBalloonEnabled": false,
          "cursorAlpha": 0,
          "zoomable": false
      },
      "categoryField": "country",
      "categoryAxis": {
          "gridPosition": "start",
          "gridAlpha": 0,
           "tickPosition":"start",
           "tickLength":20
      }
    });

    console.log(chart);
  }

});

+ [templates/components/am-chart.hbs] 
<div id="chartdiv" style="width:500px; height:250px;">CHART</div>

#7

Thanks! I will try it as soon as possible.


#8

It works!