function rdgraph_draw(selected_graphs, outfile) {
  //get output data
  var graph_requests = [];
  for (var i in selected_graphs) {
    graph_requests.push($.get('/runs/'+selected_graphs[i]+'/'+outfile));
  }

  var bpp_scaler = parseFloat($("#graph_x_scaler").val());
  var metric_index = parseInt($('#metric').val());
  var logarithmic = $('#logarithmic').prop('checked');

  // draw chart
  $.when.apply($,graph_requests).done(function() {
    if (selected_graphs.length == 1) {
      var argument_list = [ arguments ];
    } else {
      var argument_list = arguments;
    }

    var curves = [];

    for (var j in argument_list) {
      var curve = [];
      var data = argument_list[j][0];
      var lines = data.split('\n');
      for (var i in lines) {
        var line = lines[i].split(' ');
        //line[0-6] --> quantizer, pixels, bytes, PSNR, PSNR-HVS, SSim, FastSSim
        var point = [bpp_scaler * line[2]*8 / line[1], line[3+metric_index]];
        curve.push(point);
      }
      var series = {
        data: curve,
        label: selected_graphs[j]
      };
      curves.push(series);
    }

    var options = {
      xaxis: {
        axisLabel: 'Bits per Pixel',
      },
      yaxis: {
        axisLabel: 'Picture quality (dB)'
      },
      legend: {
        show: true,
        position: 'se'
      },
      series: {
        lines: {
          lineWidth: 1
        },
        shadowSize: 0
      },
      zoom: {
        interactive: true
      },
      pan: {
        interactive: true
      }
    };

    var x_max = parseFloat($("#graph_x_range").val());
    options.xaxis.max = x_max * bpp_scaler;

    if (bpp_scaler != 1) {
      options.xaxis.axisLabel = 'Mbps';
    }

    if (logarithmic) {
      options.xaxis.transform = function (v) { return Math.log(v); };
      options.xaxis.inverseTransform = function (v) { return Math.exp(v); };
    }

    $.plot('#rd_graph',curves,options);
  });
}

@@ -1505,24 +1505,337 @@
 ctive: true%0A
+      %7D,%0A      grid: %7B%0A        markings: %5B%0A          %7B xaxis: %7B from: 0.005*bpp_scaler, to: 0.02*bpp_scaler %7D, color: %22#fff0f0%22 %7D,%0A          %7B xaxis: %7B from: 0.02*bpp_scaler, to: 0.06*bpp_scaler %7D, color: %22#f0fff0%22 %7D,%0A          %7B xaxis: %7B from: 0.06*bpp_scaler, to: 0.2*bpp_scaler %7D, color: %22#f0f0ff%22 %7D%0A        %5D%0A
       %7D%0A    

Add colored regions for 3 bitrate regions.