Álvaro González

Scale graph to print

Recommended Posts

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?
 

Share this post


Link to post
Share on other sites

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.)

 

 

 

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Ãlvaro,

 

On what browser did you face this issue?

 

Can you please mention the browser version details?

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Ãlvaro,

 

We are looking into this.

 

We will get back to you on this, shortly.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now