Axis Background Grid

[volomike]

Can you suggest a way to add an axis background grid behind the bars?

Here's a simple strategy I was thinking of...

Do you know how you can generate a GIF with inline data URLs? Documentation is here:
http://www.websiteoptimization.com/speed/tweak/inline-images/

Therefore, you could create a repeating image pattern and place it behind the chart's main DIV. You could then provide an option where one selects the pixel height of the lines, or use the word 'auto' to have it decide the most optimal pixel height. From there, it would use the inline data URL technique to create a GIF and repeat it behind the chart.

The only catch is that this won't work with IE6 and IE7, so you'd have to caveat and say that this feature is not available for those. Works on IE8+, however. (And, of course, works in all browsers besides IE since the days of IE7's release.)

[volomike]

If you achieve the above, then you could provide an option boolean to slightly reduce the opacity of the bars (use the cross-platform route on that) so that the grid lines underneath would show through.

Then, to make this even killer, use cross-platform box-shadow (another option boolean) to add a slight shadow behind the bars.

[volomike]

Here is an example:

<script type="text/javascript">

jQuery(document).ready(function($){

  graphLast12 = new Array(
    [15,'Jan'],
    [5015,'Feb'],
    [5503,'Mar'],
    [4983,'Apr'],
    [5352,'May'],
    [5870,'Jun']      
  );

  $('#last12').jqBarGraph({
    data: graphLast12,
    width:500,
    colors: ['#122A47','#1B3E69'],
    color: '#1A2944',
    barSpace: 5,
    title: '<h3>Number of visitors per month</h3>'
  });

  $('#last12').css('background','transparent url(data:image/gif;base64,R0lGODlhAQAUAOcwAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH5BAEKAP8ALAAAAAABABQAAAgLAP8JHEiwIMFZAQEAOw==) bottom left repeat');
  $('#last12').children().css({
    'bottom':'-16px'
  });
  $('#last12 .graphBarlast12').animate({opacity:0.9},0);

});

</script>

[volomike]

I was able to create this into an addGrid() method on your object by implementing the following code at the bottom of jqBarGraph.1.1.min.js.

To call it, simply tack on ".addGrid()" after doing .jqBarGraph({your-options-go-here}). Note that it just creates a 10px grid. However, I could have made it swap the inline data image based on options passed to addGrid(), providing a 20px grid, and so on. Also, I could adjust the following code so that it doesn't do anything on IE if less than IE8.

(function(old) {
  jQuery.fn.jqBarGraph = function() {
    var gThis = this;
    old.apply(this, arguments);  // call the actual function

    // return something
    return {
      addGrid: function() {
        var $ = jQuery;
        var o = gThis;
        $(o).css('background','transparent url(data:image/gif;base64,R0lGODlhAQAUAOcwAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH5BAEKAP8ALAAAAAABABQAAAgLAP8JHEiwIMFZAQEAOw==) bottom left repeat');
        $(o).children().css({
          'bottom':'-16px'
        });
        var sName = o.attr('id');
        $('#' + sName + ' .graphBar' + sName).animate({opacity:0.9},100).css({
          'border':'1px outset rgba(0,0,0,0.7)',
          'border-top':'1px solid rgba(200,200,200,0.6)',
          'border-left':'1px solid rgba(200,200,200,0.6)',
          'border-bottom':'0px',
          '-moz-box-shadow':'2px 2px 2px rgba(100,100,100,0.5)',
          '-webkit-box-shadow':'2px 2px 2px rgba(100,100,100,0.5)',
          'box-shadow':'2px 2px 2px rgba(100,100,100,0.5)',
        });
        return o;
      }
    };
  };

  jQuery.fn.jqBarGraph.defaults = old.defaults;  // restore properties
})(jQuery.fn.jqBarGraph);