ryadaval

Javascript Graphs And Export To Pdf

Recommended Posts

We have been using fusion charts for sometime now and have an application where in we export multiple graphs at the same time to a pdf file. In some cases where there are many graphs and there is a vertical scroll in the browser, we noticed that they are not exported into pdf. This we found out was a glitch with flash based objects because they do not load unless they are in the viewable area.

Asking the user to scroll down so all graphs are rendered on the screen is not an option as it would cause confusion.

 

So we were wondering if we could render the charts in Javascript and then export to pdf. Presumably, javascript graphs would not have the limitation like in flash, where the object has to be in the viewable area. Is this assumption correct? If yes, can you provide me an example of how to export javascript based graph into pdf.

 

Thanks,

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi,

 

As you have stated, this would work.

 

Please note, in this case you need to have internet connection in your machines as it would get connected to a remote server to get exported even in the client-side.

 

I hope this helps. :(

Share this post


Link to post
Share on other sites

Thanks for the immediate response. Would you have an example code to export Javascript graphs to pdf that you can share?

 

 

Hi,

 

As you have stated, this would work.

 

Please note, in this case you need to have internet connection in your machines as it would get connected to a remote server to get exported even in the client-side.

 

I hope this helps. :)

Share this post


Link to post
Share on other sites

Here is my code to export javascript images. While all 3 graphs are displayed on screen, only the last graph gets exported into an image, when I click on "Export My Charts" button. How can I export all the three graphs at once?

In addition, at present, I get the download prompt to download the image. I would rather save all the images on the server. If I can save the graphs as images on my server, then there is further processing that I would like to do with them to put them into a pdf. Please help.

 

<html>

<head>

<title>My Chart</title>

<script type="text/javascript" src="FusionCharts_3.2/FusionCharts_User/Charts/FusionCharts.js"></script>

<script type="text/javascript">

function ExportMyCharts() {

var chartObject = getChartFromId('myChart');

if( chartObject.hasRendered() ) chartObject.exportChart();

var chartObject1 = getChartFromId('myChart1');

if( chartObject1.hasRendered() ) chartObject1.exportChart();

var chartObject2 = getChartFromId('myChart2');

if( chartObject2.hasRendered() ) chartObject2.exportChart();

}

</script>

</head>

<body>

<input type="button" value="Export My Chart" onclick="ExportMyCharts()" />

<div id="chartContainerDiv">FusionCharts loaded here...</div>

<script type="text/javascript">

FusionCharts.setCurrentRenderer('javascript');

 

var myChart = new FusionCharts('FusionCharts_3.2/FusionCharts_User/Charts/Column3D.swf', 'myChart', '900', '300', '0', '1');

myChart.setXMLUrl('Data.xml');

myChart.render('chartContainerDiv');

 

myChart._overrideJSChartConfiguration({

exporting:{

url: 'export/exporting-server/index.php', //path of HC exporter

type: 'application/pdf',

filename : 'expchart'

}

});

 

</script>

<div id="chartContainerDiv1">FusionCharts loaded here...</div>

<script type="text/javascript">

//FusionCharts.setCurrentRenderer('javascript');

 

var myChart1 = new FusionCharts('FusionCharts_3.2/FusionCharts_User/Charts/Column3D.swf', 'myChart1', '900', '300', '0', '1');

myChart1.setXMLUrl('Data1.xml');

myChart1.render('chartContainerDiv1');

 

myChart1._overrideJSChartConfiguration({

exporting:{

url: 'export/exporting-server/index.php', //path of HC exporter

type: 'image/jpeg',

filename : 'expchart1'

}

});

</script>

<div id="chartContainerDiv2">FusionCharts loaded here...</div>

<script type="text/javascript">

//FusionCharts.setCurrentRenderer('javascript');

 

var myChart2 = new FusionCharts('FusionCharts_3.2/FusionCharts_User/Charts/Column3D.swf', 'myChart2', '900', '300', '0', '1');

myChart2.setXMLUrl('Data2.xml');

myChart2.render('chartContainerDiv2');

 

myChart2._overrideJSChartConfiguration({

exporting:{

url: 'export/exporting-server/index.php', //path of HC exporter

type: 'image/jpeg',

filename : 'expchart2'

}

});

</script>

 

</body>

</html>

 

Share this post


Link to post
Share on other sites

Btw, with the above code, I can export all the images if I comment out the line

 

FusionCharts.setCurrentRenderer('javascript');

 

and render the graphs as flash objects. However, I cannot use flash based graphs and need to use javascript images.

Share this post


Link to post
Share on other sites

I have also setup the export process to happen on my local server using the instructions in http://www.fusioncharts.com/docs/ECPureJS.html.

 

Still while the export seems to happen, it is only exporting the last graph on the page, and it prompts me to download the image/pdf. I need

1) all images to be saved on server with one click and

2) no prompt on the browser to save/open.

Edited by ryadaval

Share this post


Link to post
Share on other sites

Found a way forward, but still a few final links seem to be missing.

 

After specifying the right path for SAVE_PATH and HTTP_URI in FCExporter.php, I am able to export multiple graphs to images, but still get a prompt to download the last image - in firefox. Essentially, the images are stored here for a fraction of a second before they are unlinked in index.php. So I commented out the unlink($outfile); in line 85 of index.php of exporting_server directory. Now I am able to store the images and do what I need with them - although there is still the save/open popup that comes for the last graph/image in firefox. Figured I could get around this somehow, until I started testing in IE.

 

In IE which is where a majority of users will see and export the graphs from, I am able to render all the graphs, but only able to export the first image. After the first image is generated, I get the save/open popup box for the first image. Whether I cancel or Save, the next images are never exported.

 

Can you help me get around this problem?

Thanks

Edited by ryadaval

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