How to use Flot canvas plugin

Question

I am building a Rails 3.2.11 app with Flot. I want to render my Flot charts in PDFs using Prawn. My Flot charts render in the browser fine. I can create Prawn PDFs fine (though not with chart images yet).

I want to use the Flot canvas plugin to render my axes, etc. on the canvas so they are included when I Ajax the image data to the server using the .getCanvas() and .toDataURL() methods, but I can’t seem to get it to work.

I am using jquery.flot.min.js 0.8.0 and jquery.flot.canvas.min.js (no version indicated). In the Chrome console I see that both are loading.

My Coffeescript looks like this:

temp_plot = $.plot $("#barchart"), [
    data: $("#barchart").data("bardata")
    bars:
      show: true
      barWidth: (365/12)*24*60*60*1000*0.8
      align: 'center'
  ],
    xaxis:
      mode: "time"
      timeformat: "%b"
      tickSize: [1, "month"]
    yaxis:
      position: 'right'
      labelWidth: '40'       
      reserveSpace: true
    canvas: true

barchart_canvas = temp_plot.getCanvas()

I am able to see the Ajax payload and it is indeed the Flot chart canvas, just without the axes, etc. I appreciate any advice. Thanks!

Just to be extra clear, code as Javascript looks like this:

var barchart_canvas, temp_plot;

temp_plot = $.plot($("#barchart"), [
  {
    data: $("#barchart").data("bardata"),
    bars: {
      show: true,
      barWidth: (365 / 12) * 24 * 60 * 60 * 1000 * 0.8,
      align: 'center'
    }
  }
], {
  xaxis: {
    mode: "time",
    timeformat: "%b",
    tickSize: [1, "month"]
  },
  yaxis: {
    position: 'right',
    labelWidth: '40',
    reserveSpace: true
  },
  canvas: true
});

barchart_canvas = temp_plot.getCanvas();

UPDATE - SUCCESS

I updated Flot to 0.8.1 and included the jquery.flot.canvas.js file that came in the 0.8.1 .zip archive. (I was getting some strange rendering behavior using plugins from Flot 0.8.0 with jquery.flot.js 0.8.1, so watch out for that.)

Now my axes render on the canvas. Great! My thanks to the Flot gods!

DNS DNS · Accepted Answer · 2013-05-23T20:47:44

Your options look okay, assuming (I'm not familiar with CoffeeScript) that last bit is supposed to be missing curly braces.

Your Flot version can't be 1.1, though; the latest is 0.8.1, and jquery.flot.canvas.min.js was introduced in 0.8.0. So you're using either the wrong version, or some Flot-derivative that may not support the canvas plugin.

Note that the canvas plugin currently only affects the axes; the legend is still rendered in HTML. Complete support for rendering everything on canvas will come in 0.9.

How to use Flot canvas plugin

1 Answers