new OHLC examples

Author: bcdunbar

_posts/plotly_js/ohlc/2015-08-15-customise-colors.html

@@ -0,0 +1,50 @@
+---
+name: Customise OHLC Chart Colors
+plot_url: https://codepen.io/plotly/embed/jBNerj/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: ohlc
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv', function(err, rows){
+      
+function unpack(rows, key) {
+  return rows.map(function(row) { 
+    return row[key]; 
+  });
+}
+  
+var trace = {
+  x: unpack(rows, 'Date'), 
+  close: unpack(rows, 'AAPL.Close'), 
+  high: unpack(rows, 'AAPL.High'),  
+  low: unpack(rows, 'AAPL.Low'), 
+  open: unpack(rows, 'AAPL.Open'),
+
+  // cutomise colors 
+  increasing: {line: {color: 'black'}},
+  decreasing: {line: {color: 'red'}},
+	
+  type: 'ohlc', 
+  xaxis: 'x', 
+  yaxis: 'y'
+};
+
+var data = [trace];
+  
+var layout = {
+  dragmode: 'zoom', 
+  showlegend: false, 
+  xaxis: {
+    autorange: true, 
+    title: 'Date'
+  }, 
+  yaxis: {
+    autorange: true, 
+  }
+};
+
+Plotly.plot('myDiv', data, layout); 
+});

_posts/plotly_js/ohlc/2015-08-15-ohlc-with-rangeselector.html

@@ -0,0 +1,90 @@
+---
+name: Add Rangeselector
+plot_url: https://codepen.io/plotly/embed/GWKvrm/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: ohlc
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+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='
+
+Plotly.d3.json(URL, (err, resp) => {
+  if(err) console.log(err)
+  
+  var data = formatData(resp)
+  
+  var layout = {
+    title: 'GOOG',
+    xaxis: {
+      range: [new Date(2016, 8, 1), new Date(2016, 8, 31)].map(toMS),
+      rangeselector: {
+        x: 0,
+        y: 1.2,
+        xanchor: 'left',
+        font: {size:8},
+        buttons: [{
+            step: 'month',
+            stepmode: 'backward',
+            count: 1,
+            label: '1 month'
+        }, {
+            step: 'month',
+            stepmode: 'backward',
+            count: 6,
+            label: '6 months'
+        }, {
+            step: 'all',
+            label: 'All dates'
+        }],
+      }
+    },
+    legend: {
+      x: 0.5,
+      xanchor: 'center',
+      y: 1,
+      yanchor: 'bottom',
+      orientation: 'h'
+    }
+  }
+  
+  
+  //Plotly.plot('ohlc', data.map(makeOHLC), layout)
+  
+  Plotly.plot('ohlc', data.map(makeOHLC), layout)
+})
+
+function formatData(resp) {
+  var quotes = resp.query.results.quote;
+  var hash = {};
+  
+  quotes.forEach(q => {
+    var h = hash[q.Symbol]
+    
+    if(!h) h = hash[q.Symbol] = makeBlank(q.Symbol)
+    
+    h.x.push(q.Date)
+    h.open.push(q.Open)
+    h.high.push(q.High)
+    h.low.push(q.Low)
+    h.close.push(q.Close)
+  })
+  
+  return Object.keys(hash).map(k => hash[k])
+}
+
+makeBlank = (name) => { 
+  return {
+    name: name,
+    x: [], open: [], high: [], low: [], close: []
+  }
+}  
+
+makeOHLC = (trace, i) => {
+  trace.type = 'ohlc';
+  
+  return trace
+}
+
+toMS = (date) => date.getTime()

_posts/plotly_js/ohlc/2015-08-15-ohlc_index.html

@@ -11,13 +11,6 @@
 display_as: financial
 order: 0
 ---
