Generating PDF/SVG/PNG with multiple D3.js graphs on one page

Question

I have several D3.js graphs on a webpage. When the user clicks on a button, the new graph will slide down, while the old one will slide up. I did some research, and found a few links. The one that does what I want to do is here: http://d3export.cancan.cshl.edu/. However, I cannot get it to work. Here is a JSFiddle with some code that is very similar to mine

http://jsfiddle.net/hd48L/

Here is the JS code

$(function () {
    $(".show").click(function () {
        $(".targetDiv").slideUp("fast");

        if ($("#graph" + $(this).attr("target")).css("display") != "block") {
            $("#graph" + $(this).attr("target")).slideDown("fast");
        }
    });
});

(function () {
    // Graph 1 code
    show_svg_code();
}) ();

(function () {
    // Graph 2 code
    show_svg_code();
}) ();

// ... etc.

function submit_download_form(output_format) {
    var tmp = document.getElementById(/* What ID goes here? */);
    var svg = tmp.getElementsByTagName("svg")[0];
    var svg_xml = (new XMLSerializer).serializeToString(svg);

    var form = document.getElementById("svgform");
    form['output_format'].value = output_format;
    form['data'].value = svg_xml ;
    form.submit();
}

function show_svg_code() {
    var tmp  = document.getElementById("#graph1");
    var svg = tmp.getElementsByTagName("svg")[0];
    var svg_xml = (new XMLSerializer).serializeToString(svg);

    $("#svg_code").text(svg_xml);
}

$(document).ready(function() {
    $("#save_as_svg").click(function() { submit_download_form("svg"); });
    $("#save_as_pdf").click(function() { submit_download_form("pdf"); });
    $("#save_as_png").click(function() { submit_download_form("png"); });
});

Here is similar HTML to mine

<a class="show" target="1">Chart 1</a>
<a class="show" target="2">Chart 2</a>
// ... etc.

<button type="button" onclick="javascript:submit_download_form('svg')">SVG</button>
<button type="button" onclick="javascript:submit_download_form('pdf')">PDF</button>
<button type="button" onclick="javascript:submit_download_form('png')">PNG</button>

<div id="graph1" class="targetDiv"></div>
<div id="graph2" class="targetDiv"></div>
// ... etc.

<form id="svgform" method="post" action="download.pl">
    <input type="hidden" id="output_format" name="output_format" value="">
    <input type="hidden" id="data" name="data" value="">
</form>

The problem that I am having is that I have more than 1 chart on the page. I have close to 30 graphs, with all of them hidden (besides the one that is shown). How would I get around this? In the JS, it asks for the ID of the target graph. How do I get it to target only the graph that is shown? This also has to work in IE, Chrome, Firefox and Safari, preferably.

Thanks for all the help

EDIT: I see that there is a Perl script that he links to. I saved the file to my server, and it still does not work (I saved it as download.pl, and I tried to save it in the same folder as the .html file, and then I tried to save it in the same folder as the .js file).

EDIT 2: I am missing the libRSVG plugin on my server. I downloaded the folder (V. 2.37.0.tar.xz), but there is about a hundred files in it. What do I do with it?

How to install software depends on what OS you're running on your server. You should be able to find libRSVG in the standard repositories. — Lars Kotthoff, Jun 26 '13 at 16:37
Is there any other better way to do this? Even if I just got a downloadable SVG of the displayed graph. I tried this: http://bl.ocks.org/biovisualize/1209499, but I don't know how to get it to use the CSS, and how to generate the image of the displayed graph (e.g. http://jsfiddle.net/UK8bw/6/, but this only works with one graph, and doesn't use the css) — TFischer, Jun 26 '13 at 18:02
Did you have a look at [svg2pdf](http://rhodopsin.blogspot.ie/2009/11/php-class-adds-svg-images-to-pdf-files.html)? — Lars Kotthoff, Jun 26 '13 at 18:22
I saw it earlier today, but I couldn't find any examples with it implemented. — TFischer, Jun 26 '13 at 18:25

score 1 · Accepted Answer · answered Jul 10 '13 at 14:40

So what I ended up doing was using SVG Crowbar. It allows you to download multiple SVG elements on one page. A little inline window popups up over each SVG element that is on the page with a download. However, there are some problems. 1) It doesn't work in Internet Explorer. 2) It takes the external CSS styles when the user downloads in Chrome, but it does not take the external CSS styles when the user downloads in Firefox. 3) It shows the download button for hidden SVG elements.

To work around this, I changed all of the styles to inline styles, and left the external ones as a fallback. And I just left a message at the top of the page instructing users to install Chrome or Firefox if they are using IE. As for the hidden element problem, I ended up moving each graph to a new page, but I'm sure there is some easy way to only show them for the displayed graphs.

Another thing I found was that I couldn't go back to the original screen when the user was done downloading. I'm sure this was just a problem on my end.

Generating PDF/SVG/PNG with multiple D3.js graphs on one page

1 Answers1

Linked