Window/global variable in JavaScript returning a NaN value early?

Question

NOTE: I have attached a link here to a (semi) working version of my program.

I am programming a stock charting program using the Finnhub and P5.js libraries.

I am encountering a problem debugging the code for generating the Y-axis values based on the total range of values of a stock. When calling a window/global variable (window.yAxisRange), the for loop the variable is called within appears to be running before anything is written to said variable.

Specifically, the console shows that the console.log() code that I wrote to check the value of the yAxisRange variable displays twice (once per each iteration of that particular loop). The first instance shows a returned NaN value. The graph within the browser views gives a good example of the problem, in that there appears to be viable numbers being generated, but a NaN value is overlayed on top of them for some reason.

I am perplexed as to why I am receiving a NaN value, as well as why the loop in which the window.yAxisRange is called is running so early.

My code is below (I apologize for any discrepancies as I have spent some time adjusting it):

import finnhub from 'https://cdn.skypack.dev/finnhub';

// Finance API Function Call Below
const api_key = finnhub.ApiClient.instance.authentications['api_key'];
api_key.apiKey = "c5cam0iad3ib55bb0ajg"
const finnhubClient = new finnhub.DefaultApi()

let stockTicker = prompt("Please enter the symbol of the stock to chart:");

var yAxisAutoRange = 0

finnhubClient.stockCandles(
  stockTicker, "D", ((Math.trunc(Date.now() / 1000)) - 8640000), Date.now(),
  (error, data, response) => {
    console.log("The maximum stock value of the timeframe is: " + max(Object.values(data.h)));

    console.log("The minimum stock value of the timeframe is: " + min(Object.values(data.l)));

    console.log("The values of the stock's highs are: " + (Object.values(data.h)))

    console.log("The values of the stock's lows are: " + (Object.values(data.l)))

    let yAxisRangeUpper = (max(Object.values(data.h))) + (max(Object.values(data.h)) - min(Object.values(data.l)))
    let yAxisRangeLower = (min(Object.values(data.l))) - (max(Object.values(data.h)) - min(Object.values(data.l)))

    let yAxisRange = (max(Object.values(data.h)) - min(Object.values(data.l))) / 2
    window.yAxisRange = Math.trunc(yAxisRange)
    console.log("yAxis Range: " + window.yAxisRange);

    console.log("range maximum value : " + yAxisRangeUpper);
    console.log("range minimum value : " + yAxisRangeLower);

    window.yAxisAutoRange = Math.trunc(yAxisRangeUpper / 23);
    console.log("yAxisAutoRange: " + yAxisRange);

    let xAxisDayArray = []
    let dayArrayLoop = data.t.length
    let dayArrayLoop2 = data.t.length

    window.xAxisDayArray = []
    window.dayArrayLoop = data.t.length
    window.dayArrayLoop2 = data.t.length

    for (dayArrayLoop = dayArrayLoop; dayArrayLoop > dayArrayLoop2 - 44; dayArrayLoop = dayArrayLoop - 1) {
      xAxisDayArray[dayArrayLoop] = JSON.stringify(new Date(data.t[dayArrayLoop - 1] * 1000));
      xAxisDayArray[dayArrayLoop] = parseInt(xAxisDayArray[dayArrayLoop].slice(9, 11))
      window.xAxisDayArray[dayArrayLoop] = xAxisDayArray[dayArrayLoop]
      //console.log("Data point " + dayArrayLoop + "for date " + xAxisDayArray[dayArrayLoop])
    }
  }
);

var month = 0

// P5 Chart Background Below
globalThis.setup = function() {
  createCanvas(1080, 768);
  background(220);

  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

  const d = new Date();
  window.month = months[d.getMonth()];
  console.log(month)

  const day = new Date();
  day.getDate();

  textSize(18)
  text(window.month.slice(0, 3), 1030, 755);
}

globalThis.draw = function() {
  // rect(yAxisAutoRange, 300, 10, 100);

  let i = 20;
  for (i = 20; i < 1020; i = i + 25) {

    let y = 0;

    for (line(1025, 0, 1025, 768), y = 0; y < 730; y = y + 15) {
      stroke(140, 25);
      line(i, y, (i + 10), y)
    };
  }

  let z = 10;
  for (z = 10; z < 730; z = z + 15) {

    let x = 25;

    for (line(0, 730, 1080, 730), x = 25; x < 1026; x = x + 25) {
      line(x, z, x, (z + 10))
    }
  }

  let yAxisLine = 730
  let yAxisIndLocate = 710
  let yAxisMultiple = 1
  let yAxisNum = String(parseInt(window.yAxisAutoRange * yAxisMultiple))

  // May need to simplify loop structure so as to cancel recurring drawing functions
  for (yAxisLine = 705, yAxisIndLocate = 710, yAxisMultiple = 1; yAxisLine > 14, yAxisIndLocate > 14, yAxisMultiple < 24; yAxisLine = yAxisLine - 30, yAxisIndLocate = yAxisIndLocate - 30, yAxisMultiple = yAxisMultiple + 1) {

    console.log("Y Axis Auto Range = " + window.yAxisAutoRange);

    stroke(51)
    line(1025, yAxisLine, 1040, yAxisLine);
    textSize(18);
    //console.log("Endless Loop Test " + yAxisNum) //window.yAxisAutoRange not registerring
    //console.log("Y Axis Ind = " + window.yAxisRange);
    text(window.yAxisRange / 23 * yAxisMultiple, 1045, yAxisIndLocate);
  }

  let xAxisLine = 1000
  let xAxisIndLocate = 0

  for (xAxisLine = 1000, window.dayArrayLoop = window.dayArrayLoop; xAxisLine > 24, window.dayArrayLoop > window.dayArrayLoop2 - 41; xAxisLine = xAxisLine - 25, window.dayArrayLoop = window.dayArrayLoop - 1) {
    stroke(51)
    line(xAxisLine, 730, xAxisLine, 745);
    //console.log(xAxisLine);
    text(parseInt(window.xAxisDayArray[dayArrayLoop]), xAxisLine - 5, 760)

    noLoop()
  }
}

Window/global variable in JavaScript returning a NaN value early?

Answers (1)

Related Questions