Line Chart Highcharts Angular

BP Chart using Angular HighCharts

by shivkumarganesh

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://rawgithub.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js"></script>
<div ng-app='app' ng-controller="ctrl">
  <highchart id="chart1" config="chartConfig"></highchart>
</div>

JavaScript

//See: https://github.com/pablojim/highcharts-ng
var app = angular.module('app', ["highcharts-ng"]);
app.controller('ctrl', ['$scope', 'highchartsNG', function($scope, highchartsNG) {
  // do anything you like
  // ...

  function hehe(lol) {
    console.log(lol)
  }
  $scope.chartConfig = {
    "options": {
      "chart": {
        "type": "line"
      },
      "rangeSelector": {
        "selected": 2
      },
      "tooltip": {
        "crosshairs": true,
        "animation": true,
        "shared": true,
        "formatter": function() {
          return this.x + '<br>' + this.points[0].series.name + ': ' + this.points[0].y + '<br>' + this.points[1].series.name + ': ' + this.points[1].y;
        }
      },
      "plotOptions": {
        "series": {
          "stacking": "",
          "marker": {
            "fillColor":'#FFFFFF',
            "lineWidth": 0,
            'radius': 5,
            // inherit from series
          }
        },
        "showInLegend": true
      }
    },
    "xAxis": {
      "type": "datetime"
    },
    "series": [{
      "name": "Systolic",
      "data": [
        [1460968646, 80],
        [1460968630, 99],
        [1460968603, 89],
        [1460968522, 82],
        [1460968515, 34]
      ],
      "id": "series-0"
    }, {
      "name": "Diastolic",
      "data": [
        [1460968646, 50],
        [1460968630, 79],
        [1460968603, 69],
        [1460968522, 92],
        [1460968515, 104]
      ],
      "connectNulls": true,
      "id": "series-1"
    }],
    "title": {
      "text": "Blood Pressure"
    },
    "credits": {
      "enabled": false
    },
    "loading": false,
    "size": {},
    "subtitle": {
      "text": "Chart for Visualizing BP of an Individual"
    }
  };
}]);