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


<script>
	
	var data_id; // thea data id of last retrieved
	
	// Chart
	var options = {
	  chart: {
	    type: 'areaspline',
        zoomType: 'x'		  
	  },
	  title: {
	    text: 'Operation Timings'
	  },
    time: {
        useUTC: false
    },    
	  xAxis: {
	    type: 'datetime',
        labels: {
           format: '{value:%e %b %H:%M:%S}'
        }
	  },
	  yAxis: {
	    title: {
	      text: 'Time (s)'
	    }
	  },
	  legend: {
	    enabled: true
	  },
	  exporting: {
	    enabled: false
	  },
     plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
	  series: [      
      <% @load_test_timings.each do |key, val| %>
      {
        name: "<%= key %>",
        turboThreshold: 10000, // default to 1000				
        data: <%= val.to_json.gsub('"', "") %>
      },
      <% end %>            
    ]
	};
	var chart = Highcharts.chart('container-operation-timings', options)


	function show_chart_series(idx) {
		for (var i = 0; i < chart.series.length; i++) {
			if (i == idx) {
		        chart.series[i].show();				
			} else {
				chart.series[i].hide();
			}
		}
	}
</script>
