Printing

[Jim Green]

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

[Jim Green]

Hello, were you able to reproduce this?

Jim

[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 1513 times

[Jim Green]

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]

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.

[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 1537 times

[Jim Green]

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