y2kpooh's public fiddles
-
Candlestick chart
A candlestick chart is used to describe price movements of a security or currency for a designated span of time. Candlesticks are usually composed of the body, and an upper and a lower shadow (wick). The wick illustrates the highest and lowest prices during the time interval represented. The body illustrates the opening and closing prices. If the close price is higher than it open, the body is light or unfilled, otherwise - dark or filled. <h2>Making Candlestick with amCharts</h2> Our serial chart has a special graph type - <strong>candlestick</strong>. To have such a graph you only need to set <strong>openField</strong>, <strong>closeField</strong>, <strong>highField</strong> and <strong>lowField</strong> for the graph and have these values in your data. Candlestick graph is quite similar to <a href="/demos/ohlc-chart/">OHLC graph</a> type, which is also supported by our library. <h2>Candlesticks for long time periods</h2> If you zoom-out this chart, you will notice that candlesticks are getting more and more narrow. At some point, if you'd have even more data, they would become quite unreadable. To solve this, you could write a zoom-event handler which would change the graph type to a simple line chart if the number of data points exceeds some number X. As an alternative for this we recommend checking our <a href="/demos/multiple-panels/">Stock chart</a> which accumulate data into longer periods - for example, if you have daily data but the selected time span is very long, our stock chart can accumulate daily data into weekly or monthly or even yearly data.
-
0xccsqb0
D3 3.x, HTML, CSS, JavaScript
-
2uvq6
D3 3.x, HTML, CSS, JavaScript
-
VFR6b
D3 3.x, HTML, CSS, JavaScript
-
hWwbr
No-Library (pure JS), HTML, CSS, JavaScript
-
4PcEN
D3 3.x, HTML, CSS, JavaScript
-
zVX8r
D3 3.x, HTML, CSS, JavaScript
-
Mxtjs
jQuery 1.9.1, HTML, CSS, JavaScript
-
SF4Q3
D3 3.x, HTML, CSS, JavaScript
-
jS8s6
D3 3.x, HTML, CSS, JavaScript
-
RGzS9
No-Library (pure JS), HTML, CSS, JavaScript
-
3seSu
D3 3.x, HTML, CSS, JavaScript
-
QbVJ4
D3 3.x, HTML, CSS, JavaScript
-
EnM9j
D3 3.x, HTML, CSS, JavaScript
-
Bz5aR
D3 3.x, HTML, CSS, JavaScript
-
UuE8c
D3 3.x, HTML, CSS, JavaScript
-
23wmc
D3 3.x, HTML, CSS, JavaScript
-
w93YK
D3 3.x, HTML, CSS, JavaScript
-
We7Lt
D3 3.x, HTML, CSS, JavaScript
-
gdsCK
D3 3.x, HTML, CSS, JavaScript