Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by pablojim

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="https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<div ng-app="myapp">
  <div ng-controller="myctrl">
    <div class="span12">
    </div>
    <div class="row" ng-repeat="id in ids">
      <highchart id="chart1" config="cfgs[id]" class="span10"></highchart>
    </div>
  </div>
</div>

<h3><a href="https://github.com/pablojim/highcharts-ng">See Highcharts-ng on github</a></h3>

JavaScript

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

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

	$scope.ids = ['a', 'b']

  $scope.cfgs = {
    a: {
      options: {
        chart: {
          type: 'bar'
        }
      },
      series: [{
        data: [10, 15, 12, 8, 7]
      }],
      title: {
        text: 'AAAA'
      },

      loading: false
    },
    b: {
      options: {
        chart: {
          type: 'bar'
        }
      },
      series: [{
        data: [10, 15, 12, 8, 7]
      }],
      title: {
        text: 'BBBB'
      },

      loading: false
    }
  }
});