Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script>
  if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports) {
    module.exports = 'highcharts-ng';
  }

  (function() {
    'use strict';
    /*global angular: false, Highcharts: false */


    angular.module('highcharts-ng', [])
      .provider('highchartsNG', highchartsNGProvider)
      .directive('highchart', ['highchartsNG', '$timeout', highchart]);

    function highchartsNGProvider() {
      var modules = [];
      var basePath = false;
      var lazyLoad = false;
      return {
        HIGHCHART: 'highcharts.js',
        HIGHSTOCK: 'stock/highstock.js',
        basePath: function(p) {
          basePath = p;
        },
        lazyLoad: function(list) {
          if (list === undefined) {
            modules = [this.HIGHCHART];
          } else {
            modules = list;
          }
          lazyLoad = true;
        },
        $get: ['$window', '$rootScope', function($window, $rootScope) {
          if (!basePath) {
            basePath = (window.location.protocol === 'https:' ? 'https' : 'http') + '://code.highcharts.com/';
          }
          return highchartsNG($window, $rootScope, lazyLoad, basePath, modules);
        }]
      };
    }

    function highchartsNG($window, $rootScope, lazyload, basePath, modules) {
      var readyQueue = [];
      var loading = false;
      return {
        lazyLoad: lazyload,
        ready: function(callback, thisArg) {
          if (typeof $window.Highcharts !== 'undefined' || !lazyload) {
            callback();
          } else {
            readyQueue.push([callback, thisArg]);
            if (loading) {
              return;
            }
            loading = true;
  ...

JavaScript

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function($scope) {



  $scope.highchartsNG = {
    options: {
      chart: {
        type: 'column'
      }
    },
    title: {
      text: 'Basic drilldown'
    },
    xAxis: {
      type: 'category'
    },

    legend: {
      enabled: false
    },

    plotOptions: {
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: true
        }
      }
    },

    series: [{
      "data": [{
        "name": "Hiring",
        "y": 390309.25,
        "drilldown": "Hiring"
      }, {
        "name": "Private",
        "y": 406746.97,
        "drilldown": "Private"
      }, {
        "name": "series1",
        "color": "",
        "type": "area"
      }]
    }],
    drilldown: {
      series: [{
        "id": "Hiring",
        "data": [
          ["MOTOR CAR", 97610],
          ["VAN", 129750],
          ["THREE WHEELER", 62949.25],
          ["PRIME MOVER", 100000]
        ]
      }, {
        "id": "Private",
        "data": [
          ["MOTOR CAR", 488356.97],
          ["VAN", 129750],
          ["THREE WHEELER", 78949.25],
          ["PRIME MOVER", 100000]
        ]
      }]
    }
  }

});