Develop Reference

Convert SVG with foreign objects to zoomable PDF javascript

I want to convert an SVG to PDF file on the frontend. I am using React and drawing a chart using d3 and I want to be to print the chart as a PDF. However, all of the solutions I have tried dont work for some reason. Mostly due to the fact that my chart includes foreignObjects as nodes.
The only working solution I have is through html2canvas and jsPDF. I convert the svg to canvas and then png and later print it using jspdf this solution prints the graph correctly but as it prints as an image the text is pixelated as I zoom in. I am looking for a solution that allows me to zoom in without breaking quality ( I dont know if thats even possible, even if it is upto 200% it should work)
I would like to know any suggestions you may have

SVG to PNG Full SVG image

I am using the library http://www.getorgchart.com/ to produce a large organisational chart diagram. This renders the chart in <svg></svg> tags.
My problem is, the built in "print" function doesn't print the entire chart, just the visible section. As my chart has around 180 people on it, it expands horizontally quite far!
What I need to be able to do, is capture all the SVG data and export it to PDF/PNG/JPG whichever of these (PDF would be ideal with the scalability intact). I've tried several libraries to try and complete this task, and failed thus far! I've tried using canvg and also other libraries that i've found such as https://github.com/exupero/saveSvgAsPng (which worked to an extent but all the line paths were messed up and it only printed the visible section of the svg not the entire chart).
UPDATE Solution must be either client-side or easily implemented on internal servers!
Using the last library I had:
$(document).ready(function(){
$('#printme').click(function(){
saveSvgAsPng(document.getElementById("svgChart"), "diagram.png");
});
});
Does anyone have a solution for this?

Download C3 chart as pdf as given download option in D3 graphs

I'm working on product where I generated C3 chart successfully. But problem is that I'm not able to download these graph as pdf or png. Even I don't know C3 libraries are providing this features.
Please suggest me if there is any way to download c3 chart as pdf or png. I want to download particular graph by clicking on button as d3 graph. Thanks in advance.

The problem is that those libraries are rendering your graphs as SVG, inline in the page. What you need is a way to get the rendered SVG (plus styles), and then if necessary to convert it to a PNG / PDF.
If you only want to do it every once in a while, this is something you can do by hand. There is [a bit of semi-official documentation from D3's creator on the subject. You can also have a look at the answers to these other questions.
If you want to do it programmaticaly, as a "Download this chart" feature on your site, there are multiple ways to go:
You can use jsdom to render your graph server-side, save the SVG and then use a tool like ImageMagick to convert it to PNG.
PhantomJS can render your page and take a screenshot of the chart. Here is very similar StackOverflow question with a good answer using PhantomJS.

Note: If the chart looks correct on canvas, I assume the following would work with C3 or any other chart:
I found that since I have to support IE 11 I instead went with canvas to blob to PNG using "canvas-toBlob.js" and "FileSaver.js"
$("#save-btn").click(function()
{
$("#myChart").get(0).toBlob(function(blob)
{
saveAs(blob, "chart_1.png");
});
});
https://jsfiddle.net/mfvmoy64/155

Html inside a diagram on a web page

I am creating some geometrical figures on my web pages, for which I am using RaphaelJS. Currently, I have some animated circles.
I want to add pie shapes to my web page as well, and the trickier thing about which I don't known how to go about is adding content inside those pie shapes. How do I add the pie on my web page, inside which I can place content such as text, images etc. (or for that matter other html elements as well)

Using RaphaelJS, you can create text like this:
paper.text(50, 50, "Blueberry\nPie!");
You are going to want to pass the x,y position as a variable that is relative to your pie slice. Here is some example code for pie charts: raphaeljs.com/pie.html.
Also, I found this tutorial that looks pretty good: http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

How to create a multiple linked & directed graph with javascript?

This is my problem: For a school project we are trying to create a directed graph and make it fit in a typical html website. We figured out it had to be written in javascript, because a java applet isn´t an option. So this is how it should look like: image.
The data visualised in the graph will be gathered from some xml files.
We took a look at flare and some other packages, but real thing is making a two-way link between the nodes (where the thickness of the arrow represents importance) in our graph. Making the whole thing moveable is also required.
Any ideas? Thank you.

Have a look at jsPlumb - a not featurerich but easy customizable jQuery Plugin for directed graphs
http://morrisonpitt.com/jsPlumb/html/jquery/demo.html