Skip to content

Commit a3e8fa6

Browse files
bcdunbarbcdunbar
committed
new candlestick examples
1 parent 13c486b commit a3e8fa6

7 files changed

+266
-216
lines changed

‎_posts/plotly_js/candlestick-charts/2015-08-15-basic-candlestick-chart.html

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,61 @@
11
---
2-
name: Basic Candlestick Chart Example
3-
plot_url: https://codepen.io/plotly/embed/VazvBd/?height=443&theme-id=15263&default-tab=result
2+
name: Simple Candlestick Chart
3+
plot_url: https://codepen.io/plotly/embed/OpLmBe/?height=500&theme-id=15263&default-tab=result
44
language: plotly_js
55
suite: candlestick
6-
order: 3
6+
order: 1
77
sitemap: false
88
arrangement: horizontal
99
---
10-
function makeplot() {
11-
Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/candlestick_dataset_2007_2009.csv", function(data){ processData(data) } );
12-
};
13-
14-
function processData(allRows) {
15-
16-
var data_open = [], data_close = [], data_high = [], data_low = [], dates = [];
17-
18-
for (var i=0; i < allRows.length; i++) {
19-
row = allRows[i];
20-
data_close.push(parseFloat(row['close']));
21-
data_high.push(parseFloat(row['high']));
22-
data_low.push(parseFloat(row['low']));
23-
data_open.push(parseFloat(row['open']));
24-
}
25-
makePlotly( data_open, data_close, data_high, data_low );
26-
}
2710

28-
29-
function makePlotly( data_open, data_close, data_high, data_low ){
30-
var data_dates = getAllDays('2007-10-01', '2009-04-01');
31-
32-
var fig = PlotlyFinance.createCandlestick({
33-
open: data_open,
34-
high: data_high,
35-
low: data_low,
36-
close: data_close,
37-
dates: data_dates
38-
});
39-
40-
Plotly.newPlot('myDiv', fig.data, fig.layout);
11+
var trace1 = {
12+
13+
x: ['2017-01-04', '2017-01-05', '2017-01-06', '2017-01-09', '2017-01-10', '2017-01-11', '2017-01-12', '2017-01-13', '2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10', '2017-02-13', '2017-02-14', '2017-02-15'],
14+
15+
close: [116.019997, 116.610001, 117.910004, 118.989998, 119.110001, 119.75, 119.25, 119.040001, 120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995, 133.289993, 135.020004, 135.509995],
16+
17+
decreasing: {line: {color: '#7F7F7F'}},
18+
19+
high: [116.510002, 116.860001, 118.160004, 119.43, 119.379997, 119.93, 119.300003, 119.620003, 120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002, 133.820007, 135.089996, 136.270004],
20+
21+
increasing: {line: {color: '#17BECF'}},
22+
23+
line: {color: 'rgba(31,119,180,1)'},
24+
25+
low: [115.75, 115.809998, 116.470001, 117.940002, 118.300003, 118.599998, 118.209999, 118.809998, 118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003, 132.75, 133.25, 134.619995],
26+
27+
open: [115.849998, 115.919998, 116.779999, 117.949997, 118.769997, 118.739998, 118.900002, 119.110001, 118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007, 133.080002, 133.470001, 135.520004],
28+
29+
type: 'candlestick',
30+
xaxis: 'x',
31+
yaxis: 'y'
4132
};
4233

43-
// Utility Function to generate all days
44-
function getAllDays(start, end) {
45-
var s = new Date(start);
46-
var e = new Date(end);
47-
var a = [];
48-
49-
while(s < e) {
50-
a.push(s);
51-
s = new Date(s.setDate(
52-
s.getDate() + 1
53-
))
54-
}
55-
56-
return a;
34+
var data = [trace1];
35+
36+
var layout = {
37+
dragmode: 'zoom',
38+
margin: {
39+
r: 10,
40+
t: 25,
41+
b: 40,
42+
l: 60
43+
},
44+
showlegend: false,
45+
xaxis: {
46+
autorange: true,
47+
domain: [0, 1],
48+
range: ['2017-01-03 12:00', '2017-02-15 12:00'],
49+
rangeslider: {range: ['2017-01-03 12:00', '2017-02-15 12:00']},
50+
title: 'Date',
51+
type: 'date'
52+
},
53+
yaxis: {
54+
autorange: true,
55+
domain: [0, 1],
56+
range: [114.609999778, 137.410004222],
57+
type: 'linear'
58+
}
5759
};
5860

59-
makeplot();
61+
Plotly.plot('plotly-div', data, layout);

‎_posts/plotly_js/candlestick-charts/2015-08-15-candlestick-colors.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
name: Customizing Candlestick Chart Colors
3+
plot_url: https://codepen.io/plotly/embed/zZOMGP/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: candlestick
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv', function(err, rows){
12+
13+
function unpack(rows, key) {
14+
return rows.map(function(row) {
15+
return row[key];
16+
});
17+
}
18+
19+
var trace = {
20+
x: unpack(rows, 'Date'),
21+
close: unpack(rows, 'AAPL.Close'),
22+
high: unpack(rows, 'AAPL.High'),
23+
low: unpack(rows, 'AAPL.Low'),
24+
open: unpack(rows, 'AAPL.Open'),
25+
26+
// cutomise colors
27+
increasing: {line: {color: 'black'}},
28+
decreasing: {line: {color: 'red'}},
29+
30+
type: 'candlestick',
31+
xaxis: 'x',
32+
yaxis: 'y'
33+
};
34+
35+
var data = [trace];
36+
37+
var layout = {
38+
dragmode: 'zoom',
39+
showlegend: false,
40+
xaxis: {
41+
title: 'Date',
42+
range: ['2016-06-01 12:00', '2017-01-01 12:00']
43+
},
44+
yaxis: {
45+
autorange: true,
46+
}
47+
};
48+
49+
Plotly.plot('myDiv', data, layout);
50+
});

