Highcharts Stock Demo

author(s): Torstein Hønsi

HTML

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

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

JavaScript

$(function(){
    
options = {

  chart: {
     renderTo: 'container',
     zoomType: 'xy',
     defaultSeriesType: 'scatter',
     events: {
        load: function() {
            $('#container').css({"background":"none"});
        }
     }
  },
  
  title: {
     text: 'Chart Title'
  },
  
  xAxis: {
     gridLineWidth: 1,
     labels: {
        formatter: function() {
           return this.value; //formatTimestamp(this.value);
        }
     },
     startOnTick: true,
     endOnTick: true,
     showLastLabel: true
  },
  
  yAxis: [{ 
     title: {
        text: 'Title here'
     }
  }],

  tooltip: {
     //shared: true,
     //crosshairs: [true,true],
     formatter: function(index) {
        var labelstr = "<b>time:</b>";
        var secs = parseInt(this.x/1000000000);
        var date = new Date(secs*1000);
        switch(this.point.units) {
           default:
           case 'ns':
              var extrasecs = this.x-(secs*1000000000);
              break;
           case 'us':
              var extrasecs = parseInt((this.x-(secs*1000000000))/1000);
              break;
           case 'ms':
              var extrasecs = parseInt((this.x-(secs*1000000000))/1000000);
              break;
           case 's':
              var extrasecs = false;
              break;
        }
        var timeval = date.strftime('%H:%M:%S');
        labelstr += timeval + ((extrasecs) ? "."+extrasecs : "") + ' <b>value:</b> ';
        labelstr += this.y +this.point.units;
        labelstr += '<br>'+this.point.extra.replace(",",",<br>");
        return labelstr;
     }
  },

  exporting: {
     url: '../Highcharts/exporting-server/index.php',
     width: 800
  },
  
  plotOptions: {
      scatter: {
         stickyTracking: false,
          allowPointSelect: true,
         marker: {
               radius: 2,
               states: {
                    hover: {
                        enabled: true,
                       lineColor: 'rgb(69,114,167)',
                      ...