CodePen

HTML

            
              <div class="wrapper">
  <div class="title">Poll Results: Command Line Usage</div>
  <div class="chart" id="p1">
    <canvas id="c1"></canvas>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  padding: 50px 0;
  font: 14px/1 'Open Sans', sans-serif;
  color: #777;
  background: #ddd;
}

p {
  line-height: 1.8;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.title {
  height: 60px;
  padding: 0 30px;
  font-size: 18px;
  line-height: 60px;
}

.chart {
  height: 300px;
  padding: 20px;
background: #f4a27c; /* Old browsers */
background: -moz-linear-gradient(top,  #f4a27c 0%, #e55c0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4a27c), color-stop(100%,#e55c0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f4a27c 0%,#e55c0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f4a27c 0%,#e55c0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f4a27c 0%,#e55c0d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f4a27c 0%,#e55c0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4a27c', endColorstr='#e55c0d',GradientType=0 ); /* IE6-9 */

  background-size: 100% 100%;
}

.footer {
  padding: 30px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth - 40;
c1.height = parent.offsetHeight - 40;

var data1 = {
  labels : ["Never","1-10","10-50","50-100","100-1000","1000+"],
  datasets : [
    {
      fillColor : "rgba(255,255,255,.1)",
      strokeColor : "rgba(255,255,255,1)",
      pointColor : "#b66e5d",
      pointStrokeColor : "rgba(255,255,255,1)",
      data : [4202,5960,3882,3206,3312,1280]
    }
  ]
}

var options1 = {
  scaleFontColor : "rgba(255,255,255,1)",
  scaleLineColor : "rgba(255,255,255,1)",
  scaleGridLineColor : "transparent",
  bezierCurve : false,
  scaleOverride : true,
  scaleSteps : 6,
  scaleStepWidth : 1000,
  scaleStartValue : 0
}

new Chart(c1.getContext("2d")).Line(data1,options1)
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................