‎_posts/plotly_js/candlestick-charts/2015-08-15-candlestick-rangeselector.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
name: Add Rangeselector
3+
plot_url: https://codepen.io/plotly/embed/GWKmPe/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: candlestick
6+
order: 4
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var URL = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20in%20(%22GOOG%22)%20and%20startDate%20%3D%20%222016-01-01%22%20and%20endDate%20%3D%20%222016-09-30%22%0A%09%09&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback='
12+
13+
Plotly.d3.json(URL, (err, resp) => {
14+
if(err) console.log(err)
15+
16+
var data = formatData(resp)
17+
18+
var layout = {
19+
title: 'GOOG',
20+
xaxis: {
21+
range: [new Date(2016, 8, 1), new Date(2016, 8, 31)].map(toMS),
22+
rangeselector: {
23+
x: 0,
24+
y: 1.2,
25+
xanchor: 'left',
26+
font: {size:8},
27+
buttons: [{
28+
step: 'month',
29+
stepmode: 'backward',
30+
count: 1,
31+
label: '1 month'
32+
}, {
33+
step: 'month',
34+
stepmode: 'backward',
35+
count: 6,
36+
label: '6 months'
37+
}, {
38+
step: 'all',
39+
label: 'All dates'
40+
}],
41+
}
42+
},
43+
legend: {
44+
x: 0.5,
45+
xanchor: 'center',
46+
y: 1,
47+
yanchor: 'bottom',
48+
orientation: 'h'
49+
}
50+
}
51+
52+
53+
//Plotly.plot('ohlc', data.map(makeOHLC), layout)
54+
55+
Plotly.plot('candlestick', data.map(makeCandlestick), layout)
56+
})
57+
58+
function formatData(resp) {
59+
var quotes = resp.query.results.quote;
60+
var hash = {};
61+
62+
quotes.forEach(q => {
63+
var h = hash[q.Symbol]
64+
65+
if(!h) h = hash[q.Symbol] = makeBlank(q.Symbol)
66+
67+
h.x.push(q.Date)
68+
h.open.push(q.Open)
69+
h.high.push(q.High)
70+
h.low.push(q.Low)
71+
h.close.push(q.Close)
72+
})
73+
74+
return Object.keys(hash).map(k => hash[k])
75+
}
76+
77+
makeBlank = (name) => {
78+
return {
79+
name: name,
80+
x: [], open: [], high: [], low: [], close: []
81+
}
82+
}
83+
84+
makeCandlestick = (trace, i) => {
85+
trace.type = 'candlestick';
86+
87+
return trace
88+
}
89+
90+
toMS = (date) => date.getTime()

‎_posts/plotly_js/candlestick-charts/2015-08-15-candlestick-styling.html

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎_posts/plotly_js/candlestick-charts/2015-08-15-candlestick_index.html

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,5 @@
1212
order: 1
1313
---
1414

15-
<div class="tipbox row">
16-
17-
<h4 class="centered">
18-
Please note that the inclusion of the Plotly Finance javascript library is necessary when making candlestick charts.
19-
</h4>
20-
<a class="centered" href="https://github.com/etpinard/plotlyjs-finance">Click here to view the PlotlyFinance repository.</a><br>
21-
<a class="centered" href="https://raw.githubusercontent.com/etpinard/plotlyjs-finance/master/plotlyjs-finance.js">Click here to view the PlotlyFinance source code.</a>
22-
23-
24-
</div>
25-
2615
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","candlestick" | sort: "order" %}
2716
{% include auto_examples.html examples=examples %}

0 commit comments

Comments
 (0)