CODEWITHSUNDEEP
javascriptangularjsamcharts
Fr4ncx
Fr4ncx

Reputation: 356

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>

Upvotes: 0

Views: 2512

Answers (2)

Shripal Soni
Shripal Soni

Reputation: 2448

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)

Upvotes: 1

Ndy
Ndy

Reputation: 326

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.

Upvotes: 0

Related Questions