Basic Highcharts-ng demo

Basic Highcharts-ng demo author(s): pablojim

by Nhi Nguyen

HTML

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

<div ng-app="myapp">
  <div ng-controller="myctrl">
    <div id="container">
      <div class="row">
        <highchart id="chart1" config="chartConfig" class="span8"></highchart>
      </div>
      <div class="row">
        <highchart id="chart2" config="chartConfig2" class="span9"></highchart>
      </div>
      <div class="row">
        <highchart id="chart3" config="chartConfig3" class="span10"></highchart>
      </div>
    </div>
  </div>
</div>

CSS

.chart {
  min-width: 320px;
  max-width: 800px;
  height: 220px;
  margin: 0 auto;
}

.span8 {
  width: 400px;
}

.span9 {
  width: 600px;
}

.span10 {
  width: 800px;
}

JavaScript

//See: https://github.com/pablojim/highcharts-ng

$(function() {
  var myapp = angular.module('myapp', ["highcharts-ng"]);

  myapp.controller('myctrl', function($scope) {

    $scope.addPoints = function(chartConfig) {
      var seriesArray = chartConfig.series
      var rndIdx = Math.floor(Math.random() * seriesArray.length);
      var rnd = []
      for (var i = 0; i < 30; i++) {
        rnd.push(Math.floor(Math.random() * 20) + 1)
      }

      seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat(rnd)
    };

    /**
     * In order to synchronize tooltips and crosshairs, override the
     * built-in events with handlers defined on the parent element.
     */
    $('#container').bind('mousemove touchmove touchstart', function(e) {
      var chart,
        point,
        i,
        event;

      for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
        point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
          point.highlight(e);
        }
      }
    });
    /**
     * Override the reset function, we don't need to hide the tooltips and crosshairs.
     */
    Highcharts.Pointer.prototype.reset = function() {
      return undefined;
    };

    /**
     * Highlight a point by showing tooltip, setting hover state and draw crosshair
     */
    Highcharts.Point.prototype.highlight = function(event) {
      this.onMouseOver(); // Show the hover marker
      this.series.chart.tooltip.refresh(this); // Show the tooltip
      this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
    };
    /**
     * Synchronize zooming through the setExtremes event handler.
     */
    function syncExtremes(e) {
      var thisChart = this.chart;

      if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function(chart)...