Basic Highcharts-ng demo

Basic Highcharts-ng demo author(s): pablojim

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app="myapp">
  <div ng-controller="myctrl">
    <div class="span12">
      <input ng-model="chartConfig.title.text">
      <button ng-click="redraw()">Redraw</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>
    </div>
    <div class="row">
      <highchart id="chart1" config="chartConfig" class="span10"></highchart>
    </div>
  </div>
</div>
<div id="console">

</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

$(function () {
  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])
    };

    var series = 0;
    $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,
        id: 'series_' + series++
      })
    }
    
    $scope.redraw = function () {
    	console.log('$scope.chartConfig.getChartObj(): ', $scope.chartConfig.getChartObj());
      $scope.chartConfig.getChartObj().redraw();
    }

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

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

    $scope.chartConfig = {
      chart: {
        type: 'bar'
      },
      series: [{
        data: [10, 15, 12, 8, 7],
        id: 'series1'
      }],
      title: {
        text: 'Hello'
      }
    }

  });
})