      
	 <figure class="highcharts-figure">
	     <div id="container-operation-timings-live"></div>
	 </figure>	 


<script>
	
	var data_timestamp = 1;
	// Chart
	var options = {
	  chart: {
	    type: 'areaspline',
	    events: {
	    	load: getData
	    }
	  },
	  title: {
	    text: 'Operation Timings'
	  },
    time: {
        useUTC: false
    },        
	  xAxis: {
	    type: 'datetime',
      tickPixelInterval: 150,
		  labels: {
  	  	   format: '{value:%e %b %H:%M:%S}'
		  }
	  },
	  yAxis: {
	    title: {
	      text: 'Time (s)'
	    }
	  },
    tooltip: {
	    formatter: function() {
		     return '<span style="font-size:10px;">'  + this.point.op + ': <b>' +  this.point.y + '</b></span>';
       }
	  },
	  legend: {
	    enabled: true
	  },
	  exporting: {
	    enabled: false
	  },
      plotOptions: {
          areaspline: {
              fillOpacity: 0.5
          }
      },
	  series: [{
	    name: 'Timings',
	    data: []
	  }]
	};
	
	var chart = Highcharts.chart('container-operation-timings-live', options)

	// Data
	function getData() {
	  setInterval(function() {
	    fetch('/api/builds/<%= @build.id %>/load-test-result?data_timestamp=' + data_timestamp).then(function(response) {
	      return response.json()
	    }).then(function(data) {
			
		  var series = chart.series[0], shift = series.data.length > 20; // shift if the series is   
                                                 // longer than 20        
          if (data.length >= 1) {
    			for(var i = 0; i < data.length-1; i++) {
  			    var entry = data[i];
  				  series.addPoint({ x: entry.x, y: Number(entry.y/1000), op: entry.op }, false, false)
  				  data_timestamp = entry.x;				
  	  	    }
           last_entry = data[data.length - 1];
  			series.addPoint({ x: last_entry.x, y: Number(last_entry.y/1000), op: last_entry.op }, true, shift)     
          } 
	    })
	  }, <%= @load_chart_refresh_interval rescue 5000 %>)
	}

</script>