Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<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">
            <form class="form">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin">
            Max: <input type="number" ng-model="chartConfig.xAxis.currentMax">
                </form>
            <br/>
            <button class="btn btn-primary" ng-click="addSeries()">Add Series</button>
            <button class="btn btn-primary" ng-click="addPoints()">Add Points to Random Series</button>
            <button class="btn btn-primary" ng-click="removeRandomSeries()">Remove Random Series</button>
            <button class="btn btn-primary" ng-click="toggleLoading()">Loading?</button>
            <p>Try zooming on the chart also...</p>
        </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) {

    $scope.addPoints = function () {
        var seriesArray = $scope.chartConfig.series
        var rndIdx = Math.floor(Math.random() * seriesArray.length);
        seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20])
    };

    $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.removeRandomSeries = function () {
        var seriesArray = $scope.chartConfig.series
        var rndIdx = Math.floor(Math.random() * seriesArray.length);
        seriesArray.splice(rndIdx, 1)
    }

    $scope.toggleLoading = function () {
        this.chartConfig.loading = !this.chartConfig.loading
    }

    $scope.chartConfig = {
        options: {
            chart: {
                type: 'line',
                zoomType: 'x'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10]
        }],
        title: {
            text: 'Hello'
        },
        xAxis: {currentMin: 0, currentMax: 10, minRange: 1},
        loading: false
    }

});