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?
Related
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
I don't understand how operate svg with highcharts...
I want to do this 3d chart:
http://baering.github.io
I see the source code, and understand that is made with highcharts-3d.js and highcharts.js
For the same chart (but little bit small and less difficult) the code is very easy...
But if see the html code of that page, i see that there is tag svg (and its children tags...)
with svg is possible customize the 3d chart???
How???
The svg is added with code in js ?
Help me :(
The highcharts is library which creates SVG elements, but you can configure options by json.
For further information please visit the website:
http://www.highcharts.com/docs
Highcharts create SVG tags using there library, u cant not change them or its tough to change instead , you can configure chart by JSON it is simple than modification of SVG tags
I have a large chart produced with Raphael, that I want to display in a printer-friendly page. With smaller charts this works beautifully even down to IE7 (min requirement).
But if the chart is too long vertically it doesn't split across pages, instead the bottom is just cut off; this happens in all browsers.
Any suggestions as to how I might solve this problem? Preferably without just making it smaller.
Thanks
What you want to achieve is not directly possible. Raphael container element marks overflow:hidden style and as such for browsers that considers partial page split as overflow, it would be very difficult to split the output - especially if the overflow is horizontal.
As a workaround, you may convert Raphael's SVG into canvas by using the canvg JS library. Canvas, being a single raster element, will allow seamless overflow.
You can have a look at this fiddle where I use FusionCharts' (internally using Raphael) SVG to output to a canvas.
canvg("myCanvasElementId", myRaphaelPaper.canvas.parentNode.innerHTML);
In the above code snippet, I assume that you already have a canvas element with id myCanvasElementId and a Raphael paper called myRaphaelPaper.
Refer to this fiddle where I have rendered Raphael SVG and exported it to canvas and then made it visible only for CSS print media. The Raphael element is made to render 15in by 15in to overflow document.
Note that this will be limited to modern browsers supporting canvas.
I am considering implementing something to help display the rendered SVG graph (generated with nvd3.js) in internet explorer
The complications of this are that I'm not using d3.js which has some support for raphael.js (via D34raphael). Raphael.js basically takes svg elements and draws path around them in its wrapper functions to generate vml or svg. Some people report being able to do all the d3 logic and then casing the actual svg drawing in a raphael statement.
But NVD3.js generates svg elements in many places around the code, instead of one place.
I was looking at solutions which involve running an ajax call to my php server which will read the rendered html page, extract the rendered nvd3 svg, and create an image in its place. I'm not sure how practical that is yet, before I go down that rabbit hole.
SVGweb doesn't seem to really work, Chrome Frame isn't really an option, so I'm not sure what other people use. Any insight is appreciated
Try using r2d3. Its a drop in library for IE that uses the exact same syntax as D3.
https://github.com/mhemesath/r2d3
Has anyone seen an open-source library that produces charts similar to Github.com's commit timeline charts? Check out this profile (picked one at random) and note the bar graphs below each project.
I've been trying to dominate Flot into behaving correctly but it just doesn't have the flexibility of formatting options to come up with a decent clone. Personally, I'd prefer a Javascript implementation but I'm open to looking at server-side stuff as well.
Definitely has to be a stand-alone implementation, the application is headed to a network separated from the Internet, so Google Charts API is out of the question.
I'd suggest using jQuery Sparklines. You'll need to create two separate graphs and position them on top of one another (one for the blue bars, another for the gray bars). You'll also need to make the dotted line/legend an image, but github also uses an image for that.
Here are some decent values to get you started:
EDIT: I originally overlapped two separate sparklines with relative positioning, but it would be better to use the "composite" option to draw two graphs on the same canvas.