Scale graph to print

[Álvaro González]

I'm generating several plots with the JavaScript renderer, configured to fit in the available width. Relevant code looks like this:

<div id="sales-plot">Loading...</div>

#sales-plot{
    width: 30%;
    height: 275px;
}

FusionCharts.setCurrentRenderer("javascript");
var salesPlot = null;
$("#sales-plot").each(function(){
    salesPlot = new FusionCharts("/js/FusionCharts/Pie2D.swf",
                                 "fc-" + this.id, "100%", "100%", debugMode);
    salesPlot.setJSONUrl("/data/sales-plot.json";);
    salesPlot.render(this.id);
});

So far so good. Problem comes when the user prints the page: the plot takes twice the available width in a A4 sheet. I've tried tweaking my print CSS code but I've hit a wall—apparently, FusionCharts calculates and hard-codes the pixel dimensions of the graph:

<svg height="275" version="1.1" width="379" xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none; cursor: default; position: relative;
background-color: rgb(255, 255, 255);">

When I use CSS to reduce the width of the <svg> element or any of its ancestors I only get a cropped graph:

@media print{
    #sales-plot{
        width: 5cm;
        height: 3cm;
    }
}

The graph keeps its original size thus it overflows the container. FusionChart resizes the graph when I resize the window, but obviously not when I print.

Does this have an easy fix?
 

[Álvaro González]

I was unable to find a CSS workaround so I've written a little JavaScript function to modify the generated <svg> and make it resizable:

function handleDrawComplete(eventObject, argumentsObject){
    var $svg = $("svg", eventObject.sender.ref);
    var w = argumentsObject.width;
    var h = argumentsObject.height;

    $svg
        .attr("viewBox", "0 0 " + w + " " + h)
        .attr("preserveAspectRatio", "xminymin meet")
        .attr("width", "100%")
        .attr("height", "100%")
        .css("width", "100%")
        .css("height", "100%");
}

I use this function as handler for the DrawComplete complete event and, according to Chrome developer tools, graphs are modified successfully. However, graphs are still printed at fixed dimensions.

 

The funny thing is that saving the page with the generated <svg> as static HTML works as expected!

 

Is it possible that FusionCharts is triggering an event or something that manipulates the graph when user attempts to print? (I mean standard browser print, not managed printing.)

 

 

 

[Álvaro González]

I've created an online fiddle that illustrates the issue: http://jsbin.com/izutow/2

Edited July 17, 2013 by �lvaro G. Vicario

[Guest Sumedh]

Hi Ãlvaro,

 

What FusionCharts version are you using?

[Álvaro González]

What FusionCharts version are you using?

 

I'm using FusionCharts/3.3.1 (more specifically, 3.3.1-sr2.19840)

[Guest Sumedh]

Hi Ãlvaro,

 

On what browser did you face this issue?

 

Can you please mention the browser version details?

[Álvaro González]

On what browser did you face this issue?

 

Can you please mention the browser version details?

 

I'm facing the issue in the following browsers (running on Windows 7 Ultimate 64 bits):

• Google Chrome 28.0.1500.72 m (32 bits)
• Mozilla Firefox 22.0 (32 bits)
• Internet Explorer 10 (64 bits)
• Opera 12.15 (64 bits)

Do you mean that print preview in the fiddle shows both graphs with the same width for you?

[Guest Sumedh]

Hi Ãlvaro,

 

We are looking into this.

 

We will get back to you on this, shortly.

[Álvaro González]

We are looking into this.

 

We will get back to you on this, shortly.

 

Please correct me if I'm wrong but I have the impression that my primary goal (setting graph dimensions for printing with pure CSS) is just no supported by the library. I guess that FusionCharts calculates and hard-codes pixel dimensions to ensure all elements (shapes, fonts, etc.) look great on screen. I don't think that can change in the short term.

 

I don't really know why my Ugly JavaScript Hack doesn't work, though, and if you can find the time to shed some light on it I'll absolutely appreciate it.