Animated Dashboard Widget

Animated Dashboard Widget.markdown

Animated Dashboard Widget

Inspired from Creative Mints Ui Kit http://dribbble.com/shots/864910-Ui-Kit

Forked from Youssef Boubdir's Pen Animated Dashboard Widget.

A Pen by Grace on CodePen.

License.

index.html

<div class="container">
  <div class="widget">
    
    <div class="section section-graph">
      <div class="graph-info">
        <i class="graph-arrow"></i>
        <span class="graph-info-big">634.39</span>
        <span class="graph-info-small">+2.18 (3.71%)</span>
      </div>
      <div id="graph"></div>
    </div>
    
    <div class="section section-info">
      <span class="info-time">Today 2:25 PM</span>
      <h3 class="info-title">Salt Lake City, Utah</h3>
      
      <div class="info-block">
        <dl>
          <dt>13.5 M</dt>
          <dd>Shares Traded</dd>
        </dl>
      </div>
      
      <div class="info-block last">
        <dl>
          <dt>28.44</dt>
          <dd>Market Cap</dd>
        </dl>
      </div>
      
      <div class="info-aapl">
        <h4>AAPL</h4>
        <ul>
          <li><span class="orange" style="height: 37.5%"></span></li>
          <li><span class="orange" style="height: 47.5%"></span></li>
          <li><span class="orange" style="height: 70%"></span></li>
          <li><span class="orange" style="height: 85%"></span></li>
          <li><span class="orange" style="height: 40%"></span></li>
          <li><span class="green" style="height: 75%"></span></li>
          <li><span class="green" style="height: 50%"></span></li>
          <li><span class="green" style="height: 15%"></span></li>
          <li><span class="green" style="height: 25%"></span></li>
        </ul>
      </div>
      
      <div class="yearly-change">
        <h4>Yearly Change</h4>
        <span><em>+</em> 127.01</span>
      </div>
    </div>
    <div class="section"></div>
  </div>
</div>

script.js

$(function () {
  
  function generateNumber(min, max) {
    min = typeof min !== 'undefined' ? min : 1;
    max = typeof max !== 'undefined' ? max : 100;
    
    return Math.floor((Math.random() * max) + min);
  }
  
  var chart,
      categories = ['Categorie 1', 'Categorie 2', 'Categorie 3', 'Categorie 4', 'ategorie 5','Categorie 6', 'ategorie 7', 'Categorie 8', 'Categorie 9', 'Categorie 10', 'Categorie 11', 'Categorie 12', 'Categorie 13', 'Categorie 14', 'Categorie 15', 'Categorie 16', 'Categorie 17', 'Categorie 18', 'Categorie 19','Categorie 20', 'Categorie 21','Categorie 22', 'Categorie 23', 'Categorie 24', 'Categorie 25', 'Categorie 26', 'Categorie 27', 'Categorie 28', 'Categorie 29', 'Categorie 30'],
      serie1 = [13, 13, 46, 61, 23,12, 24, 16, 14, 12, 12, 24, 19, 13, 11, 11, 14, 11, 11, 11, 11, 13, 22, 10, 18, 15, 24, 31, 19, 10],
      serie2 = [52, 41, 58, 63, 55, 46, 45, 41, 38, 54, 50, 39, 48, 70, 63, 60, 58, 63, 83, 89, 83, 79, 83, 100, 104, 108, 52, 46, 83, 89],
      $aapls;
  
  $(document).ready(function() {

    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graph',
        type: 'column',
        backgroundColor: 'transparent',
        height: 151,
        marginLeft: 3,
        marginRight: 3,
        marginBottom: 0,
        marginTop: 0
      },
      title: {
        text: ''
      },
      xAxis: {
        lineWidth: 0,
        tickWidth: 0,
        labels: { 
          enabled: false 
        },
        categories: categories
      },
      yAxis: {
        labels: { 
          enabled: false 
        },
        gridLineWidth: 0,
        title: {
          text: null,
        },
      },
      series: [{
        name: 'Awesomness',
        data: serie1
      }, {
        name: 'More Awesomness',
        color: '#fff',
        type: 'line',
        data: serie2
      }],
      credits: { 
        enabled: false 
      },
      legend: { 
        enabled: false 
      },
      plotOptions: {
        column: {
          borderWidth: 0,
          color: '#3d9e68',
          shadow: false
        },
        line: {
          marker: { 
            enabled: false 
          },
          lineWidth: 3
        }
      },
      tooltip: { 
        enabled: false
      }
    });
      
    setInterval(function() {
      chart.series[0].addPoint(generateNumber(), true, true);
      chart.series[1].addPoint(generateNumber(50, 150), true, true);
    }, 1000);
    
    
  
    setInterval(function() {
      $('.info-aapl span').each(function(index, elem) {
        $(elem).animate({
          height: generateNumber(1, 40)
        });
      });

    }, 3000);
  });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

style.css

@import "compass/css3";

html {
  height: 100%;
}

body {
  // background-color: #e9dfae;
  background-color: #c07663;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
}

.container {
  width: 283px;
  margin: 0 auto;
  padding-top: 39px;
}

.widget {
  background: white;
  border-radius: 5px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}

.section:first-child {
  border-radius: 5px 5px 0 0;
}

/*
 * Graph section
 */
.section-graph {
  position: relative;
  height: 151px;
  color: #fff;
  background: #55bc75;
  background-image: linear-gradient(color-stops(#55bc75, #55bc75 50%, #4daf7c 50%));
  
  .graph-info {
    z-index: 99;
    position: absolute;
    font-weight: bold;
    margin-top: 18px;
    margin-left: 21px;
    width: 100px;
  
    .graph-arrow {
      width: 0; 
	    height: 0;
      margin-top: 18px;
	    border-left: 4px solid transparent;
	    border-right: 4px solid transparent;
	    border-bottom: 4px solid white;
      float: left;
    }
  
    .graph-info-big {
      font-size: 24px;
      float: left;
      margin-left: 3px;
    }
  
    .graph-info-small {
      margin-left: 3px;
      font-size: 12px;
      font-weight: normal;
      color: rgba(255, 255, 255, .5);
      clear: left;
      margin-left: 8px;
    }
  }
}

/*
 * Info Section
 */

h3 {
  font-size: 18px;
  margin-top: 2px;
}

h4 {
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 10px;
}

.section-info {
  padding: 21px 21px 41px;
  color: #8a786a;
  overflow: hidden;
}

.info-time {
  font-size: 12px;
}

.info-block {
  background-color: #f5f0ec;
  text-align: center;
  width: 120px;
  border-radius: 3px;
  float: left;
  padding: 4px 0;
  
  &.last {
    margin-left: 1px;
  }
  
  dt, dd {
    margin: 0;
    padding: 0;
  }
  
  dt {
    font-weight: bold;
  }
  
  dd {
    font-size: 12px;
  }
}

.info-aapl {
  float: left;
  
  ul {
    margin: 0;
    padding: 0;
  }
  
  li {
    margin: 0;
    display: block;
    width: 9px;
    height: 40px;
    margin-right: 6px;
    background-color: #f5f0ec;
    float: left;
    position: relative;
    
    span {
      display: block;
      width: 9px;
      height: 40px;
      position: absolute;
      bottom: 0;
    }
    
    span.orange {
      background-color: #e75e3a;
    }
    
    span.green {
      background-color: #4eaf7c;
    }
  }
}

.yearly-change {
  width: 94px;
  float: right;
  
  span {
    display: block;
    height: 40px;
    line-height: 40px;
    color: white;
    background-color: #4eaf7c;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    
    em {
      color: rgba(255, 255, 255, .7);
    }
  }
}