markrcote/flot-axislabels

Axis Labels Plugin for Flot. This repo is unmaintained in part due to flot being in a similar situation.

flot-axislabels: Axis Labels plugin for flot

Originally written by Xuan Luo. Maintained by Mark Cote.

Contributions:

• Xuan Luo
• Mark Cote
• stdexcept
• Clemens Stolle
• Michael Haddon
• andig
• Alex Pinkney

flot-axislabels provides flot with the ability to label axes. It supports any number of axes. It can render the labels with CSS transforms, in canvas, or with traditional CSS positioning ("HTML" mode). flot-axislabels attempts a graceful fallback from CSS to canvas to HTML if some modes are not supported. You can also force a particular lesser mode (canvas or HTML).

In both CSS and canvas modes, the y-axis labels are rotated to face the graph (90 degrees counter-clockwise for left-hand labels, and 90 degrees clockwise for right-hand labels). In HTML mode, y-axis labels are left horizontal (warning: this takes up a lot of space).

In CSS and HTML modes, each axis label belongs to the classes "axisLabels" and "[axisName]Label" (e.g. .xaxisLabel, .y2axisLabel, etc). You can use standard CSS properties to customize their appearance.

In canvas mode, you can set font size, family, and colour through flot options (see below).

Example

$(function () {
    var options = {
        axisLabels: {
            show: true
        },
        xaxes: [{
            axisLabel: 'foo',
        }],
        yaxes: [{
            position: 'left',
            axisLabel: 'bar',
        }, {
            position: 'right',
            axisLabel: 'bleem'
        }]
    };

    $.plot($("#placeholder"),
           yourData,
           options);
    );
});

Usage

flot-axislabel adds an axisLabels object to the global options object. It supports one option:

• show (bool): display all axis labels (default: true)

There are also several options added to the axis objects. The two main ones are

• axisLabel (string): the text you want displayed as the label
• axisLabelPadding (int): padding, in pixels, between the tick labels and the axis label (default: 2)

By default, if supported, flot-axislabels uses CSS transforms. You can force either canvas or HTML mode by setting axisLabelUseCanvas or axisLabelUseHtml, respectively, to true.

Canvas mode supports several other options:

• axisLabelFontSizePixels (int): the size, in pixels, of the font (default: 14)
• axisLabelFontFamily (string): the font family of the font (default: sans-serif)
• axisLabelColour (string): the font colour (default: black)

Compatibility

flot-axislabels should work with recent versions of Firefox, Chrome, Opera, and Safari. It also works with IE 8 and 9. The canvas option does not seem to work with IE 8, even with excanvas.

License

flot-axislabels is released under the terms of the MIT License.

flot-axislabels's Issues

Multiple axes only work when redrawing with $.plot

If you try to use multiple axes with labels, where some axes are not being shown, then using the setData/setupGrid/draw method of redrawing the plot fails. I believe the problem lies within the "hack" of the secondPass. When going through the draw method after an axis has gone from not show to show, the first pass section doesn't get re-evaluated and thus it still thinks those axes that are showing now are still not showing.

Not sure if there is going to be an easy fix for this... Seems like it kind of needs the separation between the axes drawing and the plot drawing as your hack comment states...

All in all this is at least somewhat usable if you just redraw by calling the $.plot again.

Please include a bower.json file

multiple axes label fuzzy

With multiple yaxes the labels are fuzzy.

You can see the first label is sharp, but the ohters are fuzzy

My plot options:

yaxes: [ { position: 'left', axisLabel: 'test' }, { position: 'left', axisLabel: 'test2' } ],

Typo in README

Hi,

I found important typos in the README: xaxes and yaxes should be xaxis and yaxis instead. They are important because they break functionality.

add a LICENSE

Title gets disappeared when the graph is loaded

Hallo All,

I am using the latest version of flot-axislabels. I have set the xaxes and yaxes title and when I load the graph, the tick labels overrides the axistitle. The title gets disappeared after the graph is loaded. Can somebody guide me to fix this problem?

