X-axis label in Flot

Question

All I'm trying to do is mark 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 do not understand why this does not work. It should be no problem. All I could think of was this one , which is two years old. Do I still need a library jquery.flot.axislabels.js?

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

Answer 1

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

Yes.

A simple, standard standard fleet does not have an axis label function without a plugin.

Answer 2

If you do not want to use the plugin, you can add a shortcut yourself after the plot has been processed using 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 chart, the result is: