Page 1 of 2

Exporting Highcharts side by side in pdf

Posted: Tue Aug 21, 2018 11:30 am
by WhoAmI
Hello,

I have developed 6 Highcharts (working fine) and exported those Highcharts into a single pdf document (working fine).

The Highcharts are exporting like one below the one

Ex:

1st Highchart
2nd Highchart
3rd Highchart
4th Highchart
5th Highchart
6th Highchart

Now, I wanted to export them side by side in a pdf for two of the Highcharts like below

1st Highchart
2nd Highchart 3rd Highchart
4th Highchart 5th Highchart
6th Highchart

My default code:

Code: Select all

 var texts = $('.HC');
    $("#export2pdf").click(function() {
    Highcharts.exportChartWithText([chart1, chart2, chart3, chart4, chart5, chart6], texts, {
	      type: 'application/pdf',
	      filename: 'Report',
	    });
	  });

	  $( "#export2pdf" ).trigger( "click" );
Can anyof you please let me know how can I achieve this.

Thanks

Re: Exporting Highcharts side by side in pdf

Posted: Tue Aug 21, 2018 2:50 pm
by wojtek
Hi WhoAmI,

Currently exporting multiple charts in one pdf isn't implemented in the core. Check here: https://www.highcharts.com/docs/getting ... t-multiple.

There is workaround for this issue but if you like to have two charts side by side you have to change the way charts are translated to common svg file. I prepared you online demo with simple example of it: http://jsfiddle.net/wchmiel/u0dgq28w/. I hope you will manage now to customise it as you like. Please let me know if you do.

Best regards.

Re: Exporting Highcharts side by side in pdf

Posted: Tue Aug 21, 2018 2:59 pm
by rafalS
@WhoAmI,

you can find more layouts here: https://forum.highcharts.com/highcharts ... cf5ed8a32c

Have a good day!

Re: Exporting Highcharts side by side in pdf

Posted: Fri Aug 24, 2018 12:21 pm
by WhoAmI
Thanks for the replies and am currently working on it.

Can you also suggest me how can I add some images in the pdf along with those Highcharts?

The downloaded pdf has to display the Highcharts and the images.

Re: Exporting Highcharts side by side in pdf

Posted: Mon Aug 27, 2018 10:07 am
by wojtek
To add images you have to add them as svg objects and use the same approach as posted in above demos (use addSVG function with svg image source as a parameter). However svg2pdfjs do not support images with external resources, so it is required to convert them to base64 format first. Check demo posted below.

Example: http://jsfiddle.net/wchmiel/6ns8v3ru/

Best regards.

Re: Exporting Highcharts side by side in pdf

Posted: Fri Aug 31, 2018 9:37 am
by WhoAmI
Hello Wotjek,

Thanks for your reply and I tried with your jsfiddle, but it didn't worked out. I cannot download the pdf format from your code. Can you please remodify your code

Re: Exporting Highcharts side by side in pdf

Posted: Fri Aug 31, 2018 11:18 am
by wojtek
WhoAmI,

Probably this issue is connected with CORS? Did you disabled it? You can add a plugin to your browser to disable it and it should work.

Regards.

Re: Exporting Highcharts side by side in pdf

Posted: Fri Oct 26, 2018 10:12 am
by WhoAmI
Dear Wotjek,

I tried from your sample piece of code. The below are my points:

When I used CORS plugin it worked fine for your code but when I tried for my sample

1) I cannot create an SVG element from my image.

Regarding the layout of the pdf:

Can I get something like the attached image. I need the outline for each of the highcharts and an outline for the whole pdf document. I need to add some text on the left-top side of the highcharts.

I am struck at this point for the last few weeks wiht no hope. Could you please let me know how can I do this or any of the sample posts with the similar kind of functionality.

Any help on this is deeply appreciated and thanks in advance.

Re: Exporting Highcharts side by side in pdf

Posted: Fri Oct 26, 2018 12:13 pm
by wojtek
WhoAmI,
1) I cannot create an SVG element from my image.
When you add the image from my example it's working, but yours not? Check solutions described here: https://www.highcharts.com/docs/getting ... t-multiple.
I need the outline for each of the highcharts
Add a border to each chart separately:

Code: Select all

  chart: {
    borderColor: 'red',
    borderWidth: 1
  }
