Help getting my feet wet with interpreting crypto trading charts

[BlindTrader]

Hi all,

I am very much interested in using HighCharts to try and interpret crypto charts. I did see this was a specific demo on the HC demo page, but I wasn't really able to interpret much as the graphics weren't labeled. I am a screen reader user, NVDA 2020.4. I have only taken a very cursory look at the demos, but only saw the AAPL chart. My question is primarily how I need to approach looking at these charts. I wasn't able to use focus mode to interact with anything on the demo page which was rather unfortunate. Surely I'm doing something wrong since there is an entire section for this type of trading chart. I went to the Youtube channel for Highcharts, but didn't really see anything useful there, at least in terms of stock chart examples. I also noticed most of the videos are quite old. Hopefully this project is not dead. But a tutorial would be very helpful. Is this a product one would need to purchase/is there a desktop client that is fully featured, or is this merely a concept product which hasn't gotten off the ground yet? After looking at an example of an indicator, such as the MACD for AAPL, the graphics were not helpful at all when looking at pivot points. This was rather disappointing. I also didn't see any option for selecting a different asset, such as BTCUSD, I suppose this is because it is a demo only.

I look forward to any helpful hints and tips.

[mateusz.b]

Hello BlindTrader,

Welcome to our forum and thanks for contacting us with your question!

First of all I just want to say that Highcharts is a front-end JavaScript charting library. Our library should be used to build charts based on your provided data. You couldn't find BTCUSD pair because such example doesn't exist. Our demo section purpose is to show Highcharts capabilities and give you general idea of what can be achieved with our library. We provide only a tool and a support, the implementation of specific chart is on your part. Alternatively you can get in touch with Black Label company, official Highcharts partner, which specialise in implementing Highcharts. More about it: https://www.highcharts.com/support/

When it comes to questions related to A11Y, please read our docs thoroughly, you can start here:
https://www.highcharts.com/docs/accessi ... ity-module

If you think that some functionalities do not work as intended then feel free to create appropriate ticket on highcharts github with elaborated description in accordance with ticket guideliness. Same applies to features that you would like to see but aren't implemented yet. Additionaly you can leave your feedback on Highcharts user voice: https://highcharts.uservoice.com/forums ... script-api

