jqPlot - How to change opacity or z-index of canvasOverlay?

Question

I would like to show 3 color zones on my graph on the background according to y axis value, as I understand, I cannot control the background color by different colors.

My idea is to draw 3 horizontal lines with canvasOverlay - that is working. The problem is I want to place this lines behind my graph curve, now it seen on the front and it overlays my points line.

Can I change the property of z-index or the opacity?

Maybe some other ideas?

  $.jqplot( 'ChartDIV', [data],
        {
            series: [{ showMarker: true}],
            highlighter: {
                sizeAdjust: 10,
                show: true,
                tooltipLocation: 'n',
                useAxesFormatters: true
            },

            tickOptions: {
                formatString: '%d'
            },
            canvasOverlay: {
                show: true,
                objects: [ 
                            {
                                horizontalLine: 
                                {      
                                    name: 'low', 
                                    y: 1.0,
                                    lineWidth: 100,
                                    color: 'rgb(255, 0, 0)',
                                    shadow: false 
                                }
                            },      
                            {
                                horizontalLine:
                                { 
                                    name: 'medium',
                                    y: 2.0,
                                    lineWidth: 100, 
                                    color: 'rgb(250, 250, 0)', 
                                    shadow: true 
                                }
                            },
                            {
                                 horizontalLine:
                                {
                                    name: 'high',
                                    y: 3.0,
                                    lineWidth: 100,
                                    color: 'rgb(145, 213, 67)',
                                    shadow: false
                                }
                             },  
                        ]       
                    },
            axes: {
                xaxis:
                {
                    label: 'Dates',
                    renderer: $.jqplot.DateAxisRenderer,
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    tickOptions: {
                        formatString: '%d/%m/%Y',
                        angle: -30,
                        fontFamily: 'Arial',
                        fontSize: '13px',
                        fontWeight: 'bold'
                    },
                    min: d[0] + "/" + d[1] + "/01", 
                    tickInterval: '2 month',
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3'
                    }
                },
                yaxis:
                {
                    label: 'Level',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickOptions: {
                        formatter: $.jqplot.tickNumberFormatter
                    },
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3',
                        angle: -90
                    }

                }
            }
        } );

Answer 1

I think that your problem might be the order in which you do your painting. I think that you first create the graph and then in it you draw this line, right?

Thus to sort out this you might try one of the hooks the jqPlot chart provides.

To see how you could use a hook, please see my other answer (BTW to my own question:) where I used a postDrawHooks hook to change format of labels once the graph is drawn. In your case you could use preDrawHooks or maybe more appropriate would be to use preDrawSeriesHooks, since I am not sure if a canvas is ready to use when function passed in preDrawHooks is called.

Remember that, according to the documentation, the preDrawSeriesHooks is called each time before a series is drawn, thus in your case you would need it to work just once.

EDIT

In this case the answer is simple, well you could do both, which is shown in my jsfiddle, available here.

You need this piece of code to send overlay canvas to back, which you should place before the code painting your graph:

$.jqplot.postDrawHooks.push(function(){
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0');//send overlay canvas to back
    $(".jqplot-series-canvas").css('z-index', '1');//send series canvas to front
});

But when it comes to opacity you could apply it to whichever line you like (also shown in my code), using of the rgba() method, for series it is done this way:

seriesColors:['rgba(100, 150, 100, 0.75)']

for the lines on canvas, you do it like this:

color: 'rgba(145, 213, 67, 0.25)'

---

EDIT2

The most important think was forgotten therefore with the previous code the highlighter was not working. Simply the event canvas which is responsible for event catching and propagation was hidden underneath our canvas. It was corrected in the current version of code, by setting of an appropriate z-index for it. The complete method would look like:

$.jqplot.postDrawHooks.push(function() {
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back  
    $(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front         
    $(".jqplot-highlighter-tooltip").css('z-index', '2'); //make sure the tooltip is over the series
    $(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
});

---

EDIT3: A much nicer solution where we do not need to worry about setting the z-index.

$.jqplot.postDrawHooks.push(function() {
    var overlayCanvas = $($('.jqplot-overlayCanvas-canvas')[0])
    var seriesCanvas = $($('.jqplot-series-canvas')[0])
    seriesCanvas.detach();
    overlayCanvas.after(seriesCanvas);
});

It is presented here. This solution is inspired by the answer provided by @Mark to a similar sort of problem.

Answer 2

A much better solution is to use Canvas rectangle object without any hacking http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], {
      canvasOverlay: {
        show: true,
        objects: [
          { rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } },
          { rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } }
        ]
      } 
  });
});