<div id="c">
  <div class="graphic">

    <svg>
      <polyline/>
    </svg>

  </div>
  <hr>
  <label><i class="line-icon"></i>Changes in %</label>
  <label><i class="bar-icon"></i>Price in $</label>
</div>

body {
  font-family: 'Exo 2', sans-serif;
  background: #EDF4EE;

}

/* #c = chart */

#c {
  width: 500px;
  margin: 5px auto;
}

#c .graphic {
  position: relative;
  margin-left: 18px;
}

#c .bar {
  position: absolute;
  background: #6EAD6B;
  border-radius: 1px;
  bottom: 0;
  cursor: pointer;
  -webmit-transition: height 1s;
  -moz-transition: height 1s;
  -ms-transition: height 1s;
  -o-transition: height 1s;
  transition: height 1s;
}
#c .bar.hide { height: 0 !important; }

#c .bar-label,
#c .line-label {
  position: absolute;
  white-space: nowrap;
  border-radius: 11px;
  color: white;
  visibility: hidden;
  opacity: 0;
  -webmit-transition: opacity 0.7s, margin-top 0.4s;
  -moz-transition: opacity 0.7s, margin-top 0.4s;
  -ms-transition: opacity 0.7s, margin-top 0.4s;
  -o-transition: opacity 0.7s, margin-top 0.4s;
  transition: opacity 0.7s, margin-top 0.4s;
}

#c .bar:hover .bar-label,
#c .bar:hover .line-label {
  visibility: visible;
  opacity: 1;
}

#c .bar-label {
  background: #29AD48;
  margin-top: -58px;
  z-index: 10;
  padding: 9px 10px 7px 10px;
}

#c .bar:hover .bar-label {
  margin-top: -50px;
}

#c .bar-label:after {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
  bottom: -8px;
  left: 50%;
  margin-left: -10px;
  border-width: 10px 10px 0;
  border-top-color: #29AD48;
}

#c .line-label {
  background: #46684D;
  padding: 7px 7px 6px 8px;
}

#c .label, #c .sub-label {
  position: absolute;
  left: 50%;
}

#c .label {
  bottom: -25px;
}

#c .sub-label {
  bottom: -50px;
  color: #616161;
  font-weight: bold;
}

#c svg {
  width: 0;
  -webmit-transition: 1.5s width 2s;
  -moz-transition: 1.5s width 2s;
  -ms-transition: 1.5s width 2s;
  -o-transition: 1.5s width 2s;
  transition: 1.5s width 2s;
}

#c polyline {
  stroke: #138B26;
  stroke-width: 4;
  fill: transparent;
}

.line-icon,
.bar-icon {
  display: inline-block;
  width: 26px;
  height: 4px;
  padding: 0;
  margin: 0 10px 2px 15px;
  border-radius: 1px;
}
.line-icon { background: #138B26; }
.bar-icon { background: #6EAD6B; }

#c hr {
  margin-top: 60px;
  border: 1px solid #f7f8fc;
  width: 500px;
}

var floater = (function($) {

  var data;
  var MARGIN = 40;
  var BAR_WIDTH = 18;
  var graphicHeight = 0;
  var $graphic = $('#c .graphic');


  var initGraphic = function(blobb) {
    data = blobb;
    calculateHeight();
    setGraphicHeight();
    createChart();
    if (supportsInlineSVG()) createLine();
  }


  function calculateHeight() {
    // use height of the bigest bar
    $.each(data, function(i, month) {
      if (month.barHeight > graphicHeight) {
        graphicHeight = month.barHeight;
      }
    });

    // add some space at the top for the bar labels
    graphicHeight += 50;
  }


  function setGraphicHeight() {
    $graphic.css('height', graphicHeight + 'px');
  }


  function createChart() {
    var html = '';
    $.each(data, function(i, month) {
      html += '<div class="bar hide" style="left:'+ (i*MARGIN) +'px;height:'+ (month.barHeight) +'px;'
      html +=     'width:'+ BAR_WIDTH + 'px;'+prefix+'transition-delay:'+ 0.1*i +'s;">';
      html +=   '<label class="bar-label">'+ month.barLabel +'</label>';
      html +=   '<label class="line-label" style="bottom:'+ (month.lineHeight) +'px;">'+ month.lineLabel +'</label>';
      html +=   '<label class="label">'+ month.label +'</label>';
      if (month.subLabel)
        html +=   '<label class="sub-label">'+ month.subLabel +'</label>';
      html += '</div>';
    });
    $graphic.prepend(html);
    centerLabels();
    setTimeout(function() {
      $('.bar').removeClass('hide');
    })
  }


  function centerLabels() {
    $graphic
    .find('label').each(function(i, el) {
      var $label = $(el);
      $label.css('margin-left', - $label.width() / 2);
    })
    // vertically center line labels
    .filter('.line-label').each(function(i, el) {
      var $label = $(el);
      $label.css('margin-bottom', - $label.height() / 2);
    });
  }


  function createLine() {
    var points = '';

    $.each(data, function(i, month) {
      var x = (i*MARGIN + BAR_WIDTH/2);
      var y = (graphicHeight - month.lineHeight);
      points += x + ' ' + y + ' ';
    });

    $graphic.find('polyline').attr('points', points);

    setSVGSize();
  }

  function setSVGSize() {
    $graphic.find('svg').css({
      height: graphicHeight + 'px',
      width: MARGIN*data.length + 'px'
    });
  }


  function supportsInlineSVG() {
    var div = document.createElement('div');
    div.innerHTML = '<svg/>';
    return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
  }

  var prefix = (function() {
    var prefixes = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
    var style = $('script')[0].style;
    var prefix = '';

    for (var prop in style) {
      if (prefixes.test(prop)) {
        prefix = prop.match(prefixes)[0];
        break;
      }
    }

    if ('WebkitOpacity' in style) { prefix = 'Webkit'; }
    if ('KhtmlOpacity' in style) { prefix = 'Khtml'; }

    return '-' + prefix.toLowerCase() + '-';
  })();


  return initGraphic;
})(jQuery);




floater(data);