Printing

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
Jim Green
Newbie
Newbie
Posts: 43
Joined: Thu Aug 03, 2006 12:00 am

Printing

Post by Jim Green » Wed Sep 10, 2014 5:05 pm

Hi, when I first started with Tee.js, I had trouble showing a chart sized to all of its parent with {width: 100%; height: 100%;}. This was addressed with some JS code on the body.resize event:

Code: Select all

function resize() {
  var body = document.body;
  var canvas = Chart1.canvas;
  canvas.width = body.clientWidth;
  canvas.height = body.clientHeight;
  Chart1.bounds.width = canvas.width;
  Chart1.bounds.height = canvas.height;
  Chart1.draw();
}
I now need to print a chart that occupies the entire page and I am again seeing the same issue: only a portion of the chart prints, as though it thinks it is larger than its parent. This can be seen in the attached ChartPrint.html. (You'll need to adjust the Teechart.js link in ChartSource.html) Open and go to Print Preview. I've tried this in Chrome, FF, and IE9.

Any help appreciated.

Jim
Attachments
ChartPrint.zip
Open ChartPrint.html.
(1.95 KiB) Downloaded 1018 times

Jim Green
Newbie
Newbie
Posts: 43
Joined: Thu Aug 03, 2006 12:00 am

Re: Printing

Post by Jim Green » Thu Sep 18, 2014 8:08 pm

Hello, were you able to reproduce this?

Jim

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Printing

Post by Yeray » Fri Sep 19, 2014 3:33 pm

Hi Jim,

Excuse us for the delayed reply here.
I've printed this using a pdf virtual printer (PDFCreator), Chrome 37.0.2062.120m and teechart.js here.
Find attached the resultant pdf. Isn't it correct?
ChartPrint.zip
(201.03 KiB) Downloaded 1069 times
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Jim Green
Newbie
Newbie
Posts: 43
Joined: Thu Aug 03, 2006 12:00 am

Re: Printing

Post by Jim Green » Fri Sep 19, 2014 3:49 pm

Isn't it correct?
The printout does not show years 2025-28. Other elements (title, axis title, legend) are also shifted to the right.

TeeChart seems to think that the Canvas area is wider than it really is.

Jim

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Printing

Post by Yeray » Mon Sep 22, 2014 9:20 am

Hi Jim,

I think I see what's happening.
In ChartPrint.html you have this:

Code: Select all

  @media print {
    .chartDiv {
      width: 10in;
      height: 7in;
    }
  }
If you have the ChartPrint.html taking more than 10x7 inches, the chart seems to be cut to 10x7.
I'm investigating if there's a way to propagate this size to the chart in ChartSource.htm and force a repaint on it.
I've tried adding onbeforepaint="resize();" at the body but it doesn't seem to make it work.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Printing

Post by Yeray » Tue Sep 23, 2014 7:30 am

Hello,

We found this solution works fine to make this work.

Code: Select all

var beforePrint = function() {
  var body = document.body;
  var canvas = Chart1.canvas;
  canvas.width = body.clientWidth;
  canvas.height = body.clientHeight;
  Chart1.bounds.width = canvas.width;
  Chart1.bounds.height = canvas.height;
  Chart1.draw();
};

var afterPrint = function() {
};

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
ChartPrint.zip
(2.16 KiB) Downloaded 1034 times
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Jim Green
Newbie
Newbie
Posts: 43
Joined: Thu Aug 03, 2006 12:00 am

Re: Printing

Post by Jim Green » Tue Sep 23, 2014 1:53 pm

Yes, it does seem to work, but so far only in Chrome :-( The chart is still cutoff in Firefox 32 and IE 9. What did you test it with?

Thanks for the help!

Jim

Post Reply