C3.js bar chart

Bar chart with the C3.js adapter

by mhouser_nowmediagroup

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>

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');
});