In your related question you asked about indicators in Highcharts Stock. Most examples you can find in demo section (https://www.highcharts.com/demo/stock) and all available options in API docs. Our development roadmap you can find here: https://www.highcharts.com/blog/roadmap/

Feel free to ask any further questions.
Best regards!

[BlindTrader]

Hi. I've tried to make subsequent posts since doing additional research but my posts were blocked for some reason.

I have read through the documentation under support I found it after making my initial post, so some of my questions have been answered already.

First I realized I had to download the High stocks package and add the accessibility module myself as the live demos on the website do not incorperate the module for some reason. My suggestion is that you make all demos use the accessibility module since it is something HC stands behind I think it would only make sense.

Secondly regarding live chart data. Yes I looked at the available demo json data and, correct, only the AAPL example is available. Because of this, I have since gained access to an API key for coinapi.io. My issue now, as I do not know json or really any javascript (I'm a networking guy not a programmer) is that I basically need to get some kind of help building the chart I'm looking for. I don't mean to be a burden on this, but if someone could help me build the chart based on what I need I would super appreciate it.

My questions:
1. Is it better to use multiple html divs for each panel of a chart. I.E. A div for the line chart, a div for hiken ashi candles etc. Are series items on a line chart overlays of each other or are they separated visually on the screen? Would this make it easier to navigate with a keyboard?
2. I do not know json. However, as mentioned above, I've obtained access to coinapi.io via an API key but I do not know how to parse the data to be displayed/interpreted on a chart. I will need help with this if possible.
3. After playing with the demos after downloading the package (I found the download link after posting my initial questions here) I noticed that moving through the data was a bit inconsistent. For example, when loading the AAPL stock line example or the 'all indicators' example and adding something like the MACD or other indicators, I'd expect that up and down arrows would move focus between the line chart, the MACD, the candles, the EMA's etc, however what I found was that up and down seemed to move me left and right through the data points and there was no clear way of knowing what I was looking at. When I pressed the end key on my keyboard I was taken to the MACD for example which didn't seem very intuitive, especially if I had added 3 or 4 things to a chart. Is this a bug or do I not understand how to navigate a chart like this. Intuitively, left and right arrows should move you along the datapoints on a line chart or move you to each candle stick from left to right, while up and down should move you between the price chart, the macd, the candles, etc from which point you could review the details of that particular indicator. Or is this something to do with properly coding the accessibility module correctly into a chart?
4. Lastly I'd like to incorporate the sonification.js module to be able to audibly hear the line graph, but also be able to place an EMA/SMA ribbon on the chart and, based on tone, tell if the line crosses below or above the given line, be it an EMA, SMA or the VWAP.
5. As far as the components I'd like on a chart, they would include the following:
A. Price line chart with price on Y and time along X depending on the timeframe I'm looking at
B. Hiken ashi candles. (these read extremely well in the example I really like this, but perhaps there is a way to indicate whether the candle is green or red or a way to indicate whether the current candle had a close above or below the prior one, and indicate wicks. I guess you could extrapolate this data yourself, but just a thought.)
C. EMA and SMA ribbons, individually as needed. (I did not notice an apparent way of selecting which ribbons I wanted I.E. 50 EMA, 21 EMA, 20 SMA, etc)
D. Momentum waves.
E. Code, based on what the API I've got access to, to select the exchange, the asset and time frame. These could probably be easily implemented by someone who knows what they're doing, as the time frame selection dropdown already exists.

My apologies if this is a lot to ask for, I've tried piecing something like this together based on the code examples but I've just got no clue what I'm doing.

Thank you for your help.

[BlindTrader]

Would my above questions be something Black Label does rather than High Charts specifically? Currently this is just for my personal use, so I do not represent an organization.

[mateusz.b]

BlindTrader,

As long as questions are related to Highcharts the forum is the right place to ask them, so you can definitely keep such questions here. Black Label specialises in Highcharts custom and creating solutions that are designed to meet individual requirements of various companies.

When it comes to your questions I will go through them all and get back to you with answers as fast as possible.

Best regards!

[BlindTrader]

Much appreciated!

[BlindTrader]

After testing a sample chart I made I've determined that it is best to have every component as separate series in the same chart layout. The page up and down keys navigate between series while left and right travel along the X axis. I couldn't find this mentioned anywhere. I'm still not clear what the numbers mean though as they don't line up with the number of items shown. I'm also using the default dark theme although I'd still like it improved. Lastly I've obtained a csv of bitcoin historical data and I'd like to test that but am needing to figure out how to parse the csv data and also be able to get real time data to add to the csv historical data I've got...

[BlindTrader]

To follow up with my CSV parsing question, I think this may be the piece of code I need, however I'm not sure where to specify the file name. Is it a good idea or not to combine data sources from different formats such as csv or json? Is it possible to obtain future chart data from a certain point and append it to the csv I've got? Is there a difference in the format I use to get my charting data? I could only find historical chart data in CSV format.

https://jsfiddle.net/gh/get/library/pur ... /complete/

When I try looking up code examples of how to obtain and parse stock data from an API, videos don't put their code in the examples on youtube or they're using python or something completely different.

Also do I need to find different historical/current data for Heikin Ashi candles as in the AAPL web example? I see there are 2 separate files specified in each example. When I try pasting in the URL with my api key to replace the AAPL-C.json link with a link to the live json stream from coinapi.io the chart does not load, likely because I guess each data source is formatted differently for some reason, but here is the url I tried substituting (with my own API key of course).

https://rest.coinapi.io/v1/exchangerate ... ormat=json

You could just as easily replace json with csv at the end of the url if need be.

Sorry for all the questions but programming is not my strong point. I've got a functional chart with indicators and price action etc I just need to replace the AAPL stock data with btcusd, add dropdowns for other assets/exchanges, get sonification working and modify the styling. I also need to figure out how to manually select which and how many moving averages to display at one time. Rather than what seems like random numbers when moving through each series, I'd like my screen reader to announce the series name before the data so when moving quickly through the data I don't have to wonder if focus has switched to another indicator without stopping to hear the entire thing. There also seems to be a limit as to how many indicators you can add to a chart at one time.

Lastly for right now, when interacting with the series on the chart, it seems like the home/end keys and the page up/down keys are reversed. I haven't found an obvious way to jump directly to the end of one series, I.E. to the right side of the chart, without moving to the next series and pressing left arrow which seems to not be consistent.

[mateusz.b]

Hello BlindTrader,

Once again sorry for slightly longer response time, but frankly speaking there are quite a few questions and I didn't want to answer one at the time. I thought that answering for all at once would help mi keep a broader view on whole problem.

Regarding your questions from 25.10:
1. It is hard to tell which approach is better, it rather depends on what you want to achieve. If you would like to have few series shown on single chart then using one chart's container (div) is the only option. I would say that it is easier to navigate with keyboard too, it could be problematic in case where you have too many point shown at the same time on the chart, but it of course can be adjusted with proper options.
2. I can't really help in this case, In general delivering data and parsing it is completely on your side. Yes, sometimes we help with such things but we shouldn't really, because it simply goes beyound scope of our duty and delays our responses for Highcharts related problems. We are being asked parsing questions and such stuff serveral times a day, while this forum is not the right place for that type of questions. I would recommend using for example Stack Overflow, not only because it is better suited for that type of questions, but also you can expect answers from people who have better understanding of particular problem. The most important tip I could give here is that you should always seek to achieve data format correct with the one specified in API, for example https://api.highcharts.com/highstock/se ... stick.data
3. Keyboard navigation is part of Highcharts Accessibility and such questions answer our accessibility expert. I think It would be much easier for us as a support team in general if you could create separated topics for each particular problem. It would be much more convenient for forum users too because it is much easier to find a topic with informations strictly related to one problem.
4. Same thing as in 3.
5. Demo example with: Heikin Ashi series, line series, SMA 20, all options API based: https://jsfiddle.net/BlackLabel/6hvy9cgx/

Questions from 26.10:
1. It is really up to you what data format you choose. Sometimes, depending of the source of the data, you doesn't have a choice and you have to use specific data structure like JSON. And here comes your second question about obtaining your future data. It doesn't really matter what format initially it has because in the end it has to be parsed anyway to the format specified in our docs.
2. Youtube videos in this case are not reliable source of knowledge. When you have any doubts you should refer to our documentation in the first place. If that is not enough then you should use one of our support channels depending on your license type. We have so many types of series right now and they are being constantly impoved and changed so that is impossible to for us to provide reliable video tutorials, at least not at this point. And by the way, you've said that you're a networking professional, not a programmer. There is nothing wrong with that but you must accept that Highcharts is a JavaScript front-end charting library, and basic JavaScript knowledge is required to use it properly. And yes, Heikin Ashi doesn't work on AAPL example data because it doesn't have required data format which is specified here: https://api.highcharts.com/highstock/se ... nashi.data

I'm pretty sure that I have omitted some of your questions (not intentionally) for what I'm really sorry, so feel free to ask again uncovered questions.

I have a request though, please ask these questions in separated topics focused strictly on one specific thing. This is the way we work on this forum and it is much more convenient not only for us, but also for other users and you can receive your answer much quicker. We work as a support team where each of us is specialised in different field (accessibility experts, export server experts, mobile development experts and go on). This applies especially to accessibility related questions (including keyboard navigation as it is the part of Highcharts accessibility). Please gather all your accessibility questions, including these asked in this topic and create a new topic strictly related to accessibility where you will receive an answer from our accessibility expert. It is a very special field which should be treated with the utmost care and I don't have required knowledge to answer such question. Thats is why it is so important not to mix such questions because it introduces huge disruption in our workflow and interrupts flow of information because such topics as this one are really hard to use for other users.

Really sorry I couldn't help you more.
Best regards!