1.1.0 • Published 3 years ago
aframe-stock-ticker v1.1.0
aframe-stock-ticker
An aframe component for displaying live stock tickers. Also works with cryptocurrency and forex.
Usage
crypto-chart
To create a crypto chart, add the crypto-chart component.
<a-entity crypto-chart="id: ethereum; days: 30; width: 5; height: 2.5;"></a-entity>Uses the Coingecko API to gather data. This API doesn't require an API key, and works out of the box with the code above.
stock-chart
To create a stock chart, add the stock-chart component.
<a-entity stock-chart="symbol: AMC; interval: 30min; length: 100; width: 5; height: 2.5;"></a-entity>Uses the Twelve Data API to gather data. This API works for any asset type - stocks, forex, and crypto - but it requires an API key. An API key can be acquired here for free, with a limit of 800 requests / day.
Once you have a Twelve API key, set window.TWELVE_API_KEY equal to it, as seen at the top of the example.
Properties
crypto-chart
Properties
| Property | Description | Default |
|---|---|---|
| id | id of the target token. Full list available as a JSON here | "Ethereum" |
| days | how many days back to display data from. Can only be: 1,7,14,30,90,180,365,max | 14 |
| width | width of the chart | 4 |
| height | height of the chart | 2 |
| refreshRate | how often to refresh the chart data, in seconds | 30 |
| backgroundColor | the color of the chart background | "#333" |
| enableBackground | whether to enable a background behind the candles | true |
| enableTitle | whether to display the ticker name on the chart | true |
| enablePrices | whether to display the prices on the chart | true |
| coloredWicks | whether to display wicks in the candles | true |
Members
| Member | Description | Path |
|---|---|---|
| timeseries | the current timeseries data. | el.components"crypto-chart".timeseries |
stock-chart
Properties
| Property | Description | Default |
|---|---|---|
| symbol | symbol of the target asset. | "AMC" |
| interval | chart interval, how long each candle represents | "15min" |
| length | how many candles to display | 100 |
| width | width of the chart | 4 |
| height | height of the chart | 2 |
| refreshRate | how often to refresh the chart data, in seconds | 30 |
| backgroundColor | the color of the chart background | "#333" |
| enableBackground | whether to enable a background behind the candles | true |
| enableTitle | whether to display the ticker name on the chart | true |
| enablePrices | whether to display the prices on the chart | true |
| coloredWicks | whether to display wicks in the candles | true |
Members
| Member | Description | Path |
|---|---|---|
| timeseries | the current timeseries data. | el.components"stock-chart".timeseries |
Events
| Event | Description | Event.detail |
|---|---|---|
| price_increase | fired on chart refresh, if the price has increased | {name: asset name, price: current price, candle: latest candle} |
| price_decrease | fired on chart refresh, if the price has decreased | {name: asset name, price: current price, candle: latest candle} |