0

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>

||||||
1

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)

||||||
  • how i can insert the generate html into directive without "chart-id" ? – Fr4ncx Feb 9 '16 at 8:36
0

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.

||||||
  • then i have to insert N if for N type of charts? if(scope.type == "3dCyling"){} – Fr4ncx Feb 8 '16 at 9:08
  • if you want more than one chart, you should put your directive in something like a ng-repeat – Ndy Feb 8 '16 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.