Geek Answers Handbook

Save the fleet chart as an image

Hi, I am trying to save a fleet graph as an image (png / jpeg ..). I consider other issues that they advise using canvas.toDataURL ("image / png"); or canvas2image. However, I use the div for the fleet 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 to save this schedule? Thank you for your help.

+8
javascript html html5
source share
3 answers

You need to get the canvas that creates the fleet in your div. If you look at the documents , you will see that there is a function .getCanvas() . Or you can probably use jQuery to select the 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 can do it:

 var myCanvas = plot.getCanvas();

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

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

Or you can use canvas2image to do it all for you.

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

+8
source share

I made some corrections to the code. To save the 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;
+2
source share

I was not happy with any of these solutions due to the following issues:

  • My tag labels are not on canvas
  • My axis labels are not on canvas
  • Saving Firefox with canvas2image is confusing for the average user

My solution to this problem is to change the parameters for the chart so that they can be moved as soon as the canvas, then use canvas-to-blob to convert this chart to blob and then FileSaver to save the blob for the user, finally I replace the graph after saving the image.

The following JS plugins are required:

the 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 problems regarding the above solutions, you can try this.

+2
source share

More articles:


All Articles