jQuery Flot skipping x-axis values

Question

I read through most of the documentation of Flot, but didn't really find anything relevant.

Currently my flot graph looks as following:

and since there is no data in the middle row, I would love to be able to hide it, but still show the data from the first and last 2 x-axis columns.

The way I define the x-axis values is as following:

var options = [{[1, '1-1-2013'], [2, '1-4-2013'], [3, '1-7-2013'], 
[4, '1-10-2013'], [5, '1-1-2014']}];

and that works fine, since I plot on the data values according to the first number of each element, which is a date Id of some sort.

To explain it better, I would like my graph to look rougly like this instead:

Answer 1

You could manually change your data series to omit all empty values, but then you have to also specify your ticks (and labels) manually.

For example if you data is something like

data = [
    ['1-1-2013', 2.5],
    ['1-2-2013', 2.0],
    ['1-3-2013', 0.0],
    ['1-4-2013', 2.2]
];

your data would then change to

data = [
    [0, 2.5],
    [1, 2.0],
    [2, 2.2]
];

and your x-axis ticks would be

ticks = [
    [0, '1-1-2013'],
    [1, '1-2-2013'],
    [2, '1-4-2013']
];

The possibly code for this:

var newdata = [];
var newticks = [];

function changeData(data) {
    $.each(data, function(index, element) {
        if (element[1] != 0.0) {
            newdata.push([ newdata.length, element[1] ]);
            newticks.push([ newticks.length, element[0] ]);
        }
    });
}

Answer 2

You either can use tick for-matter function to return null if value is zero else while specifying tick array, pass empty string for corresponding value.

var ticks = [
          [1, '1-1-2013'], 
          [2, '1-4-2013'],
          [3, ''], 
          [4, '1-10-2013'], 
          [5, '1-1-2014']
];

Or

xaxis: {
     tickFormatter: function(v, axis) {
        if(v != 0) {
            return "<span class='axisLabel'>" + v + "%</span>";
        } else {
            return "";
        }
}