C3 Sleep Graph .markdown

C3 Sleep Graph

Chart to visualize sleep data.

A Pen by Christopher Saunders on CodePen.

License.

index.html

<link href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<h1> Sleep 
  <small> hours per day </small>
</h1>

<div>
<button onclick="make_bar()">Bar</button>
<button onclick="make_line()">Line</button>
<button onclick="make_area()">Area</button>
<button onclick="make_scatter()">Scatter</button>
<button onclick="make_spline()">Spline</button>
<button onclick="make_area_spline()">Area Spline</button>
</div>
<hr>

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

script.js

var chart = c3.generate({
  size: {
        height: 540
  },
  data: {
    x: 'date',
    //        xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
    columns: [
      ['date', "2015-04-14", "2015-04-20", "2015-04-27", "2015-04-28", "2015-04-29", "2015-04-30", "2015-05-03", "2015-05-19", "2015-06-06", "2015-06-09", "2015-06-10", "2015-06-11", "2015-06-12", "2015-06-15", "2015-06-16", "2015-06-18"],
      //            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
      ['hours', 8, 8, 8, 8, 8, 8, 16, 4, 16, 16, 7, 8, 24, 8, 8, 8],
    ]
  },
  axis: {
    x: {
      type: 'timeseries',
      label: 'Date',
      tick: {
        format: '%Y - %m - %d',
        fit: true,
        rotate: 75,
        class: 'ticks'
      }
    },
    y: {
      label: 'Hours of Sleep'
    }
  },
  grid: {
    y: {
      show: true
    },
    x: {
      lines: [{
        value: '2015-04-01',
        label: 'April'
      }]
    }
  },
  regions: [{
    start: '2015-04-1',
    end: '2015-04-31'
  }, {
    start: '2015-06-1',
    end: '2015-06-30'
  }, {
    axis: 'y',
    start: 6.6,
    end: 9.5,
    class: 'optimal'
  }, {
    axis: 'y',
    start: 2,
    end: 6.6,
    class: 'suboptimal'
  }, {
    axis: 'y',
    start: 9.5,
    end: 24,
    class: 'superoptimal'
  }],
  legend: {
    position: 'right'
  },
  zoom: {
        enabled: true
    },
  subchart: {
        show: true
    }
});

function make_bar() {
  chart.transform('bar');
}

function make_line() {
  chart.transform('line');
}

function make_area() {
  chart.transform('area');
}

function make_spline() {
  chart.transform('spline');
}

function make_scatter() {
  chart.transform('scatter');
}

function make_area_spline() {
  chart.transform('area-spline');
}

console.log(chart);

style.css

.c3-region.optimal {
  fill: green;
}

.c3-region.suboptimal {
  fill: red;
}
.c3-region.superoptimal {
  fill: yellow;
}

.ticks {
  color: white;
}