1

I've been tinkering with a jqplot graph where the grid lines are on top (or in front depending how you look at it) of the graph as opposed to the default background area. I've made several attempts to get it to overlay the grid using the z-index. However, each attempt renders the entire graph non-functional and I receive no error for some unknown reason.

I'm working with a stacked bar chart that actually fills the entire grid, so I don't get to see any of the grid lines, they are all hidden beneath (or behind) the graph.

Here is the code:

<script type="text/javascript" language="javascript">
   $.jqplot.config.enablePlugins = true;

   var plot;
   var data1 = [];
   var data2 = [];
   var index = 0;
   var num = 0;
   var delta = 0;

   $(document).ready(function(){
      for (i=0; i<100; i++) {
         num = getRandomNumber();
         delta = 100 - num;
         index++;
         data1.push([ index, num]);
         data2.push([ index, delta]);
      }

      plot = $.jqplot('graph', [data1, data2],{
                title: 'my title',
                animate: true,
                stackSeries: true,
                seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        rendererOptions: { highlightMouseDown: true },
                        pointLabels: {show: true}
                },
                series: [ {label: 'one'}, {label: 'two'} ],
                seriesColors:['#ff0000', '#0000ff'],
                legend: {
                        show: true,
                        location: 'e',
                        placement: 'outsideGrid'
                },
                grid: {
                        gridLineColor: '#333333',
                        borderWidth: 0
                },
                axesDefaults: {
                        pad: 0,
                        padMin: 0
                },
                axes: {
                        xaxis: {
                                showTicks: false,
                                pad: 0,
                                padMin: 0,
                                rendererOptions: { forceTickAt0: true, forceTickAt100: true }
                        },
                        yaxis: {
                                pad: 0,
                                padMin: 0,
                                rendererOptions: { forceTickAt0: true, forceTickAt100: true }
                        }
                }
      });
   });

   getRandomNumber = function(){
                return Math.floor(Math.random()* 100);
   };
  </script>

Anyone run into this requirement and know how to get the grid lines to show up on top of the graph? Thanks

user1483983
  • 11
  • 3

1 Answers1

2

With a little DOM manipulation you can do this BUT you need to make sure to set the grid background color transparent for it to work. After your plot call:

gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);​

Here's a sample fiddle.

Mark
  • 106,305
  • 20
  • 172
  • 230