$('#load_test_operation_modal').html('<%= raw @modal_content %>');
$("#load_test_operation_modal").modal("show");

var options = {
    chart: {
        zoomType: "x"
    },
    title: {
        text: "Average Timings: \'<%= @operation %>\'",
        align: "left"
    },
    subtitle: {
    },
    time: {
        useUTC: false
    },
    xAxis: [{
       type: 'datetime',
       labels: {
         format: '{value:%e %b %H:%M:%S}'
        },
        categories: <%= @build_times.inspect %>,
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: "{value}",
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: "VU",
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true

    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: "Timing",
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: "{value} ms",
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }

    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: "vertical",
        align: "left",
        x: 80,
        verticalAlign: "top",
        y: 55,
        floating: true,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || // theme
            "rgba(255,255,255,0.25)"
    },
    series: [{
        name: "Timing",
        type: "column",
        yAxis: 1,
        data: <%= @operation_timings.inspect %>,
        tooltip: {
            valueSuffix: " ms"
        }
    }, {
        name: "VU",
        type: "spline",
        data: <%= @vus.inspect %>,
        tooltip: {
            valueSuffix: ""
        }
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    floating: false,
                    layout: "horizontal",
                    align: "center",
                    verticalAlign: "bottom",
                    x: 0,
                    y: 0
                },
                yAxis: [{
                    labels: {
                        align: "right",
                        x: 0,
                        y: -6
                    },
                    showLastLabel: false
                }, {
                    labels: {
                        align: "left",
                        x: 0,
                        y: -6
                    },
                    showLastLabel: false
                }, {
                    visible: false
                }]
            }
        }]
    }
}
  
var chart = Highcharts.chart("container-operation-chart", options);
