From fd3bfdea5d55d68b1b929ea25c35a4ee8a04c97b Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Wed, 28 Jan 2015 17:10:19 +0300
Subject: [PATCH 01/16] Initial commit

---
 datahandler/compress.js       | 245 ++++++++++++++++++++++++++++++++++
 extras/candlestick-plotter.js |  79 +++++++++++
 tests/candlestick.html        |  52 ++++++++
 3 files changed, 376 insertions(+)
 create mode 100644 datahandler/compress.js
 create mode 100644 extras/candlestick-plotter.js
 create mode 100644 tests/candlestick.html

diff --git a/datahandler/compress.js b/datahandler/compress.js
new file mode 100644
index 000000000..71ae2ee9e
--- /dev/null
+++ b/datahandler/compress.js
@@ -0,0 +1,245 @@
+/**
+ * @license
+ * Copyright 2015 Petr Shevtsov (petr.shevtsov@gmail.com)
+ * MIT-licensed (http://opensource.org/licenses/MIT)
+ *
+ * Compress data handler "compresses" chart data annually, quarterly, monthly,
+ * weekly or daily.
+ *
+ * See "tests/candlestick.html" for demo.
+ */
+
+/*global Dygraph:false */
+
+(function() {
+  "use strict";
+
+  Date.prototype.getWeek = function() {
+    var d = new Date(+this);
+    d.setHours(0,0,0);
+    d.setDate(d.getDate()+4-(d.getDay()||7));
+    return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
+  };
+  Date.prototype.getWeekEndPoints = function(start) {
+    start = start || 0;
+    var today = new Date(this.setHours(0, 0, 0, 0));
+    var day = today.getDay() - start;
+    var date = today.getDate() - day;
+
+    var StartDate = new Date(today.setDate(date));
+    var EndDate = new Date(today.setDate(date + 7));
+
+    return [StartDate, EndDate];
+  };
+  Date.prototype.getQuarter = function() {
+    var d = new Date(+this);
+    var m = Math.floor(d.getMonth()/3) + 2;
+    return m > 4 ? m - 5 : m;
+  };
+  Dygraph.DataHandlers.CompressHandler = function() {};
+  var CompressHandler = Dygraph.DataHandlers.CompressHandler;
+  CompressHandler.prototype = new Dygraph.DataHandlers.DefaultHandler();
+  CompressHandler.prototype.seriesToPoints = function(series, setName, boundaryIdStart) {
+    var compress = {
+      titles: [
+        "annually",
+        "quarterly",
+        "monthly",
+        "weekly",
+        "daily"
+      ],
+      days: [
+        365,
+        90,
+        30,
+        7,
+        1
+      ],
+      bars: [],
+      barsRange: [20, 50]
+    };
+    var firstItem = series[0];
+    var lastItem = series[series.length - 1];
+    var dateDiff = lastItem[0] - firstItem[0];
+    var dayMs = 1000 * 60 * 60 * 24;
+    var compressedSeries = [];
+    var ratio = 1;
+    var points = [];
+    var bounds = [];
+    var idx;
+    var compressTitle;
+
+    for (var i = 0; i < compress.days.length; i++) {
+      ratio = compress.days[i] * dayMs;
+      var bars = Math.round(dateDiff / ratio);
+      compress.bars.push(bars);
+    }
+
+    idx = compress.bars.reduce(function(previous, current, index) {
+      if (current < compress.barsRange[1]) {
+        return index;
+      }
+      return previous;
+    }, 0);
+    bounds.push(idx);
+
+    idx = compress.bars.reduceRight(function(previous, current, index) {
+      if (current > compress.barsRange[0]) {
+        return index;
+      }
+      return previous;
+    }, compress.bars.length - 1);
+    bounds.push(idx);
+
+    if (bounds[0] === bounds[1]) {
+      compressTitle = compress.titles[bounds[0]];
+    } else {
+      var lower_idx = bounds[0];
+      var lower = Math.abs(compress.bars[idx] - compress.barsRange[0]);
+      var higher_idx = bounds[1];
+      var higher = Math.abs(compress.bars[idx] - compress.barsRange[1]);
+      var min = Math.min(lower, higher);
+      idx = (min === lower) ? lower_idx : higher_idx;
+      compressTitle = compress.titles[idx];
+    }
+
+    var doCompress = function(title) {
+      var period;
+      var currentPeriod;
+      var buffer = [];
+      var compressed = [];
+      var getPeriodEndPoints = function(period, date) {
+        var endpoints = [];
+        var currentYear = new Date(date).getFullYear();
+        var currentPeriod;
+        switch (period) {
+          case "annually":
+            endpoints.push(new Date(currentYear, 0, 1));
+          endpoints.push(new Date(currentYear, 11, 31));
+          break;
+          case "quarterly":
+            currentPeriod = new Date(item[0]).getQuarter();
+          if (currentPeriod === 0) {
+            endpoints.push(new Date(currentYear, 0, 1));
+            endpoints.push(new Date(currentYear, 2, 31));
+          } else if (currentPeriod === 1) {
+            endpoints.push(new Date(currentYear, 3, 1));
+            endpoints.push(new Date(currentYear, 5, 30));
+          } else if (currentPeriod === 2) {
+            endpoints.push(new Date(currentYear, 6, 1));
+            endpoints.push(new Date(currentYear, 8, 30));
+          } else {
+            endpoints.push(new Date(currentYear, 9, 1));
+            endpoints.push(new Date(currentYear, 11, 31));
+          }
+          break;
+          case "monthly":
+            currentPeriod = new Date(item[0]).getMonth();
+          endpoints.push(new Date(currentYear, currentPeriod, 1));
+          endpoints.push(new Date(currentYear, currentPeriod + 1, 0));
+          break;
+          case "weekly":
+            endpoints = new Date(item[0]).getWeekEndPoints();
+          break;
+          case "daily":
+            endpoints = [new Date(item[0]), new Date(item[0])];
+          break;
+        }
+        return endpoints;
+      };
+      for (var i = 0; i < series.length; i++) {
+        var item = series[i];
+        switch (title) {
+          case "annually":
+            currentPeriod = new Date(item[0]).getFullYear();
+          break;
+          case "quarterly":
+            currentPeriod = new Date(item[0]).getQuarter();
+          break;
+          case "monthly":
+            currentPeriod = new Date(item[0]).getMonth();
+          break;
+          case "weekly":
+            currentPeriod = new Date(item[0]).getWeek();
+          break;
+          case "daily":
+            currentPeriod = new Date(item[0]).getDay();
+          break;
+        }
+        if (period === undefined) {
+          period = currentPeriod;
+        }
+        if (period === currentPeriod) {
+          buffer.push(item);
+        } else {
+          compressed.push(buffer);
+          buffer = [];
+          buffer.push(item);
+          period = currentPeriod;
+        }
+      }
+      return compressed.reduce(function(prev, curr, index) {
+        var date = curr[curr.length - 1][0];
+        var value;
+
+        // Check if we have more or less full period for the first bar
+        if (index === 0) {
+          var endpoints = getPeriodEndPoints(title, curr[0][0]);
+          var range = [];
+          range.push(curr[0][0]); // first date
+          range.push(date); // last date
+
+          if (endpoints[0] !== range[0] || endpoints[1] !== range[1]) {
+            return prev;
+          }
+        }
+
+        switch (setName.toLowerCase()) {
+          case "open":
+            value = curr[0][1]; // Open of the first day
+          break;
+          case "high":
+            // Highest High of all the daily Highs
+            value = Math.max.apply(null, curr.reduce(function(p, c) {
+            p.push(c[1]);
+            return p;
+          }, []));
+          break;
+          case "low":
+            // Lowest Low of all the daily Lows
+            value = Math.min.apply(null, curr.reduce(function(p, c) {
+            p.push(c[1]);
+            return p;
+          }, []));
+          break;
+          case "close":
+            value = curr[curr.length - 1][1]; // Close of the last day
+          break;
+        }
+        prev.push([date, value]);
+
+        return prev;
+      }, []);
+    };
+
+    compressedSeries = doCompress(compressTitle);
+
+    for (i = 0; i < compressedSeries.length; ++i) {
+      var item = compressedSeries[i];
+      var yraw = item[1];
+      var yval = yraw === null ? null : Dygraph.DataHandler.parseFloat(yraw);
+      var point = {
+        x : NaN,
+        y : NaN,
+        xval : Dygraph.DataHandler.parseFloat(item[0]),
+        yval : yval,
+        name : setName,
+        idx : i + boundaryIdStart
+      };
+      points.push(point);
+    }
+    this.onPointsCreated_(compressedSeries, points);
+    return points;
+  };
+
+})();
diff --git a/extras/candlestick-plotter.js b/extras/candlestick-plotter.js
new file mode 100644
index 000000000..d99bf4906
--- /dev/null
+++ b/extras/candlestick-plotter.js
@@ -0,0 +1,79 @@
+/**
+ * The Candle chart plotter is adapted from code written by
+ * Zhenlei Cai (jpenguin@gmail.com)
+ * https://github.com/danvk/dygraphs/pull/141/files
+ */
+
+/*global Dygraph:false */
+
+(function() {
+  "use strict";
+
+  var candlePlotter = function(e) {
+    if (e.seriesIndex > 3) {
+      Dygraph.Plotters.linePlotter(e);
+    }
+    // This is the officially endorsed way to plot all the series at once.
+    if (e.seriesIndex !== 0) return;
+
+    var prices = [];
+    var price;
+    var sets = e.allSeriesPoints.slice(0, 4); // Slice first four sets for candlestick chart
+    for (var p = 0 ; p < sets[0].length; p++) {
+      price = {
+        open : sets[0][p].yval,
+        close : sets[1][p].yval,
+        high : sets[2][p].yval,
+        low : sets[3][p].yval,
+        openY : sets[0][p].y,
+        closeY : sets[1][p].y,
+        highY : sets[2][p].y,
+        lowY : sets[3][p].y
+      };
+      prices.push(price);
+    }
+
+    var area = e.plotArea;
+    var ctx = e.drawingContext;
+    ctx.strokeStyle = '#202020';
+    ctx.lineWidth = 0.6;
+
+    var minBarWidth = 2;
+    var numBars = prices.length + 1; // To compensate the probably removed first "incomplete" bar
+    var barWidth = Math.round((area.w / numBars) / 2);
+    if (barWidth % 2 !== 0) {
+      barWidth++;
+    }
+    barWidth = Math.max(barWidth, minBarWidth);
+
+    for (p = 0 ; p < prices.length; p++) {
+      ctx.beginPath();
+
+      price = prices[p];
+      var topY = area.h * price.highY + area.y;
+      var bottomY = area.h * price.lowY + area.y;
+      var centerX = area.x + sets[0][p].x * area.w;
+      ctx.moveTo(centerX, topY);
+      ctx.lineTo(centerX, bottomY);
+      ctx.closePath();
+      ctx.stroke();
+      var bodyY;
+      if (price.open > price.close) {
+        ctx.fillStyle ='rgba(244,44,44,1.0)';
+        bodyY = area.h * price.openY + area.y;
+      }
+      else {
+        ctx.fillStyle ='rgba(44,244,44,1.0)';
+        bodyY = area.h * price.closeY  + area.y;
+      }
+      var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
+      ctx.fillRect(centerX - barWidth / 2, bodyY, barWidth,  bodyHeight);
+    }
+  };
+
+  Dygraph.update(Dygraph.Plotters, {
+    candlePlotter: function(e) {
+      candlePlotter(e);
+    }
+  });
+})();
diff --git a/tests/candlestick.html b/tests/candlestick.html
new file mode 100644
index 000000000..0fd6ffd55
--- /dev/null
+++ b/tests/candlestick.html
@@ -0,0 +1,52 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>Candlestick Chart Demo</title>
+    <script type="text/javascript" src="../dygraph-dev.js"></script>
+    <script type="text/javascript" src="../extras/candlestick-plotter.js"></script>
+
+    <style type="text/css">
+      body {
+        max-width: 750px;
+      }
+      div.chart {
+        width: 640px;
+        height: 320px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="candlechart" class=chart></div>
+    <script type="text/javascript">
+      var candleData =
+      "Date,Open,Close,High,Low\n";
+      for (var i = 0; i <= 365 * 10; i++) {
+        var d = new Date(i
+                         * 1000 // ms
+                         * 60   // sec
+                         * 60   // min
+                         * 24   // hr
+                        );
+        var dateStr = d.toISOString().match(/^\d{4}-\d{2}-\d{2}/)[0];
+        var min = 100;
+        var max = 400;
+        var open = Math.random() * (max - min) + min;
+        var close = Math.random() * (max - min) + min;
+        var high = Math.max(open, close) * 1.25;
+        var low = Math.min(open, close) * 0.75;
+
+        candleData += [dateStr, open, close, high, low].join(",") + "\n";
+      }
+      g = new Dygraph(
+        document.getElementById("candlechart"),
+        candleData,
+        {
+          plotter: Dygraph.Plotters.candlePlotter,
+          dataHandler: Dygraph.DataHandlers.CompressHandler
+        }
+      );
+    </script>
+  </body>
+</html>

From a064dec78c54b81374bf7129782dc3c41edfb310 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Wed, 28 Jan 2015 17:10:51 +0300
Subject: [PATCH 02/16] Adding compress data handler

---
 dygraph-dev.js       | 3 ++-
 generate-combined.sh | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/dygraph-dev.js b/dygraph-dev.js
index 26a96df96..5d519a347 100644
--- a/dygraph-dev.js
+++ b/dygraph-dev.js
@@ -41,7 +41,8 @@
     "datahandler/bars.js",
     "datahandler/bars-error.js",
     "datahandler/bars-custom.js",
-    "datahandler/bars-fractions.js"
+    "datahandler/bars-fractions.js",
+    "datahandler/compress.js"
   ];
 
   for (var i = 0; i < source_files.length; i++) {
diff --git a/generate-combined.sh b/generate-combined.sh
index 26d4a422e..01091e81f 100755
--- a/generate-combined.sh
+++ b/generate-combined.sh
@@ -32,7 +32,8 @@ GetSources () {
     datahandler/bars.js \
     datahandler/bars-custom.js \
     datahandler/bars-error.js \
-    datahandler/bars-fractions.js 
+    datahandler/bars-fractions.js \
+    datahandler/compress.js 
   do
       echo "$F"
   done

From 9b78b9808ca327df3522b15734fbc84b5db04a5f Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Tue, 24 Mar 2015 01:56:11 +0300
Subject: [PATCH 03/16] Do not modify built-in objects

---
 datahandler/compress.js | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/datahandler/compress.js b/datahandler/compress.js
index 71ae2ee9e..063070559 100644
--- a/datahandler/compress.js
+++ b/datahandler/compress.js
@@ -14,16 +14,22 @@
 (function() {
   "use strict";
 
-  Date.prototype.getWeek = function() {
-    var d = new Date(+this);
+  /**
+   * Get week number for date
+   */
+  var getWeek = function(d) {
+    var d = new Date(+d);
     d.setHours(0,0,0);
     d.setDate(d.getDate()+4-(d.getDay()||7));
     return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
   };
-  Date.prototype.getWeekEndPoints = function(start) {
-    start = start || 0;
-    var today = new Date(this.setHours(0, 0, 0, 0));
-    var day = today.getDay() - start;
+  /**
+   * Get week endpoints (i.e. start of the week and end of the week dates) for date
+   */
+  var getWeekEndPoints = function(d) {
+    var d = new Date(+d);
+    var today = new Date(d.setHours(0, 0, 0, 0));
+    var day = today.getDay();
     var date = today.getDate() - day;
 
     var StartDate = new Date(today.setDate(date));
@@ -31,8 +37,11 @@
 
     return [StartDate, EndDate];
   };
-  Date.prototype.getQuarter = function() {
-    var d = new Date(+this);
+  /**
+   * Get quarter for date
+   */
+  var getQuarter = function(d) {
+    var d = new Date(+d);
     var m = Math.floor(d.getMonth()/3) + 2;
     return m > 4 ? m - 5 : m;
   };
@@ -118,7 +127,7 @@
           endpoints.push(new Date(currentYear, 11, 31));
           break;
           case "quarterly":
-            currentPeriod = new Date(item[0]).getQuarter();
+            currentPeriod = getQuarter(new Date(item[0]));
           if (currentPeriod === 0) {
             endpoints.push(new Date(currentYear, 0, 1));
             endpoints.push(new Date(currentYear, 2, 31));
@@ -139,7 +148,7 @@
           endpoints.push(new Date(currentYear, currentPeriod + 1, 0));
           break;
           case "weekly":
-            endpoints = new Date(item[0]).getWeekEndPoints();
+            endpoints = getWeekEndPoints(new Date(item[0]));
           break;
           case "daily":
             endpoints = [new Date(item[0]), new Date(item[0])];
@@ -154,13 +163,13 @@
             currentPeriod = new Date(item[0]).getFullYear();
           break;
           case "quarterly":
-            currentPeriod = new Date(item[0]).getQuarter();
+            currentPeriod = getQuarter(new Date(item[0]));
           break;
           case "monthly":
             currentPeriod = new Date(item[0]).getMonth();
           break;
           case "weekly":
-            currentPeriod = new Date(item[0]).getWeek();
+            currentPeriod = getWeek(new Date(item[0]));
           break;
           case "daily":
             currentPeriod = new Date(item[0]).getDay();

From cd387ccd66f5c14c48706cc6e47263594ec74047 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Tue, 24 Mar 2015 01:59:06 +0300
Subject: [PATCH 04/16] Link compress data handler separately

---
 dygraph-dev.js         | 3 +--
 tests/candlestick.html | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dygraph-dev.js b/dygraph-dev.js
index 5d519a347..26a96df96 100644
--- a/dygraph-dev.js
+++ b/dygraph-dev.js
@@ -41,8 +41,7 @@
     "datahandler/bars.js",
     "datahandler/bars-error.js",
     "datahandler/bars-custom.js",
-    "datahandler/bars-fractions.js",
-    "datahandler/compress.js"
+    "datahandler/bars-fractions.js"
   ];
 
   for (var i = 0; i < source_files.length; i++) {
diff --git a/tests/candlestick.html b/tests/candlestick.html
index 0fd6ffd55..2c467a987 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -6,6 +6,7 @@
     <title>Candlestick Chart Demo</title>
     <script type="text/javascript" src="../dygraph-dev.js"></script>
     <script type="text/javascript" src="../extras/candlestick-plotter.js"></script>
+    <script type="text/javascript" src="../datahandler/compress.js"></script>
 
     <style type="text/css">
       body {

From fe2562ea28e32772cedbef437528cc990de87fab Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Mon, 13 Apr 2015 16:27:34 +0600
Subject: [PATCH 05/16] Move to the proper directory

---
 {extras => src/extras}/candlestick-plotter.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {extras => src/extras}/candlestick-plotter.js (100%)

diff --git a/extras/candlestick-plotter.js b/src/extras/candlestick-plotter.js
similarity index 100%
rename from extras/candlestick-plotter.js
rename to src/extras/candlestick-plotter.js

From ec1940d60b88f880f6276d0d7fda3689063a89f8 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Mon, 13 Apr 2015 20:57:57 +0600
Subject: [PATCH 06/16] Update path to plotter

---
 tests/candlestick.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/candlestick.html b/tests/candlestick.html
index 2c467a987..bfc1cd828 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
     <title>Candlestick Chart Demo</title>
     <script type="text/javascript" src="../dygraph-dev.js"></script>
-    <script type="text/javascript" src="../extras/candlestick-plotter.js"></script>
+    <script type="text/javascript" src="../src/extras/candlestick-plotter.js"></script>
     <script type="text/javascript" src="../datahandler/compress.js"></script>
 
     <style type="text/css">

From 06e4ae378ca02e1a84076723432c0fbc8e722806 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Mon, 13 Apr 2015 21:01:45 +0600
Subject: [PATCH 07/16] Move datahandler to the proper path

---
 {datahandler => src/datahandler}/compress.js | 0
 tests/candlestick.html                       | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename {datahandler => src/datahandler}/compress.js (100%)

diff --git a/datahandler/compress.js b/src/datahandler/compress.js
similarity index 100%
rename from datahandler/compress.js
rename to src/datahandler/compress.js
diff --git a/tests/candlestick.html b/tests/candlestick.html
index bfc1cd828..538d3b0a0 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -6,7 +6,7 @@
     <title>Candlestick Chart Demo</title>
     <script type="text/javascript" src="../dygraph-dev.js"></script>
     <script type="text/javascript" src="../src/extras/candlestick-plotter.js"></script>
-    <script type="text/javascript" src="../datahandler/compress.js"></script>
+    <script type="text/javascript" src="../src/datahandler/compress.js"></script>
 
     <style type="text/css">
       body {

From ca6494cad6d2e48fd368ff73f79230031e852f93 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Thu, 23 Apr 2015 15:06:35 +0600
Subject: [PATCH 08/16] Removing relic meta tag

---
 tests/candlestick.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/candlestick.html b/tests/candlestick.html
index 538d3b0a0..f3ecf9eb9 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -2,7 +2,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
     <title>Candlestick Chart Demo</title>
     <script type="text/javascript" src="../dygraph-dev.js"></script>
     <script type="text/javascript" src="../src/extras/candlestick-plotter.js"></script>

From 7ccdecb2661f9469bd44b1fd17ef049226be731e Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Thu, 23 Apr 2015 15:09:04 +0600
Subject: [PATCH 09/16] Moving compress data handler to extras

---
 src/{datahandler => extras}/compress.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/{datahandler => extras}/compress.js (100%)

diff --git a/src/datahandler/compress.js b/src/extras/compress.js
similarity index 100%
rename from src/datahandler/compress.js
rename to src/extras/compress.js

From 974f58d8df69d2a99e526f8141e9ce740710271d Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Thu, 23 Apr 2015 15:28:42 +0600
Subject: [PATCH 10/16] Crisper rendering

---
 src/extras/candlestick-plotter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/extras/candlestick-plotter.js b/src/extras/candlestick-plotter.js
index d99bf4906..81c0df0b0 100644
--- a/src/extras/candlestick-plotter.js
+++ b/src/extras/candlestick-plotter.js
@@ -52,7 +52,7 @@
       price = prices[p];
       var topY = area.h * price.highY + area.y;
       var bottomY = area.h * price.lowY + area.y;
-      var centerX = area.x + sets[0][p].x * area.w;
+      var centerX = Math.floor(area.x + sets[0][p].x * area.w) + 0.5; // crisper rendering
       ctx.moveTo(centerX, topY);
       ctx.lineTo(centerX, bottomY);
       ctx.closePath();

From 7a3d034d0152a444b2707e59380fc41af00928e3 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Thu, 23 Apr 2015 15:29:09 +0600
Subject: [PATCH 11/16] Updating compress data handler src

---
 tests/candlestick.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/candlestick.html b/tests/candlestick.html
index f3ecf9eb9..68fc424b3 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -5,7 +5,7 @@
     <title>Candlestick Chart Demo</title>
     <script type="text/javascript" src="../dygraph-dev.js"></script>
     <script type="text/javascript" src="../src/extras/candlestick-plotter.js"></script>
-    <script type="text/javascript" src="../src/datahandler/compress.js"></script>
+    <script type="text/javascript" src="../src/extras/compress.js"></script>
 
     <style type="text/css">
       body {

From 1cc4cd68a08d44301d8045e172a47e91e1d2279a Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Thu, 23 Apr 2015 23:36:46 +0600
Subject: [PATCH 12/16] Adding uncompressed chart demo. Providing some
 documentation

---
 tests/candlestick.html | 55 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/tests/candlestick.html b/tests/candlestick.html
index 68fc424b3..7033717c6 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -18,11 +18,35 @@
     </style>
   </head>
   <body>
+    <h2>Candlestick chart</h2>
+    <p>
+      Candlesticks are traditional way of displaying price ranges as well as trend in
+      which a financial stock traded during a day (or week, month, etc.), from the
+      stock exchange <em>open</em> till <em>close</em> during the period, marking the
+      <em>highest</em> and <em>lowest</em> price reached during that period and
+      color-coding the trend.
+    </p>
+    <p>
+      The data argument is a table containing a <code>Date</code> column and columns
+      with names <code>Open</code>, <code>Close</code>, <code>High</code> and
+      <code>Low</code> (in the exact order). <code>High</code> value is always the
+      highest of the four, <code>Low</code> value is always the lowest. If
+      <code>Close</code> is higher than <code>Open</code> for that period, the
+      candlestick will be green, otherwise it will be red.
+    </p>
     <div id="candlechart" class=chart></div>
+
+    <h2>Candlestick chart with data compression</h2>
+    <p>
+      It is possible to compress data (annualy, quarterly, monthly, weekly or daily)
+      depending on the current chart zoom level to prevent chart bars overflow using 
+      the <code>CompressHandler</code> data handler.
+    </p>
+    <div id="candlechart-compress" class=chart></div>
     <script type="text/javascript">
       var candleData =
       "Date,Open,Close,High,Low\n";
-      for (var i = 0; i <= 365 * 10; i++) {
+      for (var i = 0; i <= 25; i++) {
         var d = new Date(i
                          * 1000 // ms
                          * 60   // sec
@@ -39,9 +63,36 @@
 
         candleData += [dateStr, open, close, high, low].join(",") + "\n";
       }
-      g = new Dygraph(
+      g1 = new Dygraph(
         document.getElementById("candlechart"),
         candleData,
+        {
+          plotter: Dygraph.Plotters.candlePlotter
+        }
+      );
+
+      var candleData =
+      "Date,Open,Close,High,Low\n";
+      for (var i = 0; i <= 365 * 10; i++) {
+        var d = new Date(i
+                         * 1000 // ms
+                         * 60   // sec
+                         * 60   // min
+                         * 24   // hr
+                        );
+        var dateStr = d.toISOString().match(/^\d{4}-\d{2}-\d{2}/)[0];
+        var min = 100;
+        var max = 400;
+        var open = Math.random() * (max - min) + min;
+        var close = Math.random() * (max - min) + min;
+        var high = Math.max(open, close) * 1.25;
+        var low = Math.min(open, close) * 0.75;
+
+        candleData += [dateStr, open, close, high, low].join(",") + "\n";
+      }
+      g2 = new Dygraph(
+        document.getElementById("candlechart-compress"),
+        candleData,
         {
           plotter: Dygraph.Plotters.candlePlotter,
           dataHandler: Dygraph.DataHandlers.CompressHandler

From 091bda754d046042b81b691e05cf0f2787ff5a3e Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Fri, 27 Nov 2015 16:05:04 +0300
Subject: [PATCH 13/16] Initial commit

---
 auto_tests/tests/candlestick_plotter.js | 54 +++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 auto_tests/tests/candlestick_plotter.js

diff --git a/auto_tests/tests/candlestick_plotter.js b/auto_tests/tests/candlestick_plotter.js
new file mode 100644
index 000000000..86c4c621e
--- /dev/null
+++ b/auto_tests/tests/candlestick_plotter.js
@@ -0,0 +1,54 @@
+/**
+ * @fileoverview Tests for the candlestick plotter.
+ *
+ * @author petr.shevtsov@gmail.com (Petr Shevtsov)
+ */
+
+import Dygraph from '../../src/dygraph';
+import '../../src/extras/candlestick-plotter';  // defines Dygraph.candlestickPlotter
+import '../../src/extras/compress';  // defines Dygraph.DataHandlers.CompressHandler
+
+describe("candlestick-plotter", function() {
+  var candlestickPlotter = Dygraph.candlestickPlotter;
+  var getPrices = candlestickPlotter._getPrices;
+
+  beforeEach(function() {
+  });
+
+  afterEach(function() {
+  });
+
+  it('testPrices', function() {
+    var set = [
+      [{yval: 200, y: 0.2}], // Open
+      [{yval: 300, y: 0.3}], // Close
+      [{yval: 400, y: 0.4}], // High
+      [{yval: 100, y: 0.1}], // Low
+    ];
+
+    assert.deepEqual([{
+      open: 200,
+      openY: 0.2,
+      close: 300,
+      closeY: 0.3,
+      high: 400,
+      highY: 0.4,
+      low: 100,
+      lowY: 0.1
+    }], getPrices(set));
+  });
+
+  it('testCompressHandler', function() {
+    var series = [];
+    var x;
+    var y = 0;
+    for (var i = 1; i < 365; i++) {
+      x = i * 1000 * 60 * 60 * 24;
+      series.push([x, y]);
+    }
+    var comp = new Dygraph.DataHandlers.CompressHandler;
+    var pts = comp.seriesToPoints(series, "", 0);
+
+    assert.deepEqual(51, pts.length); // 50 bars + 1 to compensate
+  });
+});

From 1421fe57e1ccd291ad36f98b04f8c6068dff0ad7 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Fri, 27 Nov 2015 16:05:53 +0300
Subject: [PATCH 14/16] Use ES6 modules

---
 src/extras/candlestick-plotter.js | 39 ++++++++++++++-----------
 src/extras/compress.js            | 15 ++++++----
 tests/candlestick.html            | 47 ++++++++++++++++++++++++++++---
 3 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/src/extras/candlestick-plotter.js b/src/extras/candlestick-plotter.js
index 81c0df0b0..836306d41 100644
--- a/src/extras/candlestick-plotter.js
+++ b/src/extras/candlestick-plotter.js
@@ -4,21 +4,19 @@
  * https://github.com/danvk/dygraphs/pull/141/files
  */
 
-/*global Dygraph:false */
-
 (function() {
   "use strict";
 
-  var candlePlotter = function(e) {
-    if (e.seriesIndex > 3) {
-      Dygraph.Plotters.linePlotter(e);
-    }
-    // This is the officially endorsed way to plot all the series at once.
-    if (e.seriesIndex !== 0) return;
+  var Dygraph;
+  if (window.Dygraph) {
+    Dygraph = window.Dygraph;
+  } else if (typeof(module) !== 'undefined') {
+    Dygraph = require('../dygraph');
+  }
 
+  function getPrices(sets) {
     var prices = [];
     var price;
-    var sets = e.allSeriesPoints.slice(0, 4); // Slice first four sets for candlestick chart
     for (var p = 0 ; p < sets[0].length; p++) {
       price = {
         open : sets[0][p].yval,
@@ -32,7 +30,19 @@
       };
       prices.push(price);
     }
+    return prices;
+  }
 
+  function candlestickPlotter(e) {
+    if (e.seriesIndex > 3) {
+      Dygraph.Plotters.linePlotter(e);
+      return;
+    }
+    // This is the officially endorsed way to plot all the series at once.
+    if (e.seriesIndex !== 0) return;
+
+    var sets = e.allSeriesPoints.slice(0, 4); // Slice first four sets for candlestick chart
+    var prices = getPrices(sets);
     var area = e.plotArea;
     var ctx = e.drawingContext;
     ctx.strokeStyle = '#202020';
@@ -46,7 +56,8 @@
     }
     barWidth = Math.max(barWidth, minBarWidth);
 
-    for (p = 0 ; p < prices.length; p++) {
+    var price;
+    for (var p = 0 ; p < prices.length; p++) {
       ctx.beginPath();
 
       price = prices[p];
@@ -70,10 +81,6 @@
       ctx.fillRect(centerX - barWidth / 2, bodyY, barWidth,  bodyHeight);
     }
   };
-
-  Dygraph.update(Dygraph.Plotters, {
-    candlePlotter: function(e) {
-      candlePlotter(e);
-    }
-  });
+  candlestickPlotter._getPrices = getPrices; // for testing
+  Dygraph.candlestickPlotter = candlestickPlotter;
 })();
diff --git a/src/extras/compress.js b/src/extras/compress.js
index 063070559..86f38c161 100644
--- a/src/extras/compress.js
+++ b/src/extras/compress.js
@@ -9,11 +9,16 @@
  * See "tests/candlestick.html" for demo.
  */
 
-/*global Dygraph:false */
-
 (function() {
   "use strict";
 
+  var Dygraph;
+  if (window.Dygraph) {
+    Dygraph = window.Dygraph;
+  } else if (typeof(module) !== 'undefined') {
+    Dygraph = require('../dygraph');
+  }
+
   /**
    * Get week number for date
    */
@@ -235,13 +240,11 @@
 
     for (i = 0; i < compressedSeries.length; ++i) {
       var item = compressedSeries[i];
-      var yraw = item[1];
-      var yval = yraw === null ? null : Dygraph.DataHandler.parseFloat(yraw);
       var point = {
         x : NaN,
         y : NaN,
-        xval : Dygraph.DataHandler.parseFloat(item[0]),
-        yval : yval,
+        xval : item[0],
+        yval : item[1],
         name : setName,
         idx : i + boundaryIdStart
       };
diff --git a/tests/candlestick.html b/tests/candlestick.html
index 7033717c6..51bf23603 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -3,7 +3,14 @@
 <html>
   <head>
     <title>Candlestick Chart Demo</title>
-    <script type="text/javascript" src="../dygraph-dev.js"></script>
+    <!--
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
     <script type="text/javascript" src="../src/extras/candlestick-plotter.js"></script>
     <script type="text/javascript" src="../src/extras/compress.js"></script>
 
@@ -39,10 +46,14 @@ <h2>Candlestick chart</h2>
     <h2>Candlestick chart with data compression</h2>
     <p>
       It is possible to compress data (annualy, quarterly, monthly, weekly or daily)
-      depending on the current chart zoom level to prevent chart bars overflow using 
+      depending on the current chart zoom level to prevent chart bars overflow using
       the <code>CompressHandler</code> data handler.
     </p>
     <div id="candlechart-compress" class=chart></div>
+
+    <h2>Line chart alongside with Candlestick chart</h2>
+    <div id="candlechart-line" class=chart></div>
+
     <script type="text/javascript">
       var candleData =
       "Date,Open,Close,High,Low\n";
@@ -67,7 +78,7 @@ <h2>Candlestick chart with data compression</h2>
         document.getElementById("candlechart"),
         candleData,
         {
-          plotter: Dygraph.Plotters.candlePlotter
+          plotter: Dygraph.candlestickPlotter
         }
       );
 
@@ -94,10 +105,38 @@ <h2>Candlestick chart with data compression</h2>
         document.getElementById("candlechart-compress"),
         candleData,
         {
-          plotter: Dygraph.Plotters.candlePlotter,
+          plotter: Dygraph.candlestickPlotter,
           dataHandler: Dygraph.DataHandlers.CompressHandler
         }
       );
+
+      var candleData =
+      "Date,Open,Close,High,Low,Avg\n";
+      for (var i = 0; i <= 25; i++) {
+        var d = new Date(i
+                         * 1000 // ms
+                         * 60   // sec
+                         * 60   // min
+                         * 24   // hr
+                        );
+        var dateStr = d.toISOString().match(/^\d{4}-\d{2}-\d{2}/)[0];
+        var min = 100;
+        var max = 400;
+        var open = Math.random() * (max - min) + min;
+        var close = Math.random() * (max - min) + min;
+        var high = Math.max(open, close) * 1.25;
+        var low = Math.min(open, close) * 0.75;
+        var avg = (open + close + high + low) / 4;
+
+        candleData += [dateStr, open, close, high, low, avg].join(",") + "\n";
+      }
+      g1 = new Dygraph(
+        document.getElementById("candlechart-line"),
+        candleData,
+        {
+          plotter: Dygraph.candlestickPlotter
+        }
+      );
     </script>
   </body>
 </html>

From c7e3192715a9aa7aec5b8178220418a85e962f64 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Fri, 26 Feb 2016 12:02:47 +0600
Subject: [PATCH 15/16] Change parameters order to be the commonly used OHLC

---
 src/extras/candlestick-plotter.js | 12 ++++++------
 tests/candlestick.html            | 20 ++++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/extras/candlestick-plotter.js b/src/extras/candlestick-plotter.js
index 836306d41..6288aec4e 100644
--- a/src/extras/candlestick-plotter.js
+++ b/src/extras/candlestick-plotter.js
@@ -20,13 +20,13 @@
     for (var p = 0 ; p < sets[0].length; p++) {
       price = {
         open : sets[0][p].yval,
-        close : sets[1][p].yval,
-        high : sets[2][p].yval,
-        low : sets[3][p].yval,
+        high : sets[1][p].yval,
+        low : sets[2][p].yval,
+        close : sets[3][p].yval,
         openY : sets[0][p].y,
-        closeY : sets[1][p].y,
-        highY : sets[2][p].y,
-        lowY : sets[3][p].y
+        highY : sets[1][p].y,
+        lowY : sets[2][p].y,
+        closeY : sets[3][p].y
       };
       prices.push(price);
     }
diff --git a/tests/candlestick.html b/tests/candlestick.html
index 51bf23603..1af8ea017 100644
--- a/tests/candlestick.html
+++ b/tests/candlestick.html
@@ -56,7 +56,7 @@ <h2>Line chart alongside with Candlestick chart</h2>
 
     <script type="text/javascript">
       var candleData =
-      "Date,Open,Close,High,Low\n";
+      "Date,Open,High,Low,Close\n";
       for (var i = 0; i <= 25; i++) {
         var d = new Date(i
                          * 1000 // ms
@@ -68,11 +68,11 @@ <h2>Line chart alongside with Candlestick chart</h2>
         var min = 100;
         var max = 400;
         var open = Math.random() * (max - min) + min;
-        var close = Math.random() * (max - min) + min;
         var high = Math.max(open, close) * 1.25;
         var low = Math.min(open, close) * 0.75;
+        var close = Math.random() * (max - min) + min;
 
-        candleData += [dateStr, open, close, high, low].join(",") + "\n";
+        candleData += [dateStr, open, high, low, close].join(",") + "\n";
       }
       g1 = new Dygraph(
         document.getElementById("candlechart"),
@@ -83,7 +83,7 @@ <h2>Line chart alongside with Candlestick chart</h2>
       );
 
       var candleData =
-      "Date,Open,Close,High,Low\n";
+      "Date,Open,High,Low,Close\n";
       for (var i = 0; i <= 365 * 10; i++) {
         var d = new Date(i
                          * 1000 // ms
@@ -95,11 +95,11 @@ <h2>Line chart alongside with Candlestick chart</h2>
         var min = 100;
         var max = 400;
         var open = Math.random() * (max - min) + min;
-        var close = Math.random() * (max - min) + min;
         var high = Math.max(open, close) * 1.25;
         var low = Math.min(open, close) * 0.75;
+        var close = Math.random() * (max - min) + min;
 
-        candleData += [dateStr, open, close, high, low].join(",") + "\n";
+        candleData += [dateStr, open, high, low, close].join(",") + "\n";
       }
       g2 = new Dygraph(
         document.getElementById("candlechart-compress"),
@@ -111,7 +111,7 @@ <h2>Line chart alongside with Candlestick chart</h2>
       );
 
       var candleData =
-      "Date,Open,Close,High,Low,Avg\n";
+      "Date,Open,High,Low,Close,Avg\n";
       for (var i = 0; i <= 25; i++) {
         var d = new Date(i
                          * 1000 // ms
@@ -123,12 +123,12 @@ <h2>Line chart alongside with Candlestick chart</h2>
         var min = 100;
         var max = 400;
         var open = Math.random() * (max - min) + min;
-        var close = Math.random() * (max - min) + min;
         var high = Math.max(open, close) * 1.25;
         var low = Math.min(open, close) * 0.75;
-        var avg = (open + close + high + low) / 4;
+        var close = Math.random() * (max - min) + min;
+        var avg = (open + high + low + close) / 4;
 
-        candleData += [dateStr, open, close, high, low, avg].join(",") + "\n";
+        candleData += [dateStr, open, high, low, close, avg].join(",") + "\n";
       }
       g1 = new Dygraph(
         document.getElementById("candlechart-line"),

From 7444fe6e75594a45f62923b25865d1332cf477c4 Mon Sep 17 00:00:00 2001
From: Petr Shevtsov <petr.shevtsov@gmail.com>
Date: Fri, 26 Feb 2016 12:14:09 +0600
Subject: [PATCH 16/16] Updating tests

---
 auto_tests/tests/candlestick_plotter.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/auto_tests/tests/candlestick_plotter.js b/auto_tests/tests/candlestick_plotter.js
index 86c4c621e..400284e3c 100644
--- a/auto_tests/tests/candlestick_plotter.js
+++ b/auto_tests/tests/candlestick_plotter.js
@@ -21,20 +21,20 @@ describe("candlestick-plotter", function() {
   it('testPrices', function() {
     var set = [
       [{yval: 200, y: 0.2}], // Open
-      [{yval: 300, y: 0.3}], // Close
       [{yval: 400, y: 0.4}], // High
       [{yval: 100, y: 0.1}], // Low
+      [{yval: 300, y: 0.3}] // Close
     ];
 
     assert.deepEqual([{
       open: 200,
       openY: 0.2,
-      close: 300,
-      closeY: 0.3,
       high: 400,
       highY: 0.4,
       low: 100,
-      lowY: 0.1
+      lowY: 0.1,
+      close: 300,
+      closeY: 0.3
     }], getPrices(set));
   });