Highcharts Stock Demo

author(s): Torstein Hønsi

by sergiu079

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

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

JavaScript

$(function() {
    var series = [{"color":"#FF0000","data":[[1364211336896,1],[1364211763904,1]]},{"color":"#00FF00","data":[[1364211763904,1],[1364383746853,1]]},{"color":"#FF0000","data":[[1364383746853,1],[1365072467047,1]]}];
	$('#container').highcharts('StockChart', {
       
        navigator: {
            enabled: false
        },
        title: {
            text: ' '
        },
        legend: {
            enabled: false
        },
        tooltip: {
            crosshairs: true,
			formatter: function(e){
				var s = Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '<br />';
				if (this.points.length === 2) {
					s += 'Switched from state: ' + (this.points[0].series.color === '#00FF00' ? 'true' : 'false');
					s += '<br />to state: ' + (this.points[1].series.color === '#00FF00' ? 'true' : 'false');
				} else {
					s += 'State: ' + (this.points[0].series.color === '#00FF00' ? 'true' : 'false');
				}
				return s; 
			}
        },
        plotOptions: {
            line: {
                lineWidth: 20,
                states: {
					hover: {
						enable: false
					}
				}
				
            }
        },
        
        xAxis: {
            title: {
                text: null
            },
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            }
        },
        series: series
    
    });
});