Geek Answers Handbook

How to print a fleet chart

Can any body help me learn how to print a dynamic graph as an example generated by the fleet. I tried this, but it prints the whole page, but I need only part of the graph.

function printGraph(){ $('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) { //Canvas2Image.saveAsPNG(document.getElementById('placeholder')); //canvas.toDataURL("image/png"); window.print('placeholder'); }); }
+8
javascript flot
source share
5 answers

This article describes how to copy canvas into a normal img , which can then be easily printed or saved as an image.

An important part:

 img.src = canvas.toDataURL();

See the response from Ignacio Correia for more details.

+6
source share

Launch a new window only with a chart or with alternative css, similar to what Google maps do when printed. A.

+4
source share

Attention, this message has been edited, see all possible solutions

From what I was looking for and found that you have only 2 options, either try printing CANVAS or EXPORT as the image, or my idea is to separate the image from the content and try to print only the graph. Here is the Flot FAQ on how you can export the image: Question No. 3

Q: Can I export a chart?

A: you can capture the image created by the canvas element used by the fleet as PNG or JPEG (do not forget to set the background). Please note that this does not include anything that is not painted on the canvas (for example, a legend). And this does not work with excanvas, which uses VML, but you can try Flashcanvas.

SOLUTION 1 - Export Image:

Export image to computer and then print it

SOLUTION 2 - FLOT to CANVAS:

SOLUTION 3 - my own modal printing

This is far from the best solution, but it works, here is a demo:

Steps

  • Download Fancybox
  • Open the chart with INLINE FRAME
  • PRINT on callback after showing
  • Reload page after printing to redo page

Here is the code you need:

 $(document).ready(function() { $(".various").fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none', afterShow : function() { alert('You are about to print the graph!'); window.print(); }, afterClose : function() { alert('We need to refresh the page!'); window.location.reload(false); } }); });

Extra This related question is about exporting Flot to PDF, I don’t know if you might be interested in: Exporting the fleet to PDF

EDITOR - WORKING SOLUTION The following is a working demo of how to export an image: FLOT to IMAGE

+2
source share

You can hide parts of the page that you do not want to print using a separate stylesheet with media="print" . It will also allow you to customize the final printed result of the graph itself, for example, make it larger.

+2
source share

Found a solution using html2canvas . First assign a container div to have an id like "theChart".

 <div class="box" id="theChart"> <div id="placeholder"></div> </div>

Now we can create an image:

 html2canvas($('#theChart')).then(function(canvas) { image = canvas.toDataURL("image/png"); document.location.href=image; });

This will also solve the problem when canvas.toDataURL() does not display axis labels.

+1
source share

More articles:


All Articles