From 4aacdb499b91bdbe91173c7d162b3df20f35ec83 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Sun, 8 Jan 2017 15:16:57 +0100
Subject: [PATCH] Candlestick chart

---
 Chart/CandlestickChart.js | 63 ++++++++++++++++++++-------------------
 Chart/LineChart.js        |  2 +-
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/Chart/CandlestickChart.js b/Chart/CandlestickChart.js
index 00a2c61..67d5140 100644
--- a/Chart/CandlestickChart.js
+++ b/Chart/CandlestickChart.js
@@ -41,18 +41,22 @@
                 },
                 min: 0,
                 max: 0
+            },
+            y0: {
+                min: 0,
+                max: 0
             }
         };
 
         this.chart.grid = {
             x: {
-                visible: false
+                visible: true
             },
             y: {
                 visible: true
             }
         };
-        this.chart.subtype = 'waterfall';
+        this.chart.subtype = 'candlestick';
     };
 
     jsOMS.Chart.CandlestickChart.prototype.getChart = function ()
@@ -62,17 +66,16 @@
 
     jsOMS.Chart.CandlestickChart.prototype.setData = function (data)
     {
-        this.chart.setData(dataset);
+        this.chart.setData(data);
     };
 
     jsOMS.Chart.CandlestickChart.prototype.draw = function ()
     {
-        let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
+        let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
 
-        this.chart.dimension = {
-            width: box.width,
-            height: box.height
-        };
+        let mm = 50;
+
+        this.chart.calculateDimension();
 
         x = this.chart.createXScale('linear');
         y = this.chart.createYScale('linear');
@@ -81,8 +84,8 @@
         xGrid = this.chart.createXGrid(x);
         yGrid = this.chart.createYGrid(y);
 
-        x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
-        y.domain([this.chart.axis.y.min - 1, this.chart.axis.y.max + 1]);
+        x.domain([this.chart.axis.x.min - 1, this.chart.axis.x.max + 1]);
+        y.domain([this.chart.axis.y0.min - 1, this.chart.axis.y.max + 1]);
 
         svg = this.chart.chartSelect.append("svg")
             .attr("width", this.chart.dimension.width)
@@ -92,11 +95,25 @@
                 + (this.chart.margin.top) + ")");
 
         this.chart.drawGrid(svg, xGrid, yGrid);
-        
-        let dataPoint, dataPointEnter,
-            temp       = this.drawData(svg, x, y, dataPointEnter, dataPoint);
-        dataPointEnter = temp[0];
-        dataPoint      = temp[1];
+
+        svg.selectAll("rect")
+        .data(this.chart.dataset[0].points)
+        .enter().append("svg:rect")
+        .attr("x", function(d) { return x(d.x)-mm/10; })
+        .attr("y", function(d) {return y(Math.max(d.open, d.close));})		  
+        .attr("height", function(d) { return Math.max(1, y(Math.min(d.open, d.close))-y(Math.max(d.open, d.close)));})
+        .attr("width", function(d) { return 0.5 * (self.chart.dimension.width - 4*mm)/self.chart.dataset[0].points.length; })
+        .attr("fill",function(d) { return d.open > d.close ? "red" : "green" ;});
+
+        svg.selectAll("line.stem")
+          .data(this.chart.dataset[0].points)
+          .enter().append("svg:line")
+          .attr("class", "stem")
+          .attr("x1", function(d) { return x(d.x);})
+          .attr("x2", function(d) { return x(d.x);})		    
+          .attr("y1", function(d) { return y(d.y);})
+          .attr("y2", function(d) { return y(d.y0); })
+          .attr("stroke", function(d){ return d.open > d.close ? "red" : "green"; });
 
         this.chart.drawText(svg);
         this.chart.drawAxis(svg, xAxis1, yAxis1);
@@ -112,20 +129,4 @@
         this.chart.chartSelect.select("*").remove();
         this.draw();
     };
-
-    jsOMS.Chart.CandlestickChart.prototype.drawData = function (svg, x, y, dataPointEnter, dataPoint)
-    {
-        let self = this;
-
-        dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset[0].points, function (c)
-        {
-            return c.id;
-        });
-
-        dataPointEnter = dataPoint.enter().append("g")
-            .attr("class", function(d) { return "dataPoint " + (d.y < d.y0 ? 'negative' : 'positive'); })
-            .attr("transform", function(d) { return "translate(" + x(d.name) + ",0)"; });
-
-        return [dataPointEnter, dataPoint];
-    };
 }(window.jsOMS = window.jsOMS || {}));
diff --git a/Chart/LineChart.js b/Chart/LineChart.js
index 04b4f6e..702c317 100644
--- a/Chart/LineChart.js
+++ b/Chart/LineChart.js
@@ -70,7 +70,7 @@
     {
         let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
 
-        this.chart.calculateDimension('linear');
+        this.chart.calculateDimension();
 
         x = this.chart.createXScale('linear');
         y = this.chart.createYScale('linear');