June 21, 2015 00:39 · Jun 21, 2015
diff --git a/C3 Sleep Graph .markdown b/C3 Sleep Graph .markdown
@@ -0,0 +1,7 @@
+C3 Sleep Graph 
+---------------
+Chart to visualize sleep data.
+
+A [Pen](http://codepen.io/topher6345/pen/YXrOXY) by [Christopher Saunders](http://codepen.io/topher6345) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/topher6345/pen/YXrOXY/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<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>
diff --git a/script.js b/script.js
@@ -0,0 +1,97 @@
+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);
diff --git a/style.css b/style.css
@@ -0,0 +1,14 @@
+.c3-region.optimal {
+  fill: green;
+}
+
+.c3-region.suboptimal {
+  fill: red;
+}
+.c3-region.superoptimal {
+  fill: yellow;
+}
+
+.ticks {
+  color: white;
+}
No results found