CODEWITHSUNDEEP
c3.js
mudassir nazar
mudassir nazar

Reputation: 21

How to export C3 and D3 charts to PDF?

I am working on Highcharts, C3 and D3 charts. I have a requirement of exporting the charts in PDF format. Highcharts has a feature to export the charts but C3 and D3 doesn't have this feature.

I tried to export the charts by using SVG of the charts. I was able to export a single chart by using SVG but when I'm trying to export all the charts available on the page, it's only exporting one chart.

function exportDonutCharts(){
  var svgArr = [],
  top = 0
  var height = $j(window).height()/2 + 50;
  var chartWidth = $j(window).width() / 2;

  $j(".donut").each(function(){
      if($j(this).hasClass("c3"))
      {
        // retrieving svg for all the charts one by one and adding to array

          var svg = $j(this).children()[0].outerHTML.replace('<svg', '<g transform="translate(0,' + top + ')" version="1.1" xmlns="http://www.w3.org/2000/svg');
         svg = svg.replace('</svg>', '</g>');
         top += height + 50;
         svgArr.push(svg);
      }
  });

  var allChartSVG = '<svg height="'+ top +'" width="' + chartWidth + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
  Highcharts.exportDonutCharts(allChartSVG);
}

Highcharts.exportDonutCharts = function(svg, options) {
    var form;

    // merge the options
    options = Highcharts.merge(Highcharts.getOptions().exporting, options);

    // create the form
    form = Highcharts.createElement('form', {
        method: 'post',
        action: "http://export.highcharts.com/"
    }, {
        display: 'none'
    }, document.body);

    // add the values
    Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
        Highcharts.createElement('input', {
            type: 'hidden',
            name: name,
            value: {
                filename: options.filename || 'multipleCharts',
                type: options.type,
                width: options.width,
                svg: svg
            }[name]
        }, null, form);
    });
    //console.log(svg); return;
    // submit
    form.submit();

    // clean up
    form.parentNode.removeChild(form);
};

Upvotes: 2

Views: 6408

Answers (2)

Bimal
Bimal

Reputation: 911

I found a solution in Angular JS. Try this url: https://github.com/annatomka/ng-c3-export

Please try it out and let me know if it is working.

Upvotes: 0

BrandonReid
BrandonReid

Reputation: 1314

Not sure if this helps, but I was able to get nice PDF exports with a bunch of c3 charts in it using this library. Unfortunately it requires you to also load jQuery, but it exported nicely.

I made a container with page dimensions to help with layout, have to rely on tables for columns and stuff. If you dig into the example that comes in the download, you should be able to get what you need done.

Upvotes: 2

Related Questions