Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
    
    var plot= $.parseJSON('{"checkin":[[1,1375314780000],[2,1375316640000],[5,1375316400000],[6,1375329960000],[7,1375316820000],[12,1375315740000]],"checkout":[[1,1375329900000],[2,1375328760000],[5,1375329420000],[12,1375330080000]]}');
    
      var checkin_data = new Array();
      var checkout_data = new Array();
    var year = 2013, month = 8;
      $.each(plot.checkin,function(i,val){
          checkin_data.push(new Array( Date.UTC(year,month-1,val[0]),val[1]));
      });
      $.each(plot.checkout,function(i,val){
          checkout_data.push(new Array( Date.UTC(year,month-1,val[0]),val[1]));
      });
    console.log(checkin_data);
       
      plot_chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          type: 'scatter',
          marginBottom: '50',
          zoomType: 'xy'
        },
        title: {
          text: null
        },
        xAxis: {
          tickInterval: 7*24*3600*1000,
          type: 'datetime',
          labels: {
            formatter: function() {
              return Highcharts.dateFormat('%a %e %b', this.value);                  
            }        
          },
          title: {
            enabled: true,
            text: 'Days'
          }
        },
        yAxis: {
          title: {
           enabled: false,
           text: 'Time'
         },
         type: 'hour',
          labels: {
            formatter: function() {
              return Highcharts.dateFormat('%H', this.value);                  
            }        
          },
         gridLineColor: '#eee'

       },
       credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },    
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: -10,
        floating: true,
        backgroundColor: '#efefef',
        borderWidth: 0
      },
      plotOptions: {
        scatter: {
          marker: {
        ...