Flot chart title option?

Does Flot have an option that can be set to give the chart a title? I'm not seeing one for the ove开发者_StackOverflow中文版rall chart, just for the axes.

But I might have missed something.

I do not think this option exists. It is pretty easy, though, to title the plot using regular HTML. Just wrap a div around your "placeholder" div and add the title text to that.

after drawing flot chart (plot function) fill canvas with text (jsFiddle). Advantage of my solution is that you can save chart as image containing title on it.

example:

var c=document.getElementsByTagName("canvas")[0];
var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);

1. You can use hooks for that. For instance use the overlay hook, and implement your overlay functionality in a separate OverlayHandler

   Here is an example, where the chartElement, chartDataand chartOptions are your HTML element and flot data and flot options, respectively.:

   var plotOverlayHandler = function(plot, cvs) {
     if(!plot) { return; }
     var cvsWidth = plot.width() / 2;
   
     var text = 'Flot chart-title!';
     cvs.font = "bold 16px Open Sans";
     cvs.fillStyle = "#666666";
     cvs.textAlign = 'center';
     cvs.fillText(text, cvsWidth, 30);
     return cvs;
   };
   
   var plot = $.plot(chartElement, chartData, chartOptions);
   plot.hooks.drawOverlay.push( plotOverlayHandler );
   

2. When exporting the canvas via the native toDataURL method, simply apply the OverlayHandler first. This allows for greater flexibility.

   var elCanvas = $('canvas.flot-base').first();
   var canvas = plotCanvasOverlay(elCanvas, elCanvas.get(0).getContext('2d'))
   var dataUrl = canvas.toDataURL('image/png');
   

Pioja's answer is indeed a great one. His jsFiddle shows the full details. It is important to have the following included in your options:

canvas: true,
grid: {
    margin: { top:50 }
}

This will then insert a nice chart title which can be included in the image if you export it.

Building on pioja's answer, the title can be set directly after the plot has been made with:

var plot = $.plot($("#"+PlotPlaceholder), data, options);

By using the getCanvas function:

var c = plot.getCanvas();

Now, just follow pioja's code to get:

var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);