📦 An aframe component for displaying live stock tickers.

Mitarai

Last update: Jun 26, 2022

Related tags

Overview

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}

This component was developed in partnership with Planet Voodoo® (Voodoo LLC) as part of their 'WebXR Wizardry' initiative.

Displaying actual age in percentage with 9 signs after dot (floating number)

Actual Age Chrome Extension Displaying actual age in percentage with 9 signs after dot (floating number) Features Popup You can select your Birth date

Nov 2, 2022

JavaScript API based capstone project using TVmaze API for displaying and interacting with items from the data base.

Yuriy Chamkoriyski & Bonke Gcobo Javascript capstone project API-based webapp from Module 2 at Microverse Wireframe requirements The Home Page low fid

May 30, 2022

App for displaying geospatial data on queues on the Polish-Ukrainian border.

Live app embedded here. App helps coordinate volunteer work with refugees from Ukraine on Polish-Belarusian Border. Data comes from Grupa Granica – a

Mar 10, 2022

Element for displaying HTML based on THREE.js HTMLMesh

AFrame-HTML a-entity html="#my-interface" position="0 1.5 -0.5"/a-entity Display an interactive HTML element in the scene. html-pointer component

Jan 3, 2023

A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual te

Sep 13, 2022

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

Jun 21, 2022

Releases(v1.1.0)

v1.1.0(May 28, 2021)
Features

crypto-chart component

Uses the Coingecko API, meaning it doesn't require an API key

events

"price_increase" and "price_decrease" events are now fired on chart refresh

Other

Fixed candle wicks, they are now completely accurate

As a side effect, candles will no longer extend beyond the set width and height

refreshRate property is now in seconds, not minutes

Source code(tar.gz)
Source code(zip)
v1.0.0(May 28, 2021)

initial release
Source code(tar.gz)
Source code(zip)