Having problems with jqPlot bar chart

Question

I\'m using jqPlot to create a bar graph, but I ran into a few problems.

Problem 1: The first and last bars on the graph are cut off. Only half of it is

Answer 1

Here is a simple hack that I used to show a margin.

I create a starting date and an ending date which are respectively one day before and one day after the contents I want to show.

For example if I want to show the month of January 2012

var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011
var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012

Then I declare my own DateTickFormatter where I will not printout these two dates.

$.jqplot.DateTickFormatter = function(format, val) {
        if (!format) {
            format = '%Y/%m/%d';
        }

        if(val==startingDate.getTime() || val==endingDate.getTime()){
            return "";
        }else{
            return $.jsDate.strftime(val, format);
        }
    };

Then in the xaxis I put the following options:

xaxis : {
      renderer:$.jqplot.DateAxisRenderer, 
      min:startingDate,
      max:endingDate,
      tickInterval:'1 day'
}

Answer 2

The DateAxisRenderer is really meant for line graphs, not bar graphs. When you combine it with bar graphs, it just doesn't work right. The idea / goal of the DateAxisRenderer is to make a linear / accurate time graph across a date/time. That way, if you miss a date entry, it will still be drawn to scale over time. Check their examples on the DateAxisRenderer here: http://www.jqplot.com/tests/date-axes.php

What you're wanting to use is the CategoryAxisRenderer. You can then just override / create your own tick label renderer and be good to go. Normally you wouldn't want to append extra empty items to an item, especially if they're empty, however, if you do, just append them to your data array.

Here's a jsfiddle doing what you want: http://jsfiddle.net/fordlover49/JWhmQ/

Note that you may want to look at the manage resources section to verify what files you need to reference (in addition to the jquery file).

Here's the javascript in case jsfiddle acts up:

$.jqplot.config.enablePlugins = true;
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];

// add a custom tick formatter, so that you don't have to include the entire date renderer library.
$.jqplot.DateTickFormatter = function(format, val) {
    // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle
    val = (new Date(val)).getTime();
    format = '%b&nbsp%#d'
    return $.jsDate.strftime(val, format);
};

function PlotChart(chartData, extraDays) {
    // if you want extra days, just append them to your chartData array.
    if (typeof extraDays === "number") {
        for (var i = 0; i < extraDays; i++) {
            var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date
            var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date
            chartData.push([newDate, 0]);
        }
    }

    var plot2 = $.jqplot('chart1', [chartData], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 1,
                barWidth: 50
            },
            pointLabels: {
                show: true
            }
        },
        axes: {
            xaxis: {
                pad: 1,
                // a factor multiplied by the data range on the axis to give the            
                renderer: $.jqplot.CategoryAxisRenderer,
                // renderer to use to draw the axis,     
                tickOptions: {
                    formatString: '%b %#d',
                    formatter: $.jqplot.DateTickFormatter
                }
            },
            yaxis: {
                tickOptions: {
                    formatString: '$%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
    });
}

PlotChart(chartData, 3);

Answer 3

From how you want your plot to look, you'll save yourself a lot of trouble if you switch to using a CategoryAxisRenderer instead of the DateAxisRenderer. The CategoryAxisRenderer is a lot better at displaying discreet groupings of data as opposed to a true time series.

var axisDates = ["Jan 19", "Jan 20", "Jan 21"]
var chartData = [2.61,5.00,6.00]

        $.jqplot.config.enablePlugins = true;
             var plot2 = $.jqplot('chart2', [chartData], {
                title: 'Some Plot',
                 seriesDefaults:{
                     renderer: $.jqplot.BarRenderer,
                     rendererOptions: {
                        barPadding: 1,
                        barMargin: 15,
                        barDirection: 'vertical',
                        barWidth: 50
                    }, 
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis: {                            
                            renderer:  $.jqplot.CategoryAxisRenderer,
                            ticks: axisDates
                    },
                    yaxis: {
                        tickOptions: {
                            formatString: '$%.2f'
                        }
                    }
                },
                highlighter: {
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: true
                }
            });