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>
<script src="https://github.com/pablojim/highcharts-ng"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="span12">
            
            
            <button ng-click="hideSeries()">Hide/Unhide Series</button>
            
        </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.hideSeries = function () {
        this.chartConfig.series[0].visible =  !this.chartConfig.series[0].visible;
    }

    $scope.chartConfig = {
        options: {
            chart: {
                type: 'line'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7],
            visible: true
        },{
            data: [1, 5, 7, 18, 7]
        }],
        title: {
            text: 'Hello'
        },

        loading: false
    }

});