columnrange

columnrange chart http://www.highcharts.com/demo/columnrange

by Ankit Patidar

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div ng-app="myModule" ng-controller="myController">
  <hc-column-chart data="columnData">Placeholder for pie chart</hc-column-chart>
  {{columnData.categories}}
</div>

JavaScript

angular.module('myModule', [])
	// Directive for pie charts, pass in title and data only    
  .directive('hcColumnChart', function () {
  return {
    restrict: 'E',
    template: '<div></div>',
    scope: {
      title: '@',
      data: '='
    },
    link: function (scope, element) {
    console.log(scope.data);
      Highcharts.chart(element[0], {
        chart: {
          type: 'column'
        },
        title: {
          text: scope.data.title
        },
        xAxis: {
        	categories: scope.data.categories,
          crosshair: true
        },
        yAxis: {
        	min: 0,
          title: {
            text: scope.data.xAxisTitle
          }
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        series: scope.data.data
      });
    }
  };
})
  .controller('myController', function ($scope) {

  // Sample data for pie chart
  $scope.columnData = {
    "data": [
      {
        "name": "TEXAS STATE UNIVERSITY - LOBBY AT STAIRS",
        "data": [
          67740, 67728, 67716, 67716, 67692, 67764, 67728, 67692, 67656, 67764, 67776, 67728, 67764, 67740, 67728, 67728, 67764, 67740, 67668, 67776, 67764, 67740, 67776, 67740, 67596, 67776, 42612, 0, 0, 0
        ]
      },
      {
        "name": "TEXAS SOUTHERN UNIVERSITY - REC CNTR - LOBBY",
        "data": [
          70952, 70920, 70872, 70944, 70960, 70972, 70976, 70988, 70864, 70968, 70988, 70992, 70988, 70992, 70952, 70932, 70988, 70992, 70908, 70960, 70944, 70976, 70980, 70988, 70620, 71052, 71052, 71008, 71056, 70868
        ]
      }
    ],
    "categories": [
     1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
    ],
    "title": "Daily device(s) report",
    "xAxisTitle": "Days",
    "debug": "b"
  }
});