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/src/directives/highcharts-ng.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <input ng-model="chart.title.text">
        <button ng-click="addSeries()">Add Series</button>
        <button ng-click="addPoints()">Add Points to Random Series</button>
        <button ng-click="removeRandomSeries()">Remove Random Series</button>
        <button ng-click="swapChartType()">Line/Bar</button>
        <ul>
            <li ng-repeat="li in list" ng-controller="highChartController" ng-init='initConfig(chart,li)'>
                <highchart id="chart1" 
                           config="config">
                 </highchart>
            </li>
        </ul>
            
    </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('highChartController', function ($scope) {
    $scope.initConfig=function(config,item) {
        debugger;
        $scope.config=angular.copy(config);
        $scope.config.title.text=item.name;
    }
});
myapp.controller('myctrl', function ($scope) {
    $scope.list = [
        {data:10,name:'first KPI',type:"line"},
        {data:12,name:'sec KPI',type:"line"},
        {data:32,name:'third KPI',type:"bar"}
    ];
    $scope.addPoints = function () {
        var seriesArray = $scope.chart.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.chart.series.push({
            data: rnd
        })
    }

    $scope.removeRandomSeries = function () {
        var seriesArray = $scope.chart.series
        var rndIdx = Math.floor(Math.random() * seriesArray.length);
        seriesArray.splice(rndIdx, 1)
    }

    $scope.options = {
        type: 'line'
    }

    $scope.swapChartType = function () {
        if (this.chart.options.chart.type === 'line') {
            this.chart.options.chart.type = 'bar'
        } else {
            this.chart.options.chart.type = 'line'
        }
    }

    $scope.chart = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }

});