Save flot graph as image

Question

Hi I am trying to save flot graph as image (png/jpeg..). I look into other questions they advice to use canvas.toDataURL("image/png"); or canvas2image. However I am using div for flot as follows.

<div id="graph"> <div id="graphc" style="width: 600px;height:153px; top: 560px; left:120px; auto;"> </div> </div>

plot= $.plot($("#graph #graphc"),
           [ {data: data5 ],
           xaxis: { mode: "time",minTickSize: [10, "second"],
            timeformat: "%0H:%0M" } } );

How can I save this graph? Thanks for your help.

Answer 1

You need to get the canvas that flot creates within your div. If you look at the docs you'll see there is a .getCanvas() function. Or you could probably use jQuery to select a canvas inside your div.

Once you have the canvas, you can use .toDataURL or any other technique.

So you have this:

plot= $.plot($("#graph #graphc"),
       [ {data: data5 ],
       xaxis: { mode: "time",minTickSize: [10, "second"],
        timeformat: "%0H:%0M" } } );

And then you should be able to do this:

var myCanvas = plot.getCanvas();

To actually download a file, you would need to use .toDataURL(), then replace image/png mime type with image/octet-stream and then set your document.location.href to your string:

var image = myCanvas.toDataURL();
image = image.replace("image/png","image/octet-stream");
document.location.href=image;

Or you can use canvas2image to do all of this for you.

Edit: The only problem with this is, in FireFox at least, the image will be saved with a random looking name and a .part extension. Changing it to .png will reveal that it is the actual image. Not sure if there's a good way to convince the browser to save it with a friendly name, or at least one with the correct extension.

Answer 2

I wasn't happy with any of these solutions due to the following problems:

1. My tick labels are not on the canvas
2. My axis labels are not on the canvas
3. Firefox saving with canvas2image is confusing for a normal user

My solution to this problem is to change the options for the chart to replot as canvas only chart, then use canvas-to-blob to convert this chart to a blob, then FileSaver to save the blob for the user, finally I replot the chart after saving the image.

Requires the following JS plugins:

• jquery.flot.canvas
• jquery.flot.axislabels
• FileSaver
• canvas-to-blob

Code:

 //set data array, and options 
$('a.download_as_img').click(function(e){
  e.preventDefault();
  saveAsImage(graph_selector, data, options, xaxis,yaxis)
})

function saveAsImage(graph_selector, data_arr, options, xaxis, yaxis){
  var canvas = replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis);
  var title = 'chart';// or some jquery way to get your title or w/e
  canvas.toBlob(function(blob) {
    saveAs(blob, title + ".png");
  });

  //convert back to normal
  var plot = $.plot(graph_selector, data_arr, options);
}

//helper for saveAsImage
// returns canvas
function replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis){
  //change canvas options to true and replot
  var canvas_options = {
    canvas: true,
    axisLabels: {
        show: true
    },
    xaxes: [
    {
        axisLabelUseCanvas: true,
        axisLabel: xaxis
    }
    ],
    yaxes: [
    {
        axisLabelUseCanvas: true,
        position: 'left',
        axisLabel: yaxis
    }
    ]
    }
    var merged_opts = {}
    $.extend(merged_opts, options, canvas_options);  //done this way to ensure canvas_options take priority
    var plot = $.plot(graph_selector, data_arr, merged_opts);
    return plot.getCanvas();
}

Perhaps if you have similar concerns about the above solution(s), you can try this one.

Answer 3

I have made some corrections at code. In order to save graph locally you can use the code below.

var plot= $.plot($("#graph #graphc"),
[ {data: data5 ],
xaxis: { mode: "time",minTickSize: [10, "second"],
timeformat: "%0H:%0M" } } );

var myCanvas = plot.getCanvas();
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  /// here is the most important part because if you dont replace you will get a DOM 18 exception.
document.location.href=image;