C3.js bar chart

Bar chart with the C3.js adapter

by nimishgoel056

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<script src="https://d26b395fwzu5fz.cloudfront.net/3.2.3/keen.min.js?date=2015-02-19"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<div id="content">
     <h3>Hello, this is a H3 tag</h3>
    <div id="chart"></div>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #fbe800;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 200, 300, 400, 500],
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.98 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

 $('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 180,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});