javascript - Price chart with CSS, on a stretched scale

Question

I would like to create a simple chart style block on my webshop, what shows the current price(CP), the target price(TP), TPx1.05 and TPx0.95. The difference is very small between the target price and to the other two prices (TPx1.05 TPx0.95) so I decided the stretch the chart as the following:

1. TPx1.05: 75%
2. TP: 50%
3. TPx0.95: 25%

Of course the CP doesn't accurate, and I tried to adjust it, but unfortunately it doesn't work out. The differences between the TP prices are 25%, originally it's 0.5% (TPx1.05 - TP - TPx0.95), but on my chart it's 25%. 25/0.5 = 50, so I adjusted the calculation of the CP: CP / (TP*2) * 50. I have no idea how to adjust the CP indicator, maybe the whole concept is wrong?

I uploaded my code for better understanding:

jQuery(document).ready(function($) {
    var target = 10;
  var target_positive = target*1.05;
  var target_negative = target*0.95;
  var current = 9.5; // works fine
  // var current = 10; // It should be on the middle
  
    $('.current-price').css({
    'bottom' : current / (target*2) * 50 + '%'
  });
});

.scale {
  width: 5px;
  height: 100vh;
  background: red;
  position: relative;
}

.current-price {
  position: absolute;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
  transform: translateY(3px);
}

.target {
  width: 20px;
  height: 2px;
  position: absolute;
  left: -7px;
  bottom: 50%;
  background: black;
  display: block;
}

.target.positive {
  bottom: 75%;
  background: pink;
}

.target.negative {
  bottom: 25%;
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
TOP: 20
<div class="scale">
  <div class="current-price" data-price="9.5"></div>
  <div class="target"></div>
  <div class="target positive"></div>
  <div class="target negative"></div>
</div>
BOTTOM: 0

question from:https://stackoverflow.com/questions/65951860/price-chart-with-css-on-a-stretched-scale

Answer 1

I was not easy to understand what you try to achieve, but if you just want to position the current price marker relative to the scaled target marker, I would do the following.

You position the current price marker relative to the target price marker which is scaled to the percentiles 25%, 50% and 75%.

0.05 is 5% of 1.0 not 0.5%.

Use the following variables:

C  := Current Price
T  := Target Price
TH := 1.05 * Target Price

CP := the value that corresponds to the position of the C marker. 
      (to be computed)
TP := the value that corresponds to the position of the T marker. 
      (50% # 0.5)
THP := the value that corresponds to the position of the TH marker. 
       (75% # 0.75)
s  := scaling factor (to be computed, just theroetically)

TH - T = s * (THP - TP)

     (TH - T)
s = ---------- 
    (THP - TP)

    (1.05*T - T)     T
s = ------------- = ---
        0.25         5 

You positioned the target price (T) to 50%.

Then you can compute the position (CP) of the current price (C) like:

                               C - T 
C - T = s * (CP - TP) -> CP = -------- + TP
                                 s 
      5 * ( C - T )            C
CP = --------------- + 0.5 = (--- - 1) * 5 + 0.5
           T                   T

CP% = CP * 100;

You have to change the line:

$('.current-price').css({
  'bottom' : ((current / target - 1) * 5 + 0.5 ) * 100 + '%'
} );