use Directive more from controller in High Chart

Question

use Directive more from controller in High Chart

132 Views Asked by Anuj At 03 April 2025 at 21:18

I have created custom directive to get high chart data . pen is here But there are

 $scope.chartData = {
            title: {
                     text: 'Sales Statics'
                    },
            xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },
            series: [{
                   data: [35, 21, 112.2, 10.1, 230.2, 174.0, 198.2, 139.4, 232, 23, 62, 234]
                    }]
                };

code in controller . I want to put all this thing in directive and put 1 json object (Category : data key value) sample like Fiddle

Original Q&A

There are 1 best solutions below

**Curiousdev** · Answer 1

angular.module('tesTModule', [])
  // Directive for generic chart, pass in chart options
  .directive('myChart', function() {
    var controller = ['$scope', function($scope) {

      $scope.chartData = {
        title: {
          text: 'Sales Statics'
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
          ]
        },
        series: [{
          data: [35, 21, 112.2, 10.1, 230.2, 174.0, 198.2, 139.4, 232, 23, 62, 234]
        }]
      }
    }]
    return {
      restrict: 'E',
      scope: {
        options: '='
      },
      controller: controller,
      link: function(scope, element) {
        Highcharts.chart(element[0], scope.chartData);
      }
    };
  })
  .controller('moglixController', function($scope) {
     //Moved controller code to directive's controller
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html ng-app="tesTModule">
    <meta charset="utf-8" />
    <title> Charts With custom directive </title>
<body ng-controller="moglixController">
     <my-Chart options="chartData" style="width:100%"></my-Chart>
    </body>
</html>

Please find this snippet hope it helps

use Directive more from controller in High Chart

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in IONIC-FRAMEWORK

Related Questions in ANGULAR-DIRECTIVE

Trending Questions

Popular # Hahtags

Popular Questions