Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Math help for a simple Chart

I have 5 horizontal lines and each has a distance of 50 px. The first horizontal line should display the max value, the last the min value. Now I have an array with 4 items with different values. Basically I want show the LINES on the horizontal lines to show the chart.

var prices = [13000, 11000, 14000, 10000];

My "problem" is how I can add each item to the Horizontal Line? I can use something like this but it will be a lot of work and the other point is the values of "Prices" will be allways different. It can also has values like this:

[18510, 16020, 12300, 15190];

for (var i = 0; i < prices.length; i+) {
  if (prices[i] >= 14000 && prices[i] < 14001) drawLine(x1, 150, x2, 150);
  if (prices[i] >= 14001 && prices[i] < 14002) drawLine(x1, 149, x2, 149);
  if (prices[i] >= 14002 && prices[i] < 14003) drawLine(x1, 148, x2, 148);
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

          var prices = [];
  prices.push(28990, 30240, 30890, 32162, 31000, 31820, 31770, 30080, 28340, 28620, 28640, 27930, 28850);

  var minPrice = Math.floor(Math.min(...prices)/1000)*1000;
  var maxPrice = Math.ceil(Math.max(...prices)/1000)*1000;

  function addText(x, y, t) {
    var text = document.createElementNS('http://www.w3.org/2000/svg','text');
    
    text.setAttribute('x', x);     
    text.setAttribute('y', y); 
    text.setAttribute('fill', 'black');

    var textNode = document.createTextNode(t);
    text.appendChild(textNode);
    
    document.getElementById('main').appendChild(text);
  }
 
  function addLine(id, x1, y1, x2, y2, sc,sw) {
    const line = document.createElementNS('http://www.w3.org/2000/svg','line');
    
    line.setAttribute('id', id);
    line.setAttribute('x1', x1);
    line.setAttribute('y1', y1);
    line.setAttribute('x2', x2);
    line.setAttribute('y2', y2);
    line.setAttribute('stroke', sc);
    line.setAttribute('stroke-width', sw);

    document.getElementById("main").appendChild(line);
  }
  
  function addHorizontalLinesPrice() {
    var m = maxPrice;
    addText(20, 55, m);
    addText(20, 85, m = m-1500);
    addText(20, 115, m = m-1500);
    addText(20, 145, m = m-1500);
    addText(20, 175, m = m-1500);
  }
  
  addHorizontalLinesPrice();
  
  function addHorizontalLines() {
    var y = 50.5;
    
    for (var i = 0; i < 5; i++) {
      addLine("horizontalLine"+(i+1), 90, y, window.innerWidth-20, y, "black", 0.5);
      y = y + 30;
    }
  }
  
  addHorizontalLines();

  var totalHeight = 100;

  function getYPosition(price) {
      // How far the price is on the scale from minPrice to maxPrice
      var scale = (price - minPrice) / (maxPrice - minPrice);
      // Calculate y position based on the scale
      return totalHeight - (scale * totalHeight);
  }

  prices.forEach(price => {
      var x = 20;
      var yPos = getYPosition(price);
 
      addLine("", x, yPos, x+200, yPos, "green", 3);
      x = x + 100;
  });
      </script>
    <svg id="main" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="220"></svg>


  2. 0

    You need to determine these aspects.

    1. The range ( which is the difference between the maximum and minimum values )
    2. Scaling factor ( This will help in mapping each price to a corresponding position on your chart )
    3. Determine the Y position for each line.
    var prices = [13000, 11000, 14000, 10000];

var maxPrice = Math.max(...prices);
var minPrice = Math.min(...prices);


var totalHeight = 4 * 50;


function getYPosition(price) {
    // How far the price is on the scale from minPrice to maxPrice
    var scale = (price - minPrice) / (maxPrice - minPrice);
    // Calculate y position based on the scale
    return totalHeight - (scale * totalHeight);
}


prices.forEach(price => {
    var yPos = getYPosition(price);
    drawLine(50, yPos, 150, yPos);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search