Timeline

by Flyout

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  var opacity = 0.8;

  $('#container').highcharts({
    chart: {
      zoomType: 'x'
    },

    title: {
      text: 'Timeline de la performance d\'un traitement'
    },

    tooltip: {
      valueDecimals: 2,
      formatter: function() {
        var s = '<span style="font-size:10px">' + Highcharts.dateFormat('%e %b %Y, %H:%M', this.x) + '</span> <br/>'
        s += '<span style="color:' + this.color + '">\u25CF </span>' + '<b>' + this.y + '</b>';
        return s;
      }
    },

    xAxis: {
      type: 'datetime',
      labels: {
        formatter: function() {
          return Highcharts.dateFormat('%d %b %Y' + '<br/>' + '%H:%M', this.value);
        }
      }
    },

    yAxis: {
      type: 'double',
      title: {
        text: 'Temps d\'exécution (ms)'
      },
      plotLines: [{
        color: 'blue',
        dashStyle: 'longdashdot',
        value: 6,
        width: 2,
        label: {
          text: 'moyenne',
          style: {
            color: 'white'
          }
        },
        /*events : {
        	mouseover:
        }*/
      }]
    },

    exporting: {
      buttons: {
        customButton1: {
          text: 'Filter',
          onclick: function() {
            var chart = $('#container').highcharts(),
              data = chart.series[0].data,
              data2 = [];
            for (var i = 0; i < data.length; i++) {
              if (data[i].y >= 6) {
                data2.push([data[i].x, data[i].y]);
              }
            }
            chart.series[0].setData(data2);
          }
        },

        customButton2: {
          text: 'Reset',
          onclick: function() {
            var chart = $('#container').highcharts();
            chart.series[0].setData(getData());
          }
        }
      }
    },

    series: [{
      type: 'scatter',
      showInLegend: false,
      data: getData(),
      marker: {
        states: {
          hover: {
            fillColor: false,
            lineColor:...