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

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

Related

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

How can I render a D3.js visualization as a JPG, or an image? [duplicate]

This question already has answers here:
How to convert/save d3.js graph to pdf/jpeg
(5 answers)
Closed 6 years ago.
I built an interface using ASP.NET 4.5, C# and D3.js where I mapped out the organs and bones for a human body. The problem is that when I try to print, it almost never prints out properly, and my users want to have a "Save Image" button next to the visualization so they can import the saved image into their own Word/PowerPoint end of months reports.
I'm not sure if I need to post my code. I'm just loading some SVG I have traced in Illustrator, saved it in a JSON file and loaded into D3.
I know print screen could be an option, but saving as an image could also help me display multiple files without overloading my browser with D3 code.
Basically d3.js works with SVG. You could directly download .svg image from your d3.js work tho.
Here is an example (from Mike Bostock, d3.js creator) where he goes from SVG to PNG step by step.
He uses several tricks including XML Serializing, Blob objects (kinda file-like object for raw data (about)) and finally create another PNG image from the SVG using canvas.toDataURL(). Please look at the source, it quite interesting and useful to understand differences.
Hope it helps
pltrdy

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?

It is possible to save charts as images using am charts

actually my requirement is to save the charts as images and saved it in server while loading the page.. I'm using amcharts so is there any possible way to do this.. thanks in advance.
Since amcharts appears to use SVG to display the graph, you could try the technique in this answer (use a library called canvg to save to a canvas, then send the image data from the canvas to the server).

Client Side Graphing Tool that supports saving of the Graph?

I'm trying to find a graphing tool that runs clients side that will allow me to plot some data and then save the grpah. I have Tried FLOT http://code.google.com/p/flot/ but it does not support saving of the graph. I have tried gChart http://keith-wood.name/gChart.html but it does not support x/y plotting in a date format (and is not as interactive as FLOT).
I need to plot X (date or date time) to Y (some number). and be able to save the graph when done.
Any other charting / graphing tools out there? I like FLOT, but I just can't find a way to save the graph. (Something interactive and that works with dates along the X axis)
I highly recommend RGraph:
http://www.rgraph.net/
I ended up using HighCharts, check it out at http://www.highcharts.com/
If you don't mind using Flash I've had a lot of luck with XML/SWF Charts. It's not Open Source, but a license was only about $50 USD. You can right click and save the charts as JPEGs, BMPs, or PNGs.
I'm guessing that what you mean by save is to save it as an image. If so, then that is pretty simple to do with canvas. If you use a library like flot, you should be able to save the canvas image it draws on with a library like Canvas2Image. The only problem is that it won't work with IE earlier than 9, because previous versions use VML and don't actually support the canvas tag.
Not strictly a client side graphing tool as you asked for, because the graphs are rendered to images by Google's servers, but if you were looking for a client side solution just to save yourself from having to do image processing on your server, then I'd recommend the Google Chart API
(or Google Chart Tools / Image Charts (aka Chart API) as it now seems to be called)
save
save
save
Renders directly to PNG, so you don't have to do anything clever to be able to save the graph.
Downside is that the graphs are not interactive, so if you really need that, this simple solution wouldn't be for you.

Categories

Resources