Fr4ncx February 2016

Angular JS Amcharts directive

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

angular.module("App").directive('myElem',
   function () {
       return {
           restrict: 'E',
           replace:true,

           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
                }]
            });                      
                };
                initChart();

         }//end watch           
       }
   }) ;

JSFiddle

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>

Answers


Ndy February 2016

In the return add something like this:

scope:{
    type:"=",
    source:"="
}

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.

HTML

 <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

Search




Leave an answer