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?
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;
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