C3 Fiddle-Skelly

A skeleton for C3js charting library.

by ggamir

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<div id="dash"></div>

CSS

p {
   line-height: 1;
   font-weight: bold;
   padding: 5px 12px;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   border-radius: 4px;
   line-height: 15px;
   font-size: 12px;
   min-width: 91px;
 }

JavaScript

var currentSlice;

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
            ['Coin1', 30, 200, 100, 400, 150, 250],
            ['Coin2', 130, 100, 140, 200, 150, 50],
            ['Coni3', 50, 100, 130, 240, 200, 150],
            ['Coin4', 130, 100, 140, 200, 150, 50],
            ['Coin5', 130, 150, 200, 300, 200, 100]
        ],
        type: 'donut',
        onclick: function (e) {
            
        },
        onmouseover: function (d, i) {
            if(currentSlice !== void 0) {
				currentSlice.attr("transform","scale(1)")
            }
            
            currentSlice = d3.select(i).attr("transform", "scale(1.1)");
            
            
        },
        onmouseout: function (d, i) {

        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d',
                centered: true,
                position: 'inner-right'
            }
        }
    },
    bindto: '#dash',
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }

    },
    pie: {
        expand: true,
    },
    tooltip: {
        grouped: false,
        contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
            //  console.log("Containt");
            // console.log(data, defaultTitleFormat, defaultValueFormat, color);
            return "<p style='border:1px solid red;'>" + data[0].value + "</p>";

        }
    }
});