1

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.

Raghav Singh
  • 53
  • 2
  • 11

2 Answers2

2

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.
Thibaud Colas
  • 1,248
  • 1
  • 16
  • 24
  • Thanks, Now I'm using jspdf but I'm not rendering the image of graph inside the pdf. Can you help me? – Raghav Singh May 05 '15 at 08:38
  • I don't know much about JSPDF, but it seems to be able to render images into the PDF. If so you just need to extract your SVG as a data URI. Have a look at the first answer for this question: https://stackoverflow.com/questions/11567668/svg-to-canvas-with-d3-js – Thibaud Colas May 05 '15 at 09:29
  • I'm getting the pdf but graph is not rendering.Just see my code.. var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#cmd').click(function () { doc.fromHTML($('#chartbar03').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); doc.save('sample-file.pdf'); }); – Raghav Singh May 05 '15 at 09:36
0

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

C Sharp Conner
  • 378
  • 2
  • 11