Export charts as png/svg/pdf

[maxklenk]

Discussed here: c3js/c3#313
Working solution: https://github.com/times/axisJS

[maxklenk]

http://techslides.com/save-svg-as-an-image

[maxklenk]

https://github.com/masayuki0812/c3/blob/14e92c54f9286bf28ff442b3212c84c3e06a8681/extensions/exporter/phantom-exporter.js

[dilignt]

I've tried to get this working with html2canvas. It works up to a point, ,but unfortunately the labels and axes aren't rendered correctly - see example below

[dilignt]

Further to my previous comment, the reason that it doesn't work properly is that html2canvas can't render the css styles unless they're defined inline. So by setting the styles inline on the elements, the chart can be rendered correctly using html2canvas.

FYI - I got my download png working with the following code to be triggered on ng-click of a button. The chart needs to be inside a div with id 'exportchart', and the download name would probably be set dynamically instead of sample.png

$scope.saveImage = function() {
    d3.selectAll("svg text").style({ 'font-size':'12px'});
    d3.selectAll(".c3-axis path").style({ 'fill':'none', 'stroke': '#000' });

    html2canvas(document.getElementById('exportchart'), {
        onrendered: function(canvas) {
            var canvasdata = canvas.toDataURL("image/png");
            var a = document.createElement("a");
            a.download = "sample.png";
            a.href = canvasdata;
            a.click();
        }
    });
}

Hope this is useful

[maxklenk]

@dilignt Thank you, I would like to link your solution in the documentation. Can you create a sample implementation on Plunker? You can use this version to build ontop (http://plnkr.co/edit/EWC4Hr)

[dilignt]

Here it is - http://plnkr.co/edit/wdiksu

On 4 February 2015 at 07:30, Max Klenk [email protected] wrote:

@dilignt https://github.com/dilignt Thank you, I would like to link
your solution in the documentation. Can you create a sample implementation
on Plunker? You can use this version to build ontop (
http://plnkr.co/edit/EWC4Hr)

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[maxklenk]

Amazing! Thank you very much.

[btm1]

I've implemented something similar but i get something to the effect of the attached: It's not picking up the fills for the bars which is pretty strange. Any ideas?

[maxklenk]

The axes are normally set using the c3.css file, for export these styles have to be inlined. But I have no idea why the bars aren't filled.

[btm1]

I actually did this using canvg.js i had tried html2canvas in the past and it didn't work... this script works with charts just made with plane old D3 but for some reason the ones made with c3 have the not filled in bars issue.

[c5236786]

could you please rewrite plunker code ? i tried but the c3 chart i download is blank.

[dilignt]

The angular-chart dependency is no longer available which is why it's not working. I don't where there is a different CDN of angular-chart but if you download the plunker and replace angular-chart.js with a local dependency it should work

[maxklenk]

You can link to angular-chart resources on github using https://rawgit.com/

[c5236786]

Hi @dilignt Thank i'll try that..

https://github.com/annatomka/ng-c3-export

i also referred this to download charts. Limitation is that it doesn't work on IE and Safari browsers.

[dilignt]

@maxklenk where is the rawgit angular-chart v0.2 resource? This v0.3 one has a different API, and I notice that the upgrade instructions doesn't mention how to upgrade

[maxklenk]

@dilignt you can link to files from specific versions like this:
https://rawgit.com/GraFiddle/angular-chart/0.2.9/angular-chart.js
(in the web interface of GitHub choose a specific tag and browse the files)

And yes, between v0.2 and v0.3 there was an API change, can I help you what is not clear in the upgrade guide?

[dilignt]

Thanks @maxklenk. Where is the angular-chart.min.css file on rawgit? I tried https://rawgit.com/GraFiddle/angular-chart/0.2.9/angular-chart.min.css but this doesn't work.

The upgrade guide doesn't mention groups within the options - you describe changing the rows options and changing them to dimensions but nothing about groups so it's unclear what to do here. How would you convert this to 0.3?

    // configure your visualization
    $scope.options = {
      rows: [{
        key: 'data1'
      }, {
        key: 'data2'
      }],
      type: 'bar',
      groups: [
        ['data1', 'data2']
      ]
    };

    // describe your data
    $scope.schema = {};

    // provide a dataset
    $scope.dataset = [
      {
        data1: 1,
        data2: 4
      },
      {
        data1: 2,
        data2: 2
      }];

[maxklenk]

The new structure looks like this:

• data integrated in options
• rows translated into keys of dimensions
• other options rewritten in the c3.js style (types and groups are nested in data), we should document this step better I think

    $scope.options = {
      data: [
      {
        data1: 1,
        data2: 4
      },
      {
        data1: 2,
        data2: 2
      }],
      dimensions: {
        'data1': {},
        'data2': {}
      },
      chart: {
        data: {
          type: 'bar',
          groups: [
            ['data1', 'data2']
          ]
        }
      }
    };

I also updated the plunker http://plnkr.co/edit/JzkdibGX1rZUBvIGhAxq?p=preview

[dilignt]

Thanks for the clarification and the updated plunker. There's something not quite right about the chart styling - the background of the downloaded image is now black but it used to be white. I thought this was the css file change but I'm not sure