Drawing/Replot canvasOverlay for horizontal banding via windows.load or postDrawHook after plot plot has rendered not working

[mhdata...@gmail.com]

Hi,

Background information:
I am using primefaces 3.5 which uses jqplot internally for rendering charts.
The data I display is a linearSeries with x-axis being a DateAxisRenderer.
This data is created dynamically and is passed directly to the primefaces component to render.
I do not want to call an ajax/json function from the view layer directly so until the rendering is completed the data is not available to me.

Accordingly the chart is rendered and the linear series displayed.

Requirement : My requirement is to display alternating horizontal color bands on the plot.

Because of the above have written a hook as below so that post window load I get a handle to the plot.
Then get the y axis ticks and create an array dynamically to create the canvasOverlay.objects.
I then try to draw / replot the canvasOverlay back onto the plot however the bands are not displaying.

Problem : CanvasOverlay.objects[i].horizontalLine not being dislayed on the plot

Environment : JQplot version : 1.0.8r1250, Primefaces 3.5

JS code below. Unfortunately cant give a JS fiddle because of the dynamic data stuff.
For Primefaces I use <p:lineChart and extender="lineChart_price" where lineChart_price is mentioned below.

Any assistance to resolution would be really great.

$(document).ready(function() {

    window.onresize = function(event) {
        this.lineChartPrice1.plot.replot({
            resetAxes : true
        });
    };  
  
    $.jqplot.config.enablePlugins = true;

    //trying either postHook or load same behavior bands not rendering
    //window.onload = function() {
    $.jqplot.postDrawHooks.push(function() {
        plot1 = this.lineChartPrice1.plot;
        //$.jqplot('lineChartPriceForm:lineChartPrice1', this.lineChartPrice1.plot.data, this.lineChartPrice1.plot.options);//This also gives the same behavior.

        /*
        * See https://groups.google.com/forum/#!msg/jqplot-users/HhDavBSZgb0/VN48cRr7b3AJ
        */
        var nticks = plot1.axes.yaxis._ticks.length;
        // var ymin = plot1.axes.yaxis._ticks[0].label;
        // var ymax = plot1.axes.yaxis._ticks[nticks - 1].label;

        /*
         * See http://stackoverflow.com/questions/13005631/horizontalline-and-verticalline-in-jqplot-dynamically-by-canvasoverlay
         */
        var myArrayPoints = Array();

        for ( var i = 0; i <= nticks; i++) {
            if (i % 2 != 0) {
                myArrayPoints.push({
                    horizontalLine : {
                        y : plot1.axes.yaxis._ticks[i].label,
                        lineWidth : 50,
                        color : "rgba(0, 0, 0, 0.1)",
                        shadow : false
                    }
                });
            }
        }

        co = plot1.plugins.canvasOverlay;

        co = {
            show : true,
            deferDraw:false,
            objects : myArrayPoints
        };
 
        //Working and correctly alerting the ticks
        /*for(var i=0;i<co.objects.length;i++){
            alert(co.objects[i].horizontalLine.y);
        }*/
      
        /*
         * Not working
         */
        co.draw(plot1);
        plot1.replot({
            //clear : true,
            resetAxes : true
        });
    });
});

/* pie graph shown on the center left of the dashboard page */
function lineChart_price() {

    this.cfg.grid = {
        drawBorder : false,
        shadow : false,
        background : '#FFFFFF',
        borderColor : 'white',
    // background: 'white',
    };

    this.cfg.legend = {
        show : true,
        border : 'none',
        placement : 'outsideGrid',
        shrinkGrid : true,
        renderer : $.jqplot.EnhancedLegendRenderer,
        rendererOptions : {
            numberColumns : 10,
            numberRows : 1
        },
        location : 's'
    };

    this.cfg.axesDefaults = {
        showTickMarks : true,
        tickOptions : {
            showMark : true,
            showGridline : false,
        },
        showGridline : false
    };

    this.cfg.axes = {
        xaxis : {
            renderer : $.jqplot.DateAxisRenderer,
            tickRenderer : $.jqplot.CanvasAxisTickRenderer,
            tickOptions : {
                formatString : '%b %#d',
            }
        },
    },

    this.cfg.seriesDefaults = {
        shadow : false,
        rendererOptions : {
            highlightMouseOver : false
        },
        pointLabels : {
            show : false
        },
        markerRenderer : $.jqplot.MarkerRenderer,
        markerOptions : {
            show : true,
            shadow : false,
            style : "filledCircle"
        },
    };

    this.cfg.canvasOverlay = {
        show : true,
        deferDraw:true
/*        objects : [ {
            horizontalLine : {
                name : '1',
                y : 120.0,
                lineWidth : 50,
                color : 'rgba(0, 0, 0, 0.05)',
                shadow : false
            }
        } ]*/
    };

    this.cfg.highlighter = {
        show : false,
    };

    this.cfg.cursor = {
        show : false
    };
}

Regards
MH

[mhdata...@gmail.com]

Sorry forgot to add primefaces bundles jqplot v1.0.0b2_r1012 internally but all functions required for the above do seem to work except for the canvasOverlay post draw/replot.

Because of this reason I have explictity included the jqplot.canvasOverlay.min.js on my xhtml page so as to ensure no bugfix is lost.

Regards
MH