Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by David

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 id="chart-wrapper" ng-app="myapp">
    <div ng-controller="myctrl">
        <div id="chartContainer" >
            <highchart id="chart1" config="chartConfig"></highchart>
        </div>
    </div>
</div>

CSS

body, html {border: 0px; margin: 0px; padding: 0px; 
height:100%; position:relative; width:100%;}

#chart-wrapper,#chart-wrapper div {
    float:left;
    height:100%;
    width:100%;
}
#chartContainer {
    background-color: #AF3456;
    width:97%!important;
    height:97%!important;
    padding:1%;
    float:left;
}

JavaScript

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

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

    $scope.chartConfig = {
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
    }

});