-<div class="tipbox row">
-  <h4 class="centered">
-    Please note that the inclusion of the Plotly Finance javascript library is necessary when making OHLC charts.
-  </h4>
-  <a class="centered" href="https://github.com/etpinard/plotlyjs-finance">Click here to view the PlotlyFinance repository.</a><br>
-  <a class="centered" href="https://raw.githubusercontent.com/etpinard/plotlyjs-finance/master/plotlyjs-finance.js">Click here to view the PlotlyFinance source code.</a>
-</div>
 
 {% assign examples = site.posts | where:"language","plotly_js" | where:"suite","ohlc" | sort: "order" %}
 {% include auto_examples.html examples=examples %}

_posts/plotly_js/ohlc/2015-08-15-simple-example-with-datetime-object.html

@@ -1,57 +1,90 @@
 ---
-name: Customizing the Figure with Text and Annotations
-plot_url: https://codepen.io/plotly/embed/dYgmYd/?height=443&theme-id=15263&default-tab=result
+name: Customizing the Figure with Shapes and Annotations
+plot_url: https://codepen.io/plotly/embed/mWbWqw/?height=500&theme-id=15263&default-tab=result
 language: plotly_js
 suite: ohlc
-order: 4
+order: 2
 sitemap: false
 arrangement: horizontal
 ---
 
-var fig = PlotlyFinance.createOHLC(
-  {
-    open: [179.039986, 175.57001299999999, 174.54003, 174.769981, 174.47002800000001, 175.81997900000002, 176.150026, 172.76000200000001, 173.30998799999998, 175.28000600000001, 172.959993, 172.39999399999999, 166.84002699999999, 165.86003099999999, 158.58997199999999, 164.57000199999999, 156.85998500000002, 152.32000199999999, 148.17998700000001, 150.90999600000001, 142.03000600000001, 133.86001999999999, 138.49003200000001, 130.57002399999999, 142.60000600000001, 139.94001200000002, 131.849974, 127.270016, 129.80001999999999, 124.910028, 119.61998700000001, 108.250028, 111.919991, 108.010002, 103.999977, 91.959981999999997, 100.48003, 85.910017000000011, 93.349967000000007, 85.700018999999998, 104.54997, 116.25999099999999, 103.84002700000001],
-    high: [179.749989, 177.810011, 177.06996699999999, 176.939978, 175.45002399999998, 177.499977, 176.229975, 174.88002399999999, 175.75999099999999, 176.249989, 173.499966, 173.499966, 168.67997600000001, 167.90998500000001, 162.40000499999999, 164.88996900000001, 159.960016, 154.99000900000001, 152.98996399999999, 150.90999600000001, 147.689989, 142.499977, 138.50997900000002, 135.42997600000001, 144.20000300000001, 140.249966, 135.79999699999999, 130.94998000000001, 134.789974, 129.80001999999999, 119.679976, 114.99998899999999, 112.36000800000001, 108.79001299999999, 106.500028, 98.780011000000002, 101.5, 96.33000899999999, 95.799970000000002, 99.999972, 110.53, 116.39999399999999, 106.999972],
-    low: [175.04997399999999, 173.82001299999999, 171.810034, 173.61000799999999, 171.88996900000001, 175.57001299999999, 171.66001699999998, 172.60998500000002, 172.189989, 172.749989, 169.039984, 165.000011, 163.999989, 160.810022, 157.650003, 151.459982, 149.789984, 148.79997399999999, 145.999977, 146.499989, 140.36000799999999, 132.14999399999999, 127.83001499999999, 120.679998, 136.310022, 130.65997300000001, 126.660028, 125.14999399999999, 128.520004, 123.00001100000001, 100.58999900000001, 106.29997, 107.39000800000001, 99.999972, 94.650009999999995, 87.539968000000002, 88.949980000000011, 85.679997999999998, 86.600013000000004, 85.000022999999999, 101.020009, 103.14003100000001, 97.890031000000008],
-    close: [175.73996399999999, 175.38996900000001, 173.53000600000001, 175.84000600000002, 174.289984, 176.789974, 172.54999699999999, 173.63996900000001, 174.670019, 173.73999799999999, 169.52999499999999, 166.19001200000002, 166.960016, 161.22000500000001, 160.18002099999998, 157.919996, 151.67998700000001, 151.60998500000002, 152.64998199999999, 148.939978, 140.36000799999999, 139.88002399999999, 127.83001499999999, 134.08997199999999, 140.90999399999998, 131.05000900000002, 126.840006, 128.709982, 131.92997600000001, 128.23999799999999, 105.259979, 113.65998500000001, 109.11998700000001, 100.10000100000001, 97.069979000000004, 98.140003000000007, 89.15997800000001, 89.789979000000002, 88.739981999999998, 96.799993000000001, 110.260007, 104.079992, 97.950018999999998],
-    dates: [[2008,08,15], [2008,08,18], [2008,08,19], [2008,08,20], [2008,08,21], [2008,08,22], [2008,08,25], [2008,08,26], [2008,08,27], [2008,08,28], [2008,08,29], [2008,09,02], [2008,09,03], [2008,09,04], [2008,09,05], [2008,09,08], [2008,09,09], [2008,09,10], [2008,09,11], [2008,09,12], [2008,09,15], [2008,09,16], [2008,09,17], [2008,09,18], [2008,09,19], [2008,09,22], [2008,09,23], [2008,09,24], [2008,09,25], [2008,09,26], [2008,09,29], [2008,09,30], [2008,10,01], [2008,10,02], [2008,10,03], [2008,10,06], [2008,10,07], [2008,10,08], [2008,10,09], [2008,10,10], [2008,10,13], [2008,10,14], [2008,10,15]].map(function(d) { return new Date(d[0], d[1]-1, d[2]); })
-  }
-);
+var trace1 = {
+  
+  x: ['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'], 
+  
+  close: [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], 
+  
+  decreasing: {line: {color: '#7F7F7F'}}, 
+  
+  high: [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], 
+  
+  increasing: {line: {color: '#17BECF'}}, 
+  
+  line: {color: 'rgba(31,119,180,1)'}, 
+  
+  low: [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], 
+  
+  open: [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], 
+  
+  type: 'ohlc', 
+  xaxis: 'x', 
+  yaxis: 'y'
+};
 
