Highcharts Stock Demo

author(s): Torstein Hønsi

by ideazgeni

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<script type="text/javascript" src="http://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

<input type="button" value="toggle legend" id="toggleBtn" />
<input type="button" value="hide legend" id="hideBtn" />
<input type="button" value="show legend" id="showBtn" />
<div id="container" style="height: 400px; min-width: 600px"></div>

JavaScript

/*
 Extention for Highcharts3 and Highstocks1.3 to add the Chart some functions: 
 legendHide() , legendShow() , legendToggle() 
 
 @author jan Kowalleck <[email protected]>
 @source https://bitbucket.org/jkowalleck/highcharts-legendextention/
*/
(function(b,a){if(!b){return}var c=b.Chart.prototype,d=b.Legend.prototype;b.extend(c,{legendSetVisibility:function(h){var i=this,k=i.legend,e,g,j,m=i.options.legend,f,l;if(m.enabled==h){return}m.enabled=h;if(!h){d.destroy.call(k);e=k.allItems;if(e){for(g=0,j=e.length;g<j;++g){e[g].legendItem=a}}k.group={}}c.render.call(i);if(!m.floating){f=i.scroller;if(f&&f.render){l=i.xAxis[0].getExtremes();f.render(l.min,l.max)}}},legendHide:function(){this.legendSetVisibility(false)},legendShow:function(){this.legendSetVisibility(true)},legendToggle:function(){this.legendSetVisibility(this.options.legend.enabled^true)}})}(Highcharts));


$(function() {
	$('#container').highcharts('StockChart', {
	    
	    chart: {
	    },
	    
	    legend: {
	    	enabled: true,
	    	align: 'right',
	    	layout: 'vertical',
	    	verticalAlign: 'top',
	    	y: 100,
	    },
	    
	    rangeSelector: {
	    	selected: 1
	    },
	    
	    series: [{
	        name: 'ADBE',
	        data: ADBE
	    }, {
	        name: 'MSFT',
	        data: MSFT
	    }]
	},
    function(chart) 
    {
        $('#toggleBtn').click(function () { chart.legendToggle(); });
        $('#showBtn').click(function () { chart.legendShow(); });
        $('#hideBtn').click(function () { chart.legendHide(); });
    }
    );
});