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="https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://rawgithub.com/wayoutmind/gauss/master/gauss.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="span12"></div>
        <div class="row">
            <highchart id="chart1" config="chartConfig" 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, $http) {



    $scope.addSeries = function () {
        var rnd = []
        for (var i = 0; i < 10; i++) {
            rnd.push(Math.floor(Math.random() * 20) + 1)
        }
        $scope.chartConfig.series.push({
            data: rnd
        })
    }
    
    $scope.averages = [{lookback: 100}, {lookback: 200}];
    
    $scope.$watch('averages', function(newAverages, old) {
        if(newAverages === old) {return};
        newAverages.forEach(function(a, i) {
            var vPoints = $scope.vPoints.ema(a.lookback)
            var newData = [];
            for(var j=0; j < $scope.origData.length; j++) {
                newData.push([$scope.origData[j][0], vPoints[j]])
            }
            
            $scope.chartConfig.series[i+1].data = newData
        })
    }, true)
    
    
    
    $scope.setupGauss = function() {
        var points = []
        for(var i=0; i < $scope.origData.length; i++) {
            points.push($scope.origData[i][1])
        }
        $scope.vPoints = gauss.Vector(points)
        
        
    }
    
    $http.jsonp('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSON_CALLBACK').success(function(data){
        $scope.chartConfig.series[0].data =  data;
        $scope.origData = data;
        $scope.setupGauss()
        $scope.chartConfig.loading = false;
    });

    $scope.chartConfig = {
        options: {
            navigator: {enabled: true},
            title: {
                text: 'AAPL Stock Price'
            },

            },
            series: [{
                data: []
            }, {data: []}, {data: []}],
            title: {
                text: 'AAPL'
            },
            useHighStocks: true,

            loading: true
        }

    });