outline for the whole pdf document
Unfortunately, this functionality is not supported.
I need to add some text on the left-top side of the highcharts.
You can plot it as a text in the first chart using Highcharts renderer (api: https://api.highcharts.com/class-refere ... derer#text).

Kind regards.

Re: Exporting Highcharts side by side in pdf

Posted: Thu Nov 22, 2018 10:50 am
by WhoAmI
Dear Wojtek,

Thanks for your guidance and am in the final step of finishing this.

I have to add 4 images to the exported pdf

https://codepen.io/WhoAmIAmWho/pen/vQdwjP

Could you please let me know how to add two SVG images so that I can modify it to add 4 images.

Thanks

Re: Exporting Highcharts side by side in pdf

Posted: Thu Nov 22, 2018 3:15 pm
by wojtek
WhoAmI,

Perhaps you should use another tool to generate your pdf. Check this approach with jspdf: https://stackoverflow.com/questions/53 ... 3#53081823.

Kind regards.

Re: Exporting Highcharts side by side in pdf

Posted: Fri Nov 23, 2018 8:41 am
by WhoAmI
wojtek wrote: Thu Nov 22, 2018 3:15 pm WhoAmI,

Perhaps you should use another tool to generate your pdf.

-What does this mean?

I used Highcharts approach of downloading multiple highcharts into pdf and it went perfectly good and now I have a sample of adding an user selected image to it as well. I just want to integrate that piece of code into my work to add multiple user selected images (not highcharts).

Can't I add it without using jspdf? Just wanted to be more clear before I proceed with this further.


Check this approach with jspdf: https://stackoverflow.com/questions/53 ... 3#53081823.

Kind regards.

Re: Exporting Highcharts side by side in pdf

Posted: Fri Nov 23, 2018 10:19 am
by wojtek
WhoAmI,
Can't I add it without using jspdf? Just wanted to be more clear before I proceed with this further.
Yes, of course. You can add it exactly the same as I showed you on the demo you've sent me above. Just modify our custom function Highcharts.getSVG to add more photos accordingly. Check this demo: https://jsfiddle.net/BlackLabel/nxbap94j.
-What does this mean?

I used Highcharts approach of downloading multiple highcharts into pdf and it went perfectly good and now I have a sample of adding an user selected image to it as well. I just want to integrate that piece of code into my work to add multiple user selected images (not highcharts).
I understand, however, I can see that your goal is to create complex pdf with charts, images, title, outline etc. Highcharts export is not designed to create such a results. That's why I suggested you another approach where you can use tools especially developed to generate what you trying to achieve (jspdf - it's only one of the many possible tools). That way you can use highcharts export server to generate only images with charts and then load them to pdf. The same way you can load images selected by a user, add a title and do many other things that this particular tool allows to. Consider this approach and choose what's better for you.

Kind regards.

Re: Exporting Highcharts side by side in pdf

Posted: Tue Nov 27, 2018 2:51 pm
by WhoAmI
wojtek wrote: Fri Nov 23, 2018 10:19 am WhoAmI,
Can't I add it without using jspdf? Just wanted to be more clear before I proceed with this further.
Yes, of course. You can add it exactly the same as I showed you on the demo you've sent me above. Just modify our custom function Highcharts.getSVG to add more photos accordingly. Check this demo: https://jsfiddle.net/BlackLabel/nxbap94j.
Dear Wojtek,

Thanks for your guidance and sorry for my questions.

I tried the similar code and when I replace the image [https://www.highcharts.com/samples/graphics/skies.jpg] part code with my local image. The local image is displayed on the webpage but when I click on the "PDF" button only the Highcharts are downloaded but not the image. The base64 for the image is generating and the below error message is what i got it from the console

Code: Select all

svg2pdfjs: Images with external resource link are not supported
But when I click on the "Download Image" the png image format is successfully downloaded with the Highcharts and as well as the image.

Could you please help me out

Re: Exporting Highcharts side by side in pdf

Posted: Wed Nov 28, 2018 9:24 am
by wojtek
WhoAmI,
svg2pdfjs: Images with external resource link are not supported
This is the svg2pdfjs issue, try to answer this question to authors of this library - here: https://github.com/yWorks/svg2pdf.js.

Kind regards.