CODEWITHSUNDEEP
javascripthtmlcss
Chris
Chris

Reputation: 5804

How to rotate a chart 90 degrees including the text values?

I have the following progress bar, but I'd like it to go vertically instead of horizontally. In other words, I'd like to flip it 90 degrees and have the text flipped by 90 degrees as well

Progress Bar

See my code below, as well as my code pen here: http://codepen.io/chriscruz/pen/jPGMzW

How would I rotate this chart as well as the text value?

HTML

<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="50">
  <div class="progress-bar-state progress">50</div>
</div>

CSS

.progress {
  width: 100%;
  height: 50px;
}
.progress-wrap:before {
  content: '66';
  position: absolute;
  left: 5px;
  line-height: 50px;
}
.progress-wrap:after {
  content: '$250,000';
  right: 5px;
  position: absolute;
  line-height: 50px;
}
.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
.progress-wrap .progress-bar-state {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
  line-height: 50px;
}

Javascript

// on page load...
    moveProgressBar();
    // on browser resize...
    $(window).resize(function() {
        moveProgressBar();
    });

    // SIGNATURE PROGRESS
    function moveProgressBar() {
      console.log("moveProgressBar");
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        var getProgressWrapWidth = $('.progress-wrap').width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 2500;

        // on page load, animate percentage bar to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar-state').stop().animate({
            left: progressTotal
        }, animationLength);
    }

Upvotes: 0

Views: 596

Answers (2)

recursive
recursive

Reputation: 86084

You can rotate text or anything else using this css rule.

  transform: rotate(90deg);  /* this is the rotation */

Use -90deg to rotate the other way.

Upvotes: 1

urnotsam
urnotsam

Reputation: 770

CSS

   .progress {
      height: 500px;
      width: 50px;
    }
    .progress-wrap:before {
      content: '66';
      position: absolute;
      top: 5px;
      line-height: 50px;
    }
    .progress-wrap:after {
      content: '$250,000';
      bottom: 5px;
      position: absolute;
      line-height: 50px;
    }
    .progress-wrap {
      background: #f80;
      margin: 20px 0;
      overflow: hidden;
      position: relative;
    }
    .progress-wrap .progress-bar-state {
      background: #ddd;
      left: 0;
      position: absolute;
      top: 0;
      line-height: 50px;
    }

Javascript

moveProgressBar();
// on browser resize...
$(window).resize(function() {
    moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
    var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
    var getProgressWrapWidth = $('.progress-wrap').height();
    var progressTotal = getPercent * getProgressWrapWidth;
    var animationLength = 2500;

    // on page load, animate percentage bar to data percentage length
    // .stop() used to prevent animation queueing
    $('.progress-bar-state').stop().animate({
        top: progressTotal
    }, animationLength);
}

Pretty much its just switching the height and widths as well as the lefts with tops and rights with bottoms.

Upvotes: 1

Related Questions