Make charts smaller with Javascript when printing

1,384 views
Skip to first unread message

Wesley Chin

unread,
Jul 24, 2012, 9:53:51 AM7/24/12
to google-visua...@googlegroups.com
Hi guys,

I have a stylesheet where I do all my formatting to print a page.  I want to resize the Google chart I made.  

Here is part of my CSS for the printing:

@media print {

                    .navbar{
                        display: none;
                    }

                    .heading{
                        display: none;
                    }
                    
                    .hiddenVariables{
                        display: none:
                    }

                    .printVisible {
                        display: block;
                    }

                    .printHide {
                        display: none;
                    }

                    .mouse-over-button {
                        display: none;
                    }

                    .well{
                        border: none;
                        -webkit-box-shadow: 0px 0px 0px 0px transparent;
                        box-shadow: 0px 0px 0px 0px transparent;
                        background-color: transparent;
                        margin:0px;
                        -webkit-border-radius: 0px;
                        -moz-border-radius: 0px;
                        border-radius: 0px;
                    }

Here is my HTML for the chart:

<div class="offset1 span4" id="oppSplitPieChart1_div">

Here is the Javascript that makes the chart:

function drawOppSplitBuildingSegmentChart(oppSplitBuildStage, oppSplitBuildFrom, oppSplitBuildTo) { 
                    $(function () 
                    {
                        $.ajax({                                      
                            url: 'queries/OppSplitBuildingChartQuery.php',   
                            data: "oppSplitBuildStageID=" + oppSplitBuildStage + "&oppSplitBuildFrom=" + oppSplitBuildFrom + "&oppSplitBuildTo=" + oppSplitBuildTo,    
                            dataType: 'json',              
                            success: function(result)         
                            {
                                //console.log(result);
                                var oppSplitBuildingData = JSON.parse(result);    
                                var data = google.visualization.arrayToDataTable(oppSplitBuildingData);
                                                                                                                                    
                                var formatter = new google.visualization.NumberFormat(
                                {prefix: 'R'});
                                formatter.format(data, 1);

                                var options = {'title':'Market Segment', 
                                    'titleTextStyle':{fontSize:15},
                                    'width':420, 
                                    'height':330,
                                    'chartArea':{left:0,top:60,width:"100%"},
                                    'legend':{alignment:'center'}
                                }; 

                                var chart = new google.visualization.PieChart(document.getElementById('oppSplitPieChart1_div')); 
                                                                                                                        
                                function selectHandler() { 
                                    var selectedItem = chart.getSelection()[0]; 
                                    if (selectedItem) { 
                                        var buildingSegmentName = data.getValue(selectedItem.row, 0); 
                                        populateHiddenVariables(oppSplitBuildStage, oppSplitBuildFrom, oppSplitBuildTo, buildingSegmentName, "", "");
                                    } 
                                    //console.log(buildingSegmentName);
                                    drawOppSplitMarketingSegmentChart(oppSplitBuildStage, oppSplitBuildFrom, oppSplitBuildTo, buildingSegmentName);
                                    drawOppSplitRegionChart(0, 0, 0, 0, 0);
                                    drawOppSplitBranchChart(0, 0, 0, 0, 0, 0);
                                } 

                                google.visualization.events.addListener(chart, 'select', selectHandler); 
                                chart.draw(data, options);  
                            } 
                        });
                                                                                                          
                    });  
                } 

Any help is appreciated.

Many thanks in advance,
Wesley

asgallant

unread,
Jul 24, 2012, 12:13:41 PM7/24/12
to google-visua...@googlegroups.com
You have to redraw the chart with the new dimensions before printing - they don't scale automatically when the CSS changes.  If users are printing by clicking a print button in your page, you can call a redraw from the event handler on that button.  If they are printing via file->print, it is harder to do, as there is no standard means to detect a print request from the browser.  This thread might help, though: http://stackoverflow.com/questions/534977/javascript-event-handler-for-print 

rio

unread,
Jul 25, 2012, 11:43:21 PM7/25/12
to google-visua...@googlegroups.com
Taking into account that What you see on the page is 72DPI and what you print is 300dpi or 150dpi.. it comes to reason that you would want to shrink the image yet print the SVG with the same quality.


docprint.document.write('<img height="' + document.getElementById('printheight').innerHTML + '" width="' + document.getElementById('printwidth').innerHTML + '" src="')

I did come across some scaling in javascript that would edit the orginal svg.. or something like that

http://jsfiddle.net/LwJJR/33/


Reply all
Reply to author
Forward
0 new messages