jqPlot fill vertical portion having x-axis is a string

Question

I am not able to draw/fill vertical portion in my chart, like it is shown in this example: http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html. As I know, x-axis should be numeric and in my graph I have x-axises are strings.

I draw my plot:

plot2 = $.jqplot('chartplot'+index, [s3], {
                seriesDefaults: {
                    renderer    :$.jqplot.BarRenderer,
                    pointLabels: { show: true },
                    rendererOptions: {shadow:false }
                },
                series: [{label:"Average Fu - "+single_legend_lbl+""}],
                legend: {
                    show: true,
                    placement: 'insideGrid'
                },  
                axesDefaults: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                    tickOptions: { formatString: '%#d' }    
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks,
                        tickOptions: {
                            angle: -90,
                            fontSize: '10pt',
                        }
                    }
                },
                seriesColors: [bar_color],
                canvasOverlay: {
                    show: true,
                    objects: [
                                { rectangle: { xmin: 'Silver Fu', xmax: 'Light Green Fu', xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(0, 200, 200, 0.3)", showTooltip: true, tooltipFormatString: "Holidays" } },
                             ]
                }   
            });

Attached/linked is my rendered graph and I want color my graph into three section as per line: my rendered graph

Answer 1

Viewing your graph I assume your data is similar to this:

var s3 = [['one', 2], ['two', 15], ['three', 1]];

Indeed you need to input the rectangle numeric limits, and you have string based x-axis values. What you can do is take the original s3 array and create a new array containing only the first column: ['one, 'two', three'], you can use the below function to do it (read more about 'Get column from a two-dimensional array in JavaScript'):

function arrayColumn(arr, n) {
  return arr.map(x=> x[n]);
}

var firstcolumnArray = arrayColumn(s3, 0)

After creating firstcolumnArray , you can use it with .indexOf() function to map your string value into the corresponding numeric value which will be used as the rectangle border, like this:

{rectangle: {
   name: 'stddev',
   xmin: firstcolumnArray.indexOf('one')+1,
   xmax: firstcolumnArray.indexOf('two')+1,                    
   color: 'rgba(150,150,150,0.3)',
   shadow: false
}}

Here is a working jsfiddle example, with an exact implementation of the above.