Javascript variable closure loop (through plugin option)

Question

So I got jquery flot chart that uses a tick formatter to display my values correctly.

The graph could have multiple axes and to generate them correctly I used a loop that contains my formatter function.

for (var i = 0; i < axis.xaxis.length; i++) {
    var format = format || "HH:mm";

    var tickFormatter = function(val, axis) {
        return ValueToTime(Math.abs(val), format, true);
    };

    myAxes.xaxis.push({
        tickFormatter: tickFormatter,
        tickSize: tickSize,
        position: thisPos || "left"
    });
}

When the formatter is executed format is undefined therefore all my labels also appear as 'undefined'.

Is it possible to pass my variable to the function?

Please note: the function gets called inside the plugin which I wish not to edit as it is open source.

score 1 · Answer 1 · edited May 23 '17 at 12:07

Use another function to create the different tick formatters, this way you get a closure over each format string:

function getTickFormatter(format) {
    return function(val, axis) {
        return ValueToTime(Math.abs(val), format, true);
    };
}

for (var i = 0; i < axis.xaxis.length; i++) {
    var format = format || "HH:mm";

    var tickFormatter = getTickFormatter(format);

    myAxes.xaxis.push({
        tickFormatter: tickFormatter,
        tickSize: tickSize,
        position: thisPos || "left"
    });
}

For more information on closures see this questions:

score 0 · Accepted Answer · answered Dec 01 '15 at 06:33

So it seemed like the only answer suggested didn't work so well...

However what does work is passing my format variable through the plugin's options.

for (var i = 0; i < axis.xaxis.length; i++) {
    var format = format || "HH:mm";

    var tickFormatter = function (val, axis) {
        return ValueToTime(Math.abs(val), axis.options.format, true);
    };

    myAxes.xaxis.push({
        tickFormatter: tickFormatter,
        tickSize: tickSize,
        format: format,
        position: thisPos || "left"
    });
}

I do realise that flot has a 'time' format but the functionality of this is very limited, especially when my clients are extremely picky about the minute details .

Javascript variable closure loop (through plugin option)

2 Answers2