X & Y axis titles & Chart title

[GoogleCodeExporter]

Hi 

I am using flot v.0.6 with IE7& looking for support of X & Y axis titles 
along with chart title in Flot.

I have attached the sample screenshot.

Thanks,
Pushkar

Original issue reported on code.google.com by pushkarg...@gmail.com on 9 May 2010 at 5:36

• Merged into: #42

Attachments:

• advanced-titles.png

[GoogleCodeExporter]

Hi,

You must add two lines in function insertLabels (marked by //++):

function insertLabels() {

    placeholder.find(".tickLabels").remove();

    var html = ['<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">'];

    //++ html.push('<div style="position:absolute;left:-50px;top:250px" class="tickLabel vertical">Y Axis Text</div>');

    function addLabels(axis, labelGenerator) {

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

            if (!tick.label || tick.v < axis.min || tick.v > axis.max)
                continue;

            html.push(labelGenerator(tick, axis));
        }
    }

    var margin = options.grid.labelMargin + options.grid.borderWidth;

    addLabels(axes.xaxis, function (tick, axis) {
        return '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel tickLabelX">' + tick.label + "</div>";
    });

    addLabels(axes.yaxis, function (tick, axis) {
        return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;right:' + (plotOffset.right + plotWidth + margin) + 'px;width:' + axis.labelWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
    });

    addLabels(axes.x2axis, function (tick, axis) {
        return '<div style="position:absolute;bottom:' + (plotOffset.bottom + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
    });

    addLabels(axes.y2axis, function (tick, axis) {
        return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;left:' + (plotOffset.left + plotWidth + margin) +'px;width:' + axis.labelWidth + 'px;text-align:left" class="tickLabel">' + tick.label + "</div>";
    });

    //++ html.push('<div style="position:absolute;left:400px;bottom:-'+(plotOffset.top + margin + (document.all?15:0))+'px;text-align:center" class="tickLabel">X Axis Text</div>');
    html.push('</div>');

    placeholder.append(html.join(""));

}

where vertical in css is:

.vertical{
    -o-transform:rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

you also must change top and left values according to tour needs

Bye
Pepotex

Original comment by pepo...@gmail.com on 10 Jun 2010 at 11:51

[GoogleCodeExporter]

how you put the red numbers?

Original comment by prettyki...@gmail.com on 9 Jul 2010 at 1:32

[GoogleCodeExporter]

Original comment by olau%iol...@gtempaccount.com on 13 Dec 2010 at 4:07

• Changed state: Duplicate

[GoogleCodeExporter]

Hi Pepotex,
I have tried this but when i call the insertLabels() function it give error 
saying axes is undefined in first addLabels(axes.xaxis, function (tick, axis) { 
line.
Please do help

Original comment by param...@gmail.com on 14 Oct 2011 at 3:59

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 7 May 2012 at 11:29