Stock chart with GUI - enhancement

[Sbirch556]

Highcharts currently offers a pretty impressive GUI to go with their Stock Charts, example can be found here.

Inspecting the network info it looks like the only data that is fed into this GUI is ohlcv data for the selected stock, data can be found here. Then highcharts calculates these indicators on the fly I assume as a user layers them on using js.

Getting ohlcv stock data is simple enough, I think this would be a good addition to the highcharter library. Issue was previously closed too.

[Sbirch556]

A hacky way to go about doing it is to include the scripts in an R Markdown and likely a Shiny app. Then use some type of select input to change the data source into something with ohclv data in the same json format.

Replacing with a different URL

https://demo-live-data.highcharts.com/aapl-ohlcv.json

---
title: "highcharts stock gui"
date: "10/22/2021"
output: html_document
---

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<script src="https://code.highcharts.com/modules/stock-tools.js"></script>
<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>
<script src="https://code.highcharts.com/stock/modules/hollowcandlestick.js"></script>

<script>
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ]);
    }

    Highcharts.stockChart('container-raw', {
        yAxis: [{
            labels: {
                align: 'left'
            },
            height: '80%',
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'left'
            },
            top: '80%',
            height: '20%',
            offset: 0
        }],
        tooltip: {
            shape: 'square',
            headerShape: 'callout',
            borderWidth: 0,
            shadow: false,
            positioner: function (width, height, point) {
                var chart = this.chart,
                    position;

                if (point.isHeader) {
                    position = {
                        x: Math.max(
                            // Left side limit
                            chart.plotLeft,
                            Math.min(
                                point.plotX + chart.plotLeft - width / 2,
                                // Right side limit
                                chart.chartWidth - width - chart.marginRight
                            )
                        ),
                        y: point.plotY
                    };
                } else {
                    position = {
                        x: point.series.chart.plotLeft,
                        y: point.series.yAxis.top - chart.plotTop
                    };
                }

                return position;
            }
        },
        series: [{
            type: 'ohlc',
            id: 'aapl-ohlc',
            name: 'AAPL Stock Price',
            data: ohlc
        }, {
            type: 'column',
            id: 'aapl-volume',
            name: 'AAPL Volume',
            data: volume,
            yAxis: 1
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 800
                },
                chartOptions: {
                    rangeSelector: {
                        inputEnabled: false
                    }
                }
            }]
        }
    });
});

</script>

<div id="container-raw" class="chart"></div>

However if I also include the highcharter library I then lose the GUI, with the below snippet.

# library(quantmod)
# library(highcharter)
#  
# x <- getSymbols("GOOG", auto.assign = FALSE)
# 
# hchart(x)

But on the front end when the user has the GUI they have access to a lot of very good technical indicators. I think this confirms that you get a lot of additional functionality on the front end at least from essentially nothing... including this script I believe handles all of the technical indicator calculations.

https://code.highcharts.com/stock/indicators/indicators-all.js

Parsing this data for later use in an R session will probably be a bit more complex and outside of the scope of what Highcharter is looking to achieve, but having it available on the front end I think would be awesome.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. Feel free to reopen it if you find it necessary.