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="https://rawgithub.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <highchart id="chart1" config="projectionChartConfig"></highchart>
    </div>
</div>

JavaScript

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

myapp.controller('myctrl', function ($scope, $timeout, $compile, $rootScope) {
function calcTime( offset) {
    // create Date object for current location
    var d = new Date();

    // convert to msec
    // subtract local time zone offset
    // get UTC time in msec
    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);

    // create new Date object for different city
    // using supplied offset
    var nd = new Date(utc + (3600000*offset));

    // return time as a string
    return "The local time for city is "+ nd.toLocaleString();
}

Date.prototype.stdTimezoneOffset = function () {
    var jan = new Date(this.getFullYear(), 0, 1);
    var jul = new Date(this.getFullYear(), 6, 1);
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}

Date.prototype.isDstObserved = function () {
    return this.getTimezoneOffset() < this.stdTimezoneOffset();
}

var today = new Date();
if (today.isDstObserved()) { 
    alert ("Daylight saving time!");
}


  // alert(d);
    $scope.xLabelClick = function () {
        console.log('a');
        $rootScope.$broadcast('xLabelClick');
    };

    $scope.projectionChartConfig = {
        options: {
            chart: {
                type: 'column'
            },
            xAxis: {
                tickColor: '#fff',
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'],
                labels: {
                    formatter: function () {
                        return "<a ng-click='xLabelClick()'>" + this.value + "</a>";
                    },
                    useHTML: true
                }
       ...