Export charts as png/svg/pdf

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

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

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

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

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

@dilignt

@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 notifications@github.com 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)
.

Amazing! Thank you very much.

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?

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.

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.

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

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

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

@dilignt

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.

@maxklenk

@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

@dilignt

@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?

@maxklenk

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
      }];

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

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

Navigation Menu

Export charts as png/svg/pdf #20

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Export charts as png/svg/pdf #20

Description

Activity

maxklenk commented on Nov 1, 2014

maxklenk commented on Nov 15, 2014

dilignt commented on Feb 3, 2015

dilignt commented on Feb 3, 2015

maxklenk commented on Feb 4, 2015

dilignt commented on Feb 4, 2015

maxklenk commented on Feb 4, 2015

btm1 commented on Jun 19, 2015

maxklenk commented on Jun 19, 2015

btm1 commented on Jun 19, 2015

c5236786 commented on May 30, 2016

dilignt commented on May 30, 2016

maxklenk commented on May 30, 2016

c5236786 commented on May 30, 2016

dilignt commented on May 30, 2016

maxklenk commented on May 30, 2016

dilignt commented on May 30, 2016

maxklenk commented on May 30, 2016

dilignt commented on May 30, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions