Page 1 of 1

Printing

Posted: Wed Sep 10, 2014 5:05 pm
by 9347097
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

Re: Printing

Posted: Thu Sep 18, 2014 8:08 pm
by 9347097
Hello, were you able to reproduce this?

Jim

Re: Printing

Posted: Fri Sep 19, 2014 3:33 pm
by yeray
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 1070 times

Re: Printing

Posted: Fri Sep 19, 2014 3:49 pm
by 9347097
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

Re: Printing

Posted: Mon Sep 22, 2014 9:20 am
by yeray
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.

Re: Printing

Posted: Tue Sep 23, 2014 7:30 am
by yeray
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 1035 times

Re: Printing

Posted: Tue Sep 23, 2014 1:53 pm
by 9347097
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