graph stock

by owen_pengtao

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div ng-app="" ng-controller="SearchGraphController">
<div class="row">
   <div class="col-md-10">Graph View</div>
   <div class="col-md-2 text-right">
      <span class="hand glyphicon glyphicon-cog"></span>
      <span class="hand glyphicon {{isCollapsed ? 'glyphicon-chevron-left' : 'glyphicon-chevron-down'}}" ng-click="isCollapsed = !isCollapsed"></span>
   </div>
</div>
<div class="{{isCollapsed ? 'none' : ''}}">
    <div id="container" style="height: 400px; min-width: 310px">
</div>
</div>

CSS

.hand {
  cursor: pointer;
}
.none{
    display: none;
}

JavaScript

function SearchGraphController($scope) {
        $scope.isCollapsed = false;
    }

$(function() {	$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
		// Create the chart
		$('#container').highcharts('StockChart', {
			

			rangeSelector : {
				selected : 1,
				inputEnabled: $('#container').width() > 480
			},

			title : {
				text : 'AAPL Stock Price'
			},
			
			series : [{
				name : 'AAPL',
				data : data,
				tooltip: {
					valueDecimals: 2
				}
			}]
		});
	});

});