Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by Sunny SM

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="row">
            <highchart id="chart1" config="chartConfig" class="span10"></highchart>
        </div>
        <button ng-click="updateChartData()">Update chart data (try twice!)</button>
    </div>
</div>

<p><a href="https://github.com/pablojim/highcharts-ng">See Highcharts-ng on github</a></p>
<p><a href="http://stackoverflow.com/questions/20910497/highcharts-ng-directive-angular-not-updating">Question on StackOverflow</a></p>

JavaScript

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

myapp.controller('myctrl', function ($scope) {
    
    $scope.chartData = [10, 15, 12, 8, 7];
   
    $scope.chartConfig = {
        options: {
            chart: {
                type: 'line'
            }
        },
        series: [{
            data: $scope.chartData
        }],
        title: {
            text: 'Updating chart data not working for some reason'
        },

        loading: false
    }
    $scope.updateChartData = function() {
        $scope.chartData.push($scope.chartData.length);        
    };
 
    $scope.$watch('chartData', function(chartData) {
        alert($scope.chartData);
    }, true);
    
    

});