Thanks
Krishnaprasd

Wrong positionning of labels with CssTransformAxisLabel

In method "CssTransformAxisLabelcalculateOffset", the label isn't created yet so it has no size. Therefore, the offset calculation are wrong and the label position is wrong. On the Y axis, this result in the label being over the graph. On the X axis, just a bit off on the right.

superscript and subscript in labels

It's convenient to be able to write units properly. For example m.s-2 could be set as m.s^-2, but it appears as the rendering ignores the html tags.

Thanks!

Remove inline css color from CssTransformAxisLabel.prototype.draw

Edit: see issue #23

Internet Explorer 8 throws "Expected identifier" when loading

Have you tested this in IE8 and is it expected to work? I get "Expected identifier" error. I think this is releated to the use of "delete" which maybe is reserved in IE8. I replaced .delete with .dodelete in 3 places and it seems to load fine after that.

Enhancement: draw label below axis?

I'd like to draw physical units below the actual y-axis so they don't consume any additional vertical space (units don't consume much horizontal space either). This should prevent the axis labels beside the axis from consuming too much screen estate in horizontal direction when using multiple axes.

Is there an easy way to achieve this?

Verify flot-axislabels 2.0 is MIT for all contributors

Hi Mark Cote, Xuan Luo, stdexcept, Clemens Stolle and Michael Haddon,

My name is Matthew Ritzman. We would like to use your flot-axislabels plugin for a product we are developing. Due to the fact the original version of flot-axislabels was licensed as GPLv3, our legal team requires us to confirm with you and all the contributors in writing that you are all Ok that the license is MIT for flot-axislabels. Thank you for your time.

Regards,
Matthew Ritzman

Combined HTML/Canvas rendering

It would be great if you could use a combined mode, in which the x axis uses html and the y axis uses canvas if CSS transforms are unavailable

chart label doesn't look right after applying html2canvas

The flot-axislabels library make the chart label look very nice. Thank you!

However, when I was using html2canvas library (a big thank-you!) to save a div to an image, it's almost what I want, but the y-axis label was not done right. See the two graphs. It could be a problem on html2canvas, just wonder there is a fix on flot-axislabels side? Appreciate your help!

Here is my code:
$('#theChart').html2canvas({
onrendered: function (canvas) {
z = canvas.toDataURL("image/png");
myWindow = window.open('', 'header', 'menubar=0', 'toolbar=0');
myWindow.document.write('Right click to save image
');
}
});

axisLabelColour => axisLabelColor

"Color" is more frequently used.

Would it be possible to merge in the CSS3 transforms patch?

Would it be possible to merge in the CSS3 transforms patch?

From this commit: dschwen@cb1df40

Avoid drawing twice

The current plugin behavior that causes draw to be called twice is documented in the source code as a hack due to flot not having a hook in a suitable place.

It seems like that should be listed as an issue with the plugin even if would require changes to flot to fix.

Additionally it would be useful to document the current behavior and the performance implications it has as I only discovered what was happening when debugging a callback that was being called twice and discovered the comment in the plugin code.

plot title + label color support

title and label color support will be useful.

Thanks

Drawing at Half Pixel Positions Causes Blurring

The labels tend to show up pretty blurry when they are drawn on half-pixel positions. Consider rounding the transitions so that they're drawn on full-pixel increments.

Axis Labels show up in a separate legend block instead of around the graph

For some reason my axis labels show up in the separate legend block and not left/right of the graph...
Is this a known issue?

yaxes : [{
            tickFormatter : function(val, axis)
            {

                return Math.round(val * 100) / 100 + ' ' + axisUnit[1];
            },
            tickColor : "#6A6A6A",
            color : axisColor[1],
            position : "left",
            min : arrayMin(axisValues[1]),
            max : arrayMax(axisValues[1]),
            labelWidth : 60,
            axisLabel : "WRONG PLACE",
            axisLabelUseCanvas : true,
            axisLabelFontSizePixels : 40,
            axisLabelPadding : -15,
            axisLabelColour : axisColor[1]
        }

Position axis labels correctly when axis itself is not shown

This is a bit tricky, but it took me a while to debug. Basically, I was turning off the xaxis (with show: false) because I didn't want the axis ticks or grid marks to be shown. However, this causes flot to ignore the position argument, so the axis label is shown in the top left instead of at the bottom as expected.

It may or be not be in scope for you to change this behavior within your plugin. If it's not, you may want to add a note to your usage instructions to point out this detail.

For the record, here are the axis options that I set which fixed the problem by hiding the xaxis ticks and grid lines without using show: false:

position: "bottom",
show: true,
tickLength: 0,
labelHeight: 0,
tickFormatter: function() { return ""; }

responsive labels

Hi

Is there any plans to make the labels responsive? So they change depending on screen size?

Thanks

Turning axis on and off dynamically

When turning axis on and off dynamically via the plot.draw() method;

plot.getOptions().yaxes[key].show = true;

fails on the multiple passes because;

axesLabels[axisName] is undefined (line 449)

One data set, multiple axis labels

Hi,

Is it possible to have multiple axis labels for a single data set?

For example, I have a simple line graph, but would like to show a metric y-axis label on the left, and an imperial y-axis label on the right.

Thanks

Can't set tickColor to white when using yaxis label on line graph

When I don't have the yaxis label set to display anything, I can use:

xaxis: {
  tickColor: "#ffffff"
}

to make the xaxis lines white so that they hide in the background. However, once I have set:

yaxis: {
  axisLabel: "My Label"
}

it overrides the tick color and sets it to gray. It also makes the tick lines wider.

I've only noticed this problem when I'm displaying data series as lines. My bar graph doesn't have this issue.

yaxis label is cut off (or partially outside of the drawing area)

Using a y axisLabel while drawing on canvas causes trouble for me. Characters are cut off,
that is a "O" will look more like an "U"

Add Chart Title Support

As well as creating lables for axis it would be useful to be able to add a title to the graph.

Would this be in the scope of flot-axislales?

add a screenshot

Does not work with new multiples axis setup

Now that flot accepts multiples axis (not just 2 axes as before but n axes, the plugin only works for the first 2 axes, not the others.

Any chance that you will publish a revised version?

...
$(function () {
var data = [
{ data: [[1, 3], [2, 8], [3, 5], [7, 13]], bars: { show: true}, xaxis: 1, yaxis:1},
{ data: [[3, 3], [6, 8], [8, 5], [12, 13]], xaxis: 1, yaxis:2 },
{ data: [[5, 12], [7, 12], null, [7, 2.5], [12, 2.5]], xaxis: 1, yaxis:3 },
{ data: [[2, 3], [7, 8], [9, 5], [10, 13], [11,12]], xaxis: 1, yaxis: 4 }
];

$.plot($("#placeholder"),
                  data,
                  {
                      xaxes: [
                          { position: 'bottom' }
                      ],
                      yaxes: [
                          { position: 'left', axisLabel: 'Hourly Rain (mm)', axisLabelPadding: 10, axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Arial' },
                          { position: 'right', axisLabel: 'Temperature (C)', axisLabelPadding: 20, axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Arial' },
                          { position: 'right', axisLabel: 'Relative Humidity (%)', axisLabelPadding: 20, axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Arial' },
                          { position: 'right',axisLabel: 'Pressure (hPa)', axisLabelPadding: 20, axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Arial' }
                      ],
                      grid: { hoverable: true, show: true }
                  });

});
...

flot-axislabels fails to load in IE10

The plugin fails to load in IE10 due to using a reserved word ("delete") as a function name in AxisLabel and HtmlAxisLabel's prototypes.