-fig.layout.title = 'The Great Recession';
+var data = [trace1];
 
-fig.layout.annotations = [{
-  text: "the fall of Lehman Brothers",
-  x: '2008-09-15',
-  y: 1.02,
-  xref: 'x',
-  yref: 'paper',
-  showarrow: false,
-  xanchor: 'left'},
-  {
-  text: "AAPL Stock",
-  x: '-0.05',
-  y: 0.5,
-  xref: 'paper',
-  yref: 'paper',
-  font:{
-    size: 18
+var layout = {
+  dragmode: 'zoom', 
+  margin: {
+    r: 10, 
+    t: 25, 
+    b: 40, 
+    l: 60
+  }, 
+  showlegend: false, 
+  xaxis: {
+    autorange: true, 
+    rangeslider: {range: ['2017-01-17 12:00', '2017-02-10 12:00']}, 
+    title: 'Date', 
+    type: 'date'
+  }, 
+  yaxis: {
+    autorange: true, 
+    type: 'linear'
   },
-  showarrow: false,
-  xanchor: 'right',
-  textangle: 270
-}];
 
-fig.layout.shapes = [{
-  x0: '2008-09-15',
-  x1: '2008-09-15',
-  type: 'line',
-  y0: 0,
-  y1: 1,
-  xref: 'x',
-  yref: 'paper',
-  line: {
-    color: 'rgb(40,40,40)',
-    width: 0.5
-  }
-}];
+  annotations: [
+    {
+      x: '2017-01-31',
+      y: 0.9,
+      xref: 'x',
+      yref: 'paper',
+      text: 'largest movement',
+      font: {color: 'magenta'},
+      showarrow: true,
+      xanchor: 'right',
+      ax: -20,
+      ay: 0
+    }
+  ],
+
+  shapes: [
+      {
+          type: 'rect',
+          xref: 'x',
+          yref: 'paper',
+          x0: '2017-01-31',
+          y0: 0,
+          x1: '2017-02-01',
+          y1: 1,
+          fillcolor: '#d3d3d3',
+          opacity: 0.2,
+          line: {
+              width: 0
+          }
+      }
+    ]
+};
+
+Plotly.plot('plotly-div', data, layout);