Exporting this amazing chart

[muhdkhokhar]

No description provided.

[muhdkhokhar]

Hi ,

C3 charts are the best available charts.I can't believe how easy is it generate any chart.

The only thing is that how do I export a chart?

Please help me with this regard.

thanks.

[Rameshc3]

i am also trying to export the chart to pdf or i want to convert it to image ...if anyone has an idea please help

[lblb]

It's not that easy to do solely in Javascript, especially if you want to support many browser versions. If browser supports canvas (all modern browsers do), there is rather easy way. You can use canvg (https://code.google.com/p/canvg/) library, which converts SVG to canvas.
Then something like this (http://www.nihilogic.dk/labs/canvas2image/) to let user save it as image file locally. I didn't try that myself though, so I can't tell if it works reliably with C3 charts. But this is a direction to explore.

[panubear]

Hi, I find this it might be useful (http://jsfiddle.net/8ypxW/3/) but I am not successful yet.
What I try is I put our C3 chart (div tag) inside original code (span tag) but the download result I get is empty image!!!
Update: http://jsfiddle.net/panubear/mGDt8/ >> The output image was produce without c3 chart.

[aendra-rininsland]

I'm doing this for the C3-based chart builder I'm working on, will share my code once it's done. Agreed with @lblb's point about canvg, that's what Quartz use in their ChartBuilder. For an idea how to do this, in addition to outputting PNGs, see: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

[aendra-rininsland]

Okay, gotten this working. Here's my Angular directive for doing this, much shamelessly taken from Quartz/Chartbuilder. Ignore all the Angular stuff, all the real work is done in createChartImages().

In short, here's what I needed to do:

1. Create an empty canvas element.
2. Take all the styles from c3.js and make them inline on most of the SVG elements, taking care to not do this to any of your data-related objects (Which are coloured via the CSS style attribute. Line 6 of c3.css will replace any data line colours set via C3 with stroke: #000 and fill: none.).
3. Find any elements that have "hidden" for the CSS "visibility" property and set those to "display: none". This hides all of C3's unused axes.
4. Set fill: none on all SVG data paths so they you don't get the weird bezier clipping effect.
5. Using Canvg, generate a PNG. There's also a function to generate a SVG in my directive, using a snippet from the NYT.

Note I've only really tested this with simple series charts, it's very very possible the other chart types will have issues and will need their own specific tweaks.

Edit: Seems the "area" types totally break the PNG output, though the SVG output seems fine. Ditto with the circular charts (gauge, pie, donut), which are broken for both SVG and PNG. I've fixed it so SVG output works for all chart types, AFAIK. PNG is being a little bit more troublesome, however...

Latest edit: I've updated the Gist, it should work for all chart types now, both PNG and SVG. hoping to release LlamaCharts sometime in the next few days if anyone wants a working implementation to play with.

[yuvii]

Hi @Aendrew

I have been working on an exporter, which supports .png, .jpeg, .gif and .pdf. please see my pull request here

However, my method is a server-side implementation that relies on phantomjs. In my opinion it would be a good idea to have a client-side exporter as well. I'd love to see your completed version

[aendra-rininsland]

@yuvii Hi! I've released my project (probably should have updated this issue...), it's at times/axisJS.

You can play with it online at http://times.github.io/axisJS/

PDF is super useful, will take a look at your PR. I'm ultimately needing print formats for axisJS sometime shortly...

[yuvii]

Oh wow, you actually went ahead and made an entire GUI for this. I just made a command line tool for exporting. Very cool, man.

[aendra-rininsland]

This is kind of more a support issue at this point than anything so closing. @yuvii's CLI tool is really cool and useful, so let's direct conversation about this to his pull request, #555.

[aendra-rininsland]

Anyone arriving at this, @gonsakon's implementation here does what I did with Angular, but with jQuery — might be an easier example than the one I've given!

[raj-mehta]

Hi , I am trying to convert c3 chart i.e SVG into Image but its not working.
Looks like c3.css which is external css is not getting applied.
How can we apply the external css to an SVG

[aendra-rininsland]

@raj-mehta Please ask on the C3 Google Group, this is a closed issue and the lack of detail you've provided with your query makes it practically impossible to help you.

[raj-mehta]

Thanks for your revert ,
I using the following svg and used on ur sample.html but chart on the browser and converted image from canvg don't match .

[dosborn]

I'm getting the same issue as raj-mehta with the extra wide axis bars. Did you find a solution to this?

[J-1]

The issue is that only inline styles matter when doing the export. I've modified my local version of c3 to include some additional styling (like fill-opacity:0 for line graphs that show a weird black background) and the image comes out how you'd expect.

[adrianf29]

@Aendrew please tell me the source of this http://times.github.io/axisJS/#/ i need this tutorial..please help me

[annatomka]

You can add PNG exporting feature to c3 charts using my module: https://github.com/annatomka/ng-c3-export

[morales-franco]

Hi @annatomka can I use https://github.com/annatomka/ng-c3-export whith async load graphs ? My code:

app.controller("ChartController", function ($http) {
$http.get('URL').
success(function (data, status, headers, config) {
c3.generate({
bindto: "#My-chart",
data: {
type: 'pie',
columns: [
['sample', 30],
['sample2', 200]
]
}
});
}).
error(function (data, status, headers, config) {
debugger;
});

--Draws the chart correctly but no download icon

[johnmarkli]

@annatomka Great module but I'm also having trouble with async loading graphs. The download button disappears once I re-generate the graph.

[aendra-rininsland]

@annatomka That is so good! I'm totally using your module next Angular project I do!

[adamrecsko]

@annatomka +1

[annatomka]

@morales-franco @johnmarkli I fixed the async loading issue, you can try it in the new version (0.1.5). I added some examples too.

[c5236786]

@annatomka My Pie chart is coming out to be

what am i missing in css?

[mingli1015]

@annatomka Great module but I'm also having trouble with the browsers. It don't work on Internet Explorer your module. Can you please fix the bug? Thanks

[aendra-rininsland]

Seriously here, people. If you have issues with annatomka/ng-c3-export, report them in the annatomka/ng-c3-export issue queue.

Locking thread.