Im using jQuery Flot Plugin

I have 2 arrays :

1 data array in the length of 50 ~

1 labels array in the same length of data array and containing date strings.

Here is the flot options :

this._flowOptions = {
series: {
    legend : {
        show: true
    },
    lines: {
        show: true,
        fill: true,
        lineWidth: 2
    },
    points : {
        show : true
    },
    bars: {
        show: false
    }
},
xaxis : {
    show: true,
    position: "bottom",
    color: "black",
    tickColor: "black",
    font: "arial",
    min: 0,
    max: 30,
    tickFormatter: "string"
},
yaxis : {
    min : 0,
    tickDecimals: 0
},
grid: {
    show: true,
    hoverable : true
}

problem is when i want to display 50 labels with 50 data points in my flot it's not looking well. How can i attach a property to the labels array in-order to prevent showing couple of them.

single cell in the labels array looks like [{xValue,StringValue}] as it should be in order to set it right.

I tried using xaxis.tickFormatter option, but it didnt work for me, for some reason my function wasn't fired.

Any idea would be great.

EDIT

The main idea is that i would be able to display the x-axis value and y-axis value when hovering a data point of the graph, but it is necessary not to show all labels if possible, only those i will decide to show when providing the labels array.

Im using jQuery Flot Plugin

I have 2 arrays :

1 data array in the length of 50 ~

1 labels array in the same length of data array and containing date strings.

Here is the flot options :

this._flowOptions = {
series: {
    legend : {
        show: true
    },
    lines: {
        show: true,
        fill: true,
        lineWidth: 2
    },
    points : {
        show : true
    },
    bars: {
        show: false
    }
},
xaxis : {
    show: true,
    position: "bottom",
    color: "black",
    tickColor: "black",
    font: "arial",
    min: 0,
    max: 30,
    tickFormatter: "string"
},
yaxis : {
    min : 0,
    tickDecimals: 0
},
grid: {
    show: true,
    hoverable : true
}

problem is when i want to display 50 labels with 50 data points in my flot it's not looking well. How can i attach a property to the labels array in-order to prevent showing couple of them.

single cell in the labels array looks like [{xValue,StringValue}] as it should be in order to set it right.

I tried using xaxis.tickFormatter option, but it didnt work for me, for some reason my function wasn't fired.

Any idea would be great.

EDIT

The main idea is that i would be able to display the x-axis value and y-axis value when hovering a data point of the graph, but it is necessary not to show all labels if possible, only those i will decide to show when providing the labels array.

• javascript
• jquery
• flot

Share Improve this question Follow edited Dec 26, 2013 at 9:13 Pranav C Balan 115k2525 gold badges171171 silver badges195195 bronze badges asked Dec 26, 2013 at 9:08 Ori RefaelOri Refael 3,02633 gold badges4242 silver badges7171 bronze badges 1

• I have been struggling with that for hours! – user1940676 Commented Dec 26, 2013 at 11:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Ok, its impossible, but if someone is looking for it , i built it my self. copy the following changes

function drawAxisLabels() {

        $.each(allAxes(), function (_, axis) {
            if (!axis.show || axis.ticks.length == 0)
                return;

            var box = axis.box,
                legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
                layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
                font = axis.options.font || "flot-tick-label tickLabel",
                tick, x, y, halign, valign;

            surface.removeText(layer);

            for (var i = 0; i < axis.ticks.length; ++i) {

                tick = axis.ticks[i];
                if (!tick.label || tick.v < axis.min || tick.v > axis.max)
                    continue;

                if (axis.direction == "x") {
                    halign = "center";
                    x = plotOffset.left + axis.p2c(tick.v);
                    if (axis.position == "bottom") {
                        y = box.top + box.padding;
                    } else {
                        y = box.top + box.height - box.padding;
                        valign = "bottom";
                    }
                } else {
                    tick.IsDisplay = true;      //default to always show Y axis
                    valign = "middle";
                    y = plotOffset.top + axis.p2c(tick.v);
                    if (axis.position == "left") {
                        x = box.left + box.width - box.padding;
                        halign = "right";
                    } else {
                        x = box.left + box.padding;
                    }
                }

                surface.addText(layer, x, y, tick.label, font, null, null, halign, valign, tick.IsDisplay);
            }
        });
    }
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign, isDisplay ) {

    var info = this.getTextInfo(layer, text, font, angle, width),
        positions = info.positions;

    // Tweak the div's position to match the text's alignment

    if (halign == "center") {
        x -= info.width / 2;
    } else if (halign == "right") {
        x -= info.width;
    }

    if (valign == "middle") {
        y -= info.height / 2;
    } else if (valign == "bottom") {
        y -= info.height;
    }

    // Determine whether this text already exists at this position.
    // If so, mark it for inclusion in the next render pass.

    for (var i = 0, position; position = positions[i]; i++) {
        if (position.x == x && position.y == y) {
            position.active = true;
            return;
        }
    }

    // If the text doesn't exist at this position, create a new entry

    // For the very first position we'll re-use the original element,
    // while for subsequent ones we'll clone it.

    position = {
        active: true,
        rendered: false,
        element: positions.length ? info.element.clone() : info.element,
        x: x,
        y: y
    }

    positions.push(position);

    // Move the element to its final position within the container
    isDisplay = (isDisplay === undefined || isDisplay === null || isDisplay);    //we want to hide label only if provided with False
    position.element.css({
        top: Math.round(y),
        left: Math.round(x),
        'text-align': halign,   // In case the text wraps
        display :(!isDisplay) ?  'none' : 'inline-block'
    });
};

function setTicks(axis) {
        var oticks = axis.options.ticks, ticks = [];
        if (oticks == null || (typeof oticks == "number" && oticks > 0))
            ticks = axis.tickGenerator(axis);
        else if (oticks) {
            if ($.isFunction(oticks))
                // generate the ticks
                ticks = oticks(axis);
            else
                ticks = oticks;
        }

        // clean up/labelify the supplied ticks, copy them over
        var i, v;
        axis.ticks = [];
        for (i = 0; i < ticks.length; ++i) {
            var label = null;
            var IsDisplay = false;
            var t = ticks[i];
            if (typeof t == "object") {
                v = +t[0];
                if (t.length > 1) {
                    label = t[1];
                    IsDisplay = t[2];
                }


            }
            else
                v = +t;
            if (label == null)
                label = axis.tickFormatter(v, axis);
            if (!isNaN(v))
                axis.ticks.push({ v: v, label: label, IsDisplay : IsDisplay });
        }
    }

and now , when you set the ticks you just can do something like options.xaxis.ticks.push([i, labels[i], IsDisplay]); //IsDisplay is if you want to show or not.

You want to filter your ticks based on a value in the array? Seems like overkill to modify the source when a simple runtime filter is possible. Given these axis ticks:

var tickArray = [[0, "Zero", true],
                 [5, "Five", false],
                 [10, "Ten", true],
                 [15, "Fifteen", true]];

In your xaxis ticks option, just filter them those false ones out....

xaxis : {
    ticks: $(tickArray).filter(function(i){return this[2] == true}) // a little jquery magic to filter the arrays
},

Fiddle here.

As described in the Customizing the Axes section of the docs, tickFormatter accepts a function; "string" is not going to work. You also need to call setupGrid and draw to redraw the plot when you want the ticks to change.

But your basic idea is correct; you can either use tickFormatter or set the ticks array directly. Modifying the Flot source is not necessary.