CODEWITHSUNDEEP
javascriptcssprintinggoogle-visualization
user2850818
user2850818

Reputation: 415

Print Google Chart to Take up Full Page

I'm working on an application that uses an openResiazbleWindow() to open up a window that displays a google chart. The size of the window is set and I'd rather not change it since the size already looks good. But I've got a problem where when it prints out, it only takes up a quarter of the page. I'm trying to have it print out full screen, but as I tried to add CSS to the div, that didn't help. The closest I came to a solution is adding a function to the onresize event, where I have it redraw the chart. However, it appears that the browser doesn't count printing as resizing. Any ideas how I can do this? Pertinent code below. 

<style>
.bottn {
 overflow: hidden;
 margin-left: 10px; }
 @media print {
 @page {size: landscape;}
 .bottn{
  visibility: hidden;
}
rect
{
 width: 100% !important;
 height: 100% !important;
}
}
</style>
....
<script>google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawTempChart);
function drawTempChart() {
var DATA = google.visualization.arrayToDataTable([
  ......
], false);
 var data = DATA;
var options = {
 width:"100%",
 height:"100%",
 title: 'Harsh Acceleration Report',
 hAxis: { 
 title: 'Vehicles',
  },
 vAxis: {
   title: 'Harsh Acceleration Events' 
 }
 };
 var chart = new google.visualization.ColumnChart(document.getElementById('graph'));
 chart.draw(data, options);
}
 window.onresize = function(event) {
 drawTempChart();
 }
 </script>
 ....
 <body>
  <a class='bottn' href='javascript:window.print();'>Print</a><div id="graph" style="width: 100%; height: 100%";></div>
 </body>

Any ideas?

Upvotes: 2

Views: 2389

Answers (1)

Kevin Brown
Kevin Brown

Reputation: 8877

Draw the chart twice. Once as you have done and once in a hidden div that follows in a larger size. Use @media print directives to hide the visual div and show the print div.

Something like this in pseudo, I only set the width/height on the non-printing div to show you:

<html>
<head>
    <style>
        .print {display:none;}
        @media print {
        .noprint {display:none;}
        .print {display:block;}
        }
    </style>
</head>
<body>
    <div class="noprint" style="width:480px;height:350px;background-color:yellow;">
        <p>I am a smaller div that does not print</p>
    </div>
    <div class="print" style="width:960px;height:700px;background-color:red;">
        <p>I am a large div that does print</p>
    </div>
</body>
</html>

Upvotes: 2

Related Questions