A Pen by Chris Barr

Thumbnail
This awesome code was written by chrismbarr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrismbarr ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chris Barr</title>
  
  
  
  
  
</head>

<body>

  <div id="container" style="height:500px;"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.highcharts.com/highcharts.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrismbarr/a-pen-by-chris-barr-epGGYX */
//Time in seconds, already ordered
var rawData = [183, 189, 195, 237, 256, 298, 306, 314, 328, 330, 330, 330, 338, 364, 370, 411, 411, 458, 474, 513, 513, 566, 572, 574, 600];

//Get the smallest & largest values.
//This is simple since it's already ordered
var min = rawData[0];
var max = rawData[rawData.length - 1];

//Now fill in the missing places in the data.
//Count how many items have the exact same value
var graphData = [];
for (var i = min; i <= max; i++) {
  graphData.push(_.filter(rawData,function(m){
    return m === i;
  }).length);
}

//============

  $(function(){
    var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container',
          type: 'column',
      },
      title: {enabled:false},
      credits: {enabled:false},
      plotOptions: {
          series: {
              //minPointLength: 1,
              shadow: false,
              marker: {enabled: false}
          }
      },
      xAxis: {
          title: {enabled:false},
          lineColor: '#999',
          tickColor: '#ccc',
          min: min,
          max: max,
          labels:{
            formatter:function(){
              var minutes = Math.floor(this.value / 60)
              var seconds = (this.value - minutes * 60).toString();
              if(seconds==="0"){
                seconds+="0";
              }
              return minutes+ ":" + seconds;
            }
          }
      },
      yAxis: {
          title: {enabled:false},
          labels:{enabled:false},
          gridLineColor: '#e9e9e9',
          tickWidth: 1,
          tickLength: 3,
          tickColor: '#ccc',
          lineColor: '#ccc',
          endOnTick: false,
      },
      series: [{
          name: "Times",
          data: graphData,
          borderWidth: .5,
          borderColor: '#666',
          pointPadding: .015,
          groupPadding: 0,
          color: '#e3e3e3',
          
      }]
    });
});

Comments