Highcharts Demo

author(s): Torstein Hønsi

by tfischer7103

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="container"></div>

JavaScript

var utc = Date.UTC,
  timeOffset = 60 * 1000, // one minute
  data =     // miliseconds is the data to be displayed in tooltip and labels
    [{
      miliseconds: 60 * 1000  // 1 minute
    }, {
      miliseconds: 10 * 60 * 1000  // 10 minutes
    }, {
      miliseconds: 60 * 60 * 1000 // 1 hour
    }];

// prepare series
var baseline = data[0].miliseconds;

data.map(function(p) {
  // y is the data used for drawing the point
  p.y = p.miliseconds - baseline + timeOffset;
  return p;
});


var chart = Highcharts.chart('container', {


  chart: {
    type: 'line'
  },

  yAxis: [{
    type: 'logarithmic',
    showFirstLabel: false,
    labels: {
      formatter: function() {
 
        return Highcharts.dateFormat("%Hh %Mm %Ss", this.value + baseline - timeOffset);
      }
    }
  }],

  series: [ {
    data: data
  }],

  tooltip: {
    useHTML: true,
    formatter: function() {
      // header
      var timestamp = this.point.options.miliseconds;
      html = "<span style='font-size: 10px'>" + this.x + "</span><br/>";


      // point
      html += "<span style='color: " + this.series.color + "'>\u25CF</span> " + this.series.name + ": <b>" + Highcharts.dateFormat("%Hh %Mm %Ss", timestamp || this.y)  + "</b><br/>";

      return html;
    }
  },
});