Saving fleet map for image or pdf

Question

I try to save the fleet diagram for an image and end up as a pdf, but cannot figure out how to do this.

On the net, I see what I can do

canvas.toDataURL("image/png") 

But the problem is how can I get the canvas first, examples say use

 document.getElementById("canvas"); 

but for my code I use a div with id = "placeholder" (for all fleet examples), and nothing is tagged with canvas in my html, and this does not seem to work. My javascript for the fleet looks like

 $.plot($("#placeholder"), [ d1, d2, d3 ], { series: { lines: { show:false }, bars: { show: true, barWidth: 0.6, horizontal:true } } }); 

Does anyone have a working example that displays a fleet chart, and then there is a button for saving / viewing as an image or pdf?

There are several questions that already answer this, but as far as I can tell, I miss some key details - I apologize for pushing this.

Answer 1

You will not like the flot v 0.7 solution for this. These labels are not on the canvas, they are the HTML elements that are located around it. Therefore, forget that they are written in your image, this will not happen with the fleet, as it is.

If you are really interested, you need to get the latest version of the fleet from github to write labels on canvas (which means that you cannot stylize them outside the basics - that is, without CSS and not create links), and then you will be fine ( and don't forget to see the new API.txt ). If you need to get a canvas, the fleet provides a method for this:

 var plot = $.plot($("#placeholder"), [ d1, d2, d3 ], { series: { lines: { show:false }, bars: { show: true, barWidth: 0.6, horizontal:true } } }); var ctx = plot.getCanvas(); //do whatever with ctx.toDataURL("image/png") 

The only change I really suggested was to upgrade the fleet to the latest (unreleased) version.

Answer 2

I did this using a third-party application called cutyCapt http://cutycapt.sourceforge.net/ This takes snapshots of web pages. So I had to create a dummy web page containing the fleet image, and then load the website into this function:

 public bool FlotToImage(string website, string destinationFile) { string cutyCaptPath = ConfigurationManager.AppSettings["CutyCaptPath"]; if (!File.Exists(cutyCaptPath))//check if found cutyCapt application { return false; } ProcessStartInfo startInfo = new ProcessStartInfo(); startInfo.FileName = cutyCaptPath; // path to executable file startInfo.Arguments = " --url=" + website + " --out=" + destinationFile;// the arguments startInfo.CreateNoWindow = true; //optional startInfo.WindowStyle = ProcessWindowStyle.Hidden; //optional Process process =Process.Start(startInfo); process.WaitForExit(); return true; } 

Hope this helps someone. This actually took some time, since I also had to implement a bypass to the dummy website using the fleet.