Cooper
1
Hi,
I am trying to use amCharts.js with ember-cli. But I do not know how to properly import.
-
My question is similar to this link, I tried several approaches, but still do not know how to solve.
Trying to import a JS lib - can't reference from a module · Issue #770 · ember-cli/ember-cli · GitHub
-
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!!
broerse
2
Cooper
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 !!
Super! Can you show me a amChart component example. Maybe a PR on my ember-cli-amcharts example.
Cooper
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>
Thanks! I will try it as soon as possible.