Convert div or svg to datauri

Question

I have basically created a FIDDLE and made a sample chart.

This is the code for the chart

var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.toLocaleDateString();
                    }
                }
            }
        }
    }
});

I am attempting to convert this chart in to a datauri which i can use to draw an image. I was wondering what is the best way to do this?

I did research and found the following approach but I am not able to successfully implement it. Any help on this matter would be appreciated.

You really need to show us your datauri implementation so far so we can see where you're going wrong. — Robert Longson, Mar 07 '16 at 18:50
@RobertLongson answer provided is what i did and as you can see the colors are missing — user1010101, Mar 07 '16 at 19:09
@RobertLongson the image looks different from original chart for some reason. — user1010101, Mar 07 '16 at 21:51

score 0 · Answer 1 · answered Mar 07 '16 at 18:49

0

For making svg to image, first you need draw it on canvas and then get dataUrl from canvas. I edited you're fiddle, seems there are some rendering problems but there are main steps to do that.

canvg('canvas', document.getElementById('chart').innerHTML);

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

Link to fiddle

answered Mar 07 '16 at 18:49

VahagnNikoghosian

613
6
17

For some reason the image is missing colors – user1010101 Mar 07 '16 at 18:52
The problem is only black closing shapes, The colors seems looks ok. – VahagnNikoghosian Mar 07 '16 at 23:27
If you look at the line of x axis and y axis it's much more bold than the original – user1010101 Mar 07 '16 at 23:34

Convert div or svg to datauri

1 Answers1