# CodePen Problem - Finance library blocking P5

**URL:** <https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279>\
**Category:** Libraries\
**Created:** [December 24, 2021, 3:53pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279 "2021-12-24T15:53:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rms2256](https://avatars.discourse-cdn.com/v4/letter/r/a9adbd/32.png) [@rms2256](https://discourse.processing.org/u/rms2256)\
**Post date:** [December 24, 2021, 3:53pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/1 "2021-12-24T15:53:09Z")

</div>

Programming a stock charting program with CodePen has not been without errors.

My program ([here](https://codepen.io/rms2256/pen/eYGdvLb)), appears to be encountering an error with running both the Finance API ([Finnhub.io](http://Finnhub.io)) and P5.

Particularly, only the finance API’s code is run when both P5 (added independently using the option) and the finance API are called within the program.

Comments have been marked within the code, which you can view using the ‘view in editor’ option.

Solving my problem would enable me to use JSON data from the finance API’s function call in my p5 sketch to generate the placement of the stock candle tickers. Now, the P5 sketch simply does not even appear.

Any and all help with this will be greatly appreciated.

Thank you,

- Ryan

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 25, 2021, 6:24am UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/2 "2021-12-25T06:24:28Z")

</div>

> [@rms2256](#):
>
> Now, the P5 sketch simply does not even appear.

The reason why p5js doesn’t “appear” is b/c your sketch contains the keyword `import`.

Any JS file containing any of these 2 keywords `import` & `export` is considered an ES module:

> **[JavaScript modules - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)**
>
> This guide gives you all you need to get started with JavaScript module syntax.

In order for the p5js library to find & callback your functions **setup()** & **draw()** they have to be in the outer global context.

We can explicitly place anything in the outer global context by appending it in the property _window_ or _globalThis_:

> **[globalThis - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)**
>
> The globalThis global property contains the global this value, which is usually akin to the global object.

> [@How to use export & import in p5.js](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/8):
>
> That’s right! A JS module got 2 global contexts: A private 1 and a shared 1. Explicitly appending to window or globalThis assures those properties can be accessed by both vanilla & module scripts which are sharing the same global context.

This is the model you need to follow in order to have callbacks **setup()** & **draw()** in the outer global context on your own ES module sketch:

> <https://github.com/GoToLoop/ML-Matrix-P5JS-Template/blob/v1.0.6/sketch.js#L13-L14>

> <https://github.com/GoToLoop/ML-Matrix-P5JS-Template/blob/v1.0.6/sketch.js#L20-L23>

---

<div class="post-metadata">

**Author:** ![rms2256](https://avatars.discourse-cdn.com/v4/letter/r/a9adbd/32.png) [@rms2256](https://discourse.processing.org/u/rms2256)\
**Post date:** [December 25, 2021, 1:45pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/3 "2021-12-25T13:45:30Z")

</div>

Thank you very much for your help! It was quite exciting to awake to such helpful advice on Christmas.

I have made the changes, as per your reply, and successfully run my program and generated both a P5 image/chart and finance data.

I apologize for any amateurism I may have unnecessarily exhibited as I do intend to be a more active member of this community in the future.

Thank you ‘GoToLoop’ and have a wonderful holiday season

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 29, 2021, 7:53pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/4 "2021-12-29T19:53:59Z")

</div>

I’ve re-run your code w/ `window.yAxisAutoRange` replaced w/ `yAxisAutoRange` and it’s totally fine. 😉

---

<div class="post-metadata">

**Author:** ![rms2256](https://avatars.discourse-cdn.com/v4/letter/r/a9adbd/32.png) [@rms2256](https://discourse.processing.org/u/rms2256)\
**Post date:** [December 30, 2021, 4:06pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/5 "2021-12-30T16:06:30Z")

</div>

Thanks, I tried that as well and it is working well now. I appreciate your help!

- Ryan

---

<div class="post-metadata">

**Author:** ![rms2256](https://avatars.discourse-cdn.com/v4/letter/r/a9adbd/32.png) [@rms2256](https://discourse.processing.org/u/rms2256)\
**Post date:** [January 14, 2022, 7:32pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/6 "2022-01-14T19:32:03Z")

</div>

Hello everyone,

Since my last problem was solved, I have made progress on the stock candlestick charting program.

Currently, I am encountering a problem when calculating the y-axis indicators. Specifically, it appears that the program is iterating a for loop without properly calling the values of variable ‘window.yAxisAutoRange’.

Careful observation shows however (as per the sketch and console) that a successful full iteration of the loop is completed and presumably returns the intended results.

Thanks to all in advance for any help with my problem discerning why I am receiving a NaN value.

- Ryan

\*The code is quite long, so I have linked the online editor page I am working on.

[A Pen by rms2256 (codepen.io)](https://codepen.io/rms2256/pen/eYGdvLb)

EDIT: I should note, I also experience an error whereby I am prompted a number of two times for what I programmed as a single prompt function. Any help with that matter would be greatly appreciated as well.

---

<div class="post-metadata">

**Author:** ![rms2256](https://avatars.discourse-cdn.com/v4/letter/r/a9adbd/32.png) [@rms2256](https://discourse.processing.org/u/rms2256)\
**Post date:** [January 19, 2022, 7:37pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/7 "2022-01-19T19:37:43Z")

</div>

\*Bump for urgency’s sake