Flot chart title option?

Question

Does Flot have an option that can be set to give the chart a title? I'm not seeing one for the overall chart, just for the axes.

But I might have missed something.

Tigress

Answer 1

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.

Edi

Answer 2

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);

Ouellette

This doesn't work when there are multiple charts on the same page. – Wound

It also doesn't work with retina displays. You need to add the lines: if (window.devicePixelRatio > 1) { cx = cx/window.devicePixelRatio; } under the "var cx" line to adjust for this. – Awoke

Answer 3

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');
   

Biz

plot.width() is not reliable, it will be shooter when yaxis is large. Use cvs.canvas.width instead, it will make title fixed in center position. – Desdemona

Answer 4

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.

Topsyturvydom

Answer 5

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);

Skite