Is there any option for printing the graphs generated by c3js?

Question

var chart = c3.generate({
    data: {
        // iris data from R
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type: 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
            ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
    chart.unload({
        ids: 'data2'
    });
}, 2500);

How to add the option to print the graphs in c3js? Or is there any way to convert this c3js to canvas from its svg representation.

Using Javascript, why can't you just print the SVG as is? See an example [here](http://stackoverflow.com/questions/21660843/print-only-svg-from-browser) — Serendipity, Nov 25 '15 at 10:58
Updated with a fiddle [here](http://jsfiddle.net/serendipity/wLow6wsj/) to demonstrate printing. Is that what you want? — Serendipity, Nov 25 '15 at 11:04

score 2 · Accepted Answer · edited May 23 '17 at 12:22

2

Why not just print the content of the chart div like this

<div id="chart">
</div>

<input type="button" onclick="printDiv('chart')" value="print a div!" />

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

link:How to print HTML content on click of a button, but not the page?

edited May 23 '17 at 12:22

Community

1
1

answered Nov 25 '15 at 11:05

you_c

109
4

Replacing the entire document body can damage dinamic content; I'd recommend using an `` to do the printing, so as to not mess up with the main page.. – Haroldo_OK Nov 25 '15 at 11:14

score 0 · Answer 2 · answered Jun 06 '16 at 20:41

0

Give this a try. Very simple css :)

@media print{
  .c3 path, .c3 line {    
    fill: none; 
    stroke: #000;
}

answered Jun 06 '16 at 20:41

Bryan V.

1
1

Is there any option for printing the graphs generated by c3js?

2 Answers2