LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



CSS
.chart {
    background: #eee;
    padding: 3px;
}

.chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 5px;
  color: white;
  box-shadow: 2px 2px 2px #666;
}
JS
angular.module('myApp', []).

   directive('bars', function ($parse) {
      return {
         restrict: 'E',
         replace: true,
         template: '
', link: function (scope, element, attrs) { var data = attrs.data.split(','), chart = d3.select('#chart') .append("div").attr("class", "chart") .selectAll('div') .data(data).enter() .append("div") .transition().ease("elastic") .style("width", function(d) { return d + "%"; }) .text(function(d) { return d + "%"; }); } }; });
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID