Home Ask Login Register

Developers Planet

Your answer is one click away!

Fr4ncx February 2016

Angular JS Amcharts directive

I've founded a directive for displaying 1 single chart(Amcharts) ..

   function () {
       return {
           restrict: 'E',

           template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
           link: function (scope, element, attrs) {

                var chart = false;

                var initChart = function() {
                  if (chart) chart.destroy();
                  var config = scope.config || {};
                   chart = AmCharts.makeChart("chartdiv", {
                "type": "serial",
                "theme": "light",
                "marginLeft": 20,
                "pathToImages": "http://www.amcharts.com/lib/3/images/",
                "dataProvider": [],
                "valueAxes": [{
                    "axisAlpha": 0,
                    "inside": true,
                    "position": "left",
                    "ignoreAxisWidth": true

         }//end watch           
   }) ;


Now i want a directive that displays all of charts taking the data source and type. For example : <my-directive type="3dCylinder" source="data"></my-directive>


Ndy February 2016

In the return add something like this:


It should work with the html you have written. In the link part of your directive you can access this by writing scope.type and scope.source.

Shripal Soni February 2016

You need to accept input in directive by using isolated scope:

 scope: {
          type: '@',
          source: '=',
          chartId: '@'

and use this scope variables in your link function like scope.source, scope.type etc.


 <my-elem chart-id="chart-1" source="data" type="serial"></my-elem> 
<my-elem chart-id="chart-2" source="data1" type="serial"></my-elem> 

Check this working jsfiddle at http://jsfiddle.net/LbqjLvLp/6/ (Note: I have updated angular version to 1.5.0)

Post Status

Asked in February 2016
Viewed 3,261 times
Voted 5
Answered 2 times


Leave an answer

Quote of the day: live life