Develop Reference

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?

Converting stroked path to shape with javascript

Is there a way to convert a stroked path to a shape using javascript? Do any libraries offer this as a build in feature?
I know Illustrator has this function, so a possible solution would be to copy the SVG image on the screen and move it to Illustrator, but if you could do that, would you lose all the associated meta-data stored as attributes?

[I]s there a way to convert a stroked path to a shape using JavaScript?
Yes, there's a way to convert an SVG path stroke into an outlined shape. Unfortunately, it is not a prepackaged function built into SVG. The way to do it is called Math. You'd need to account for bézier curves, miter settings, linecaps, linejoins, and dasharrays. As #inhan noted you might use various functions to help you or to approximate it, but none of them are going to do the math for you. It is possible, but it is not by any means easy…in JavaScript.
[W]ould there be a way to copy the svg image on the screen and move it to Illustrator?
Sure, that's easy.
Open your D3.js SVG-based illustration in a web browser.
Open the Developer Tools (or Firebug).
Find the element you want, right-click and choose "Copy as HTML" or "Copy SVG".
Paste the code into a text editor and wrap it with SVG.
Open the SVG in Illustrator.
Outline the path(s) you want.
Save as SVG
Copy/paste the SVG code Illustrator exported into…wherever you want.
But what does this gain you? Certainly nothing that works with your D3.js visualization.
But if you could do that, would you lose all the associated meta-data stored as attributes?
What are you talking about? If you are talking about attributes in the source code, then you only lose it if you don't copy/paste the attributes onto the result. If you are talking about JavaScript data bound to a visualization running in the web browser, of course you are going to lose the data if you round trip through Adobe Illustrator.
Your questions make so little sense to me that I have a feeling that I must be missing what your needs/goals are. What are you really trying to accomplish?

Using Element.getTotalLength() and Element.getSubpath() functions in Raphaël along with stoke-width and stroke-dasharray attributes of that path in a function would probably give the result.

What's the difference between Raphael and gRaphael?

I'm sure I'm just being dim, but what's the difference between Raphael and gRaphael?
I can't tell from reading their homepages (the gRaphael homepage just says "based on Raphaël graphics library"), and Google isn't helping either.

Raphaël is a vector-graphics library, used to manipulate vector-graphics markup (SVG/VML) rendered in a an HTML page. Using this you can create and add SVG/VML elements to the DOM and further manipulate elements inside it.
gRaphaël is an extension to Raphaël adding graphs to Raphaël's concept of Paper. Think *Graph*aël. So gRaphaël works only if Raphaël is loaded, and uses it in drawing the actual graphs. gRaphaël can be used for creating charts in SVG and currently supports chart types like line, bar, pie, and dot.
If you don't want to make any of these chart types you should just use Raphaël directly to draw whatever it is you are designing. In some cases, like defining colors, stroke attributes and putting some overlayed items on your chart such as title text, you will need to learn a little of Raphaël's api to use gRaphaël effectively. You'll find documentation for the former better written and poured over by more people than that of the latter. They are both by the same author however, likely gRaphaël was a demonstration of the base library, which it seems was aimed at simplifying programatic use of SVG.
If you're only interested in drawing SVG charts and graphs, you might also be interested in Google's Chart Tools.

gRaphaël is a chart creating library that uses general drawing library Raphaël.

Graphael is only for graphs, Raphael is more general.

Pie, bar, line: SVG/VML better than Canvas

I need to choose a library for "standard" charting: pies, lines and bars.
From what I've read, it seems to me that the best format is SVG/VML, like Highcharts for example. SVG is becoming standard across all major browsers, now that IE 9 accepts it. It seems easier to rescale and export than Canvas.
Still, I see that several charting libraries rely on Canvas. Am I missing something? Is there any reason for considering Canvas over SVG for such applications?

You can generally achieve the same results with either. Both end up drawing pixels to the screen for the user. The major differentiators are that HTML5 Canvas gives you pixel-level control over the results (both reading and writing), while SVG is a retained-mode graphics API that makes it very easy to handle events or manipulate the artwork with JavaScript or SMIL Animation and have all redrawing taken care of for you.
In general, I'd suggest using HTML5 Canvas if you:
need pixel-level control over effects (e.g. blurring or blending)
have a very large number of data points that will be presented once (and perhaps panned), but are otherwise static
Use SVG if you:
want complex objects drawn on the screen to be associated with events (e.g. move over a data point to see a tooltip)
want the result to print well at high resolution
need to animate the shapes of various graph parts independently
will be including text in your output that you want to be indexed by search engines
want to use XML and/or XSLT to produce the output

Canvas isn't needed unless you want heavy manipulation/animation or are going to have 10,000+ charts. More on performance analysis here.
It is also important to make the distinction: Charting and diagramming are two different things. Displaying a few bar charts is very different from (for instance) making diagramming flowcharts with 10,000+ movable, link-able, potentially-animated objects.
Every SVG element is a DOM element, and adding 10,000 or 100,000 nodes to the DOM causes incredible slowdown. But adding that many elements to Canvas is entirely doable, and can be quite fast.
In case it may have confused you: RaphaelJS (in my opinion the best charting SVG Library) makes use of the word canvas, but that is no way related to the HTML <canvas> element.

In the past two years, my preference has been to use svg, as I mainly deal with relatively small datasets to build pies, column charts or maps.
However one advantage I have found with canvas is the ability to save the chart as an image thanks to the toDataURL method. I haven't found an equivalent for svg, and it seems that the best way to save an svg chart client side is to convert it to canvas first (using for example canvg).

Draw Arc using javascript

Is there a way to draw an arc using points in JavaScript??
I need to draw an arc when I specify a group of points.

Depending on what platforms you want to support and on the complexity of the drawing, I'd suggest either DHTML, canvas (with ExplorerCanvas for IE).
Although DHTML is cross-browser, canvas seems the way to go for future projects since it is capable of much more and is actually meant to be used for graphics.
Edit: Either I was wrong when I originally wrote this or ExplorerCanvas was actually using flash to render its canvas. but now they've seemed to switch to VML and/or Silverlight. I've edited my answer to exclude that variable dependency. I've also added a stronger suggestion towards canvas.