CODEWITHSUNDEEP
flot
Joel DeWitt
Joel DeWitt

Reputation: 1306

x-axis label in Flot

All I'm trying to do is label my x-axis:

function doPlot(position) {//Flot
  $.plot("#placeholder", [//data
    {
      data: theta_plot,
      label: "Angle (rad)",
      yaxis: 1,
      color: "red"
    },
    {
      data: omega_plot,
      label: "Angular Velocity (rad/sec)",
      yaxis: 2,
      color: "green"
    },
    {
      data: e_plot,
      label: "Energy (J)",
      yaxis: 3,
      color: "blue"
    }
  ],//options
    {
      xaxis: {
        axisLabel: "Time (sec)",
        axisLabelUseCanvas: true
      },
      yaxes: [
        { font: { color: "red" } },
        { font: { color: "green" } },
        { font: { color: "blue" } },
        { alignTicksWithAxis: position === "left" ? 1 : null }
      ],
      legend: {
        position: "nw",
        labelBoxBorderColor: null
      }
    }
    );
}
doPlot("left");

I don't understand why this doesn't work. This should be a no-brainer. All I could come up with is this, which is two years old. Do I still need the jquery.flot.axislabels.js library even now?

Here is a current draft of the plot in question. Any ideas?

Upvotes: 4

Views: 8427

Answers (2)

Mark
Mark

Reputation: 108567

If you don't want to use the plugin, you could add the label yourself after the plot is rendered with a bit of jquery:

// create label div
var label = $('<div>Four Score and Seven Years Ago</div>'); 
// intial positioning
label.css({'position': 'absolute', 'left': $('.flot-x-axis').width()/2 + $('.flot-x-axis .tickLabel:first').position()['left']/2, 'top': $('.flot-x-axis').height() + 5});
// append to plot
$('#placeholder').append(label); 
// final position adjustment (label won't have width till appended)
label.css('left', label.position()['left'] - label.width() / 2);

On your plot the result is:

enter image description here

Upvotes: 4

Raidri
Raidri

Reputation: 17560

Do I still need the jquery.flot.axislabels.js library even now?

Yes.

Simple as that, standard Flot has no axis label feature without plugin.

Upvotes: 5

Related Questions