@millistream/millistream-widgets 0.0.13 → 0.0.16

package/millistream-widgets.js

@@ -1,3 +1,5 @@
+'use strict';
+
 function Milli_Chart(settings) {
     var _this = this;
     _this.mdf_fields = [];
@@ -5,10 +7,6 @@ function Milli_Chart(settings) {
     _this.scaleinfoY = {};
     _this.scaleinfoY2 = {};
     _this.instruments = [];
-    var m_modules = {
-        quantity: null
-    };
-
     _this.settings = {
         autodraw: true,
         instrument: null,
@@ -44,6 +42,16 @@ function Milli_Chart(settings) {
         yearLabelsPos: 'bottom'
     };
     _this.unsubscriptions = {};
+    var m_chartspaces = {
+        chart: {
+            percent: 100,
+            height: 0
+        },
+        lowerChart: {
+            percent: 0,
+            height: 0
+        }
+    };
     var m_dummyDiv = null; // dummy div For chartclasses 
     var m_requestid = 0;
     var m_canvas = null;
@@ -99,6 +107,7 @@ function Milli_Chart(settings) {
         div: null,
         isZooming: false
     };
+    var m_lastDrawnInstrument = -1;
     var m_months = ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'];
     var m_xLegendCss = {
         'font-size': '10px',
@@ -419,11 +428,12 @@ function Milli_Chart(settings) {
     }
 
     function calcHighLow() {
-        var datalen = 0;
         _this.scaleinfoY.lowValue = null;
         _this.scaleinfoY.highValue = null;
         _this.scaleinfoY2.lowValue = null;
         _this.scaleinfoY2.highValue = null;
+        _this.scaleinfoY.lowLowerChart = null;
+        _this.scaleinfoY.highLowerChart = null;
         var firstvalue = null;
 
         for (var s = 0; s < _this.instruments.length; s++) {
@@ -432,34 +442,26 @@ function Milli_Chart(settings) {
             if (_this.scaleinfoY.type != 'history') {
                 if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d' && !m_zoom.mousedown.timestamp) {
                     firstvalue = parseFloat(_this.instruments[s].closeprice1d);
-                    //console.log('closeprice1d', firstvalue);
                 }
             }
-            //console.log(_this.scaleinfoY.type, data, firstvalue);
             for (var i = 0; i < data.length; i++) {
                 // only calc on visible data
                 var price = data[i][_this.settings.graphvalue] * _this.instruments[s].factor;
+                var quantity = 0;
+                if (data[i].quantity !== 'undefined')
+                    quantity = data[i].quantity;
                 if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) {
-                    //                    if (_this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') firstvalue = data[i][_this.settings.graphvalue] * _this.instruments[s].factor;
-                    //                  continue; // only calc high low on data we are showing
                     continue;
                 }
                 if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) {
-                    break; // continue?
+                    break;
                 }
 
                 if (_this.scaleinfoY.type != 'history' && (data[i].timestamp % 86400000 < _this.instruments[0].opentimestamp || data[i].timestamp % 86400000 > _this.instruments[0].closetimestamp)) {
                     // stämmer detta kan det bli överlapp vid sommartid/vintertid?
                     continue;
                 }
-                if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) break;
 
-                if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) { // hit kommer vi ju aldrig
-                    //if (_this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') firstvalue = price
-                    //console.log(new Date(data[i].timestamp),price,firstvalue);
-                    continue; // only calc high low on data we are showing
-                }
-                datalen++;
                 if (firstvalue == null) {
                     if (_this.scaleinfoY.type == 'history')
                         firstvalue = price;
@@ -476,6 +478,8 @@ function Milli_Chart(settings) {
                 data[i].diff = diff;
                 if (_this.scaleinfoY2.lowValue == null || _this.scaleinfoY2.lowValue > diff) _this.scaleinfoY2.lowValue = diff;
                 if (_this.scaleinfoY2.highValue == null || _this.scaleinfoY2.highValue < diff) _this.scaleinfoY2.highValue = diff;
+                if (_this.scaleinfoY.lowLowerChart == null || _this.scaleinfoY.lowLowerChart > quantity) _this.scaleinfoY.lowLowerChart = quantity;
+                if (_this.scaleinfoY.highLowerChart == null || _this.scaleinfoY.highLowerChart < quantity) _this.scaleinfoY.highLowerChart = quantity;
             }
             if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') { // if closeprice is used calch high/low on it
                 var cp = parseFloat(_this.instruments[s].closeprice1d);
@@ -494,11 +498,96 @@ function Milli_Chart(settings) {
             _this.scaleinfoY.lowValue -= 1;
             _this.scaleinfoY.highValue += 1;
         }
-        // console.log(_this.scaleinfoY);
+        console.log(_this.scaleinfoY);
         // console.log('CALCHHIGHLOW', _this.scaleinfoY);
         return 1;
     }
 
+    function plotLower(valuePerPixel) {
+        m_ctx.save();
+        m_ctx.strokeStyle = m_instrumentCss[0].color;
+        m_ctx.lineWidth = parseInt(m_instrumentCss[0].width);
+        for (var i = 0; i < m_datapoints.length; i++) {
+            m_ctx.moveTo(m_datapoints[i].x + 0.5, m_chartspaces.lowerChart.bottom - 0.5);
+            var y = Math.round(m_chartspaces.lowerChart.bottom - (m_datapoints[i].quantity * valuePerPixel));
+            m_ctx.lineTo(m_datapoints[i].x + 0.5, y - 0.5);
+            m_ctx.stroke();
+        }
+        m_ctx.restore();
+    }
+
+    function drawYLegendLower(x, numticks, lineLength, markers) {
+        m_ctx.save();
+        m_ctx.textAlign = 'right';
+        var tickSize = getTickValue(_this.scaleinfoY.lowLowerChart, _this.scaleinfoY.highLowerChart, numticks);
+        console.log(_this.scaleinfoY.highLowerChart, tickSize, lineLength);
+        var maxValue = _this.scaleinfoY.highLowerChart == 0 ? 100 : _this.scaleinfoY.highLowerChart + (tickSize * 0.2);
+        var valuePerPixel = lineLength / maxValue;
+        if (isNaN(valuePerPixel) || !isFinite(valuePerPixel)) {
+            console.log('cant draw valuePerPixel' + valuePerPixel);
+            return false;
+        }
+        var value = 0;
+        for (;;) {
+            var y = Math.round(m_chartspaces.lowerChart.bottom - (value * valuePerPixel));
+            console.log(value, y, tickSize, maxValue);
+
+            if (y <= m_chartspaces.lowerChart.top) break;
+            if (y <= m_chartspaces.lowerChart.bottom) {
+                if (_this.settings.gridHorizontalLines == true) {
+                    m_ctx.save();
+                    if (_this.settings.gridHorizontalLinesStyle == 'dash') {
+                        m_ctx.setLineDash([3, 3]);
+                    }
+                    m_ctx.moveTo(m_chartspaces.lowerChart.left, y + 0.5);
+                    m_ctx.lineTo(m_chartspaces.lowerChart.right, y + 0.5);
+                    m_ctx.stroke();
+                    m_ctx.restore();
+                } else
+                if (_this.settings.drawyaxis == true && markers == true) { // draw legenditem markers for price
+                    m_ctx.moveTo(m_chartspaces.lowerChart.left, y + 0.5);
+                    m_ctx.lineTo(m_chartspaces.lowerChart.left + 3, y + 0.5);
+                    m_ctx.stroke();
+                }
+
+                if (markers == true && _this.settings.drawyaxis == true) {
+                    var label = formatLargeNumber(value, 0, _this);
+                    var textpos = x - 5;
+                    if (m_yLegendCss['vertical-align'] == 'top') {
+                        if (y - (getFontSize(m_yLegendCss)) > 0) // dont draw if cropped
+                            m_ctx.fillText(label, textpos, y - ((getFontSize(m_yLegendCss) + 2)));
+                    } else
+                        m_ctx.fillText(label, textpos, y - (getFontSize(m_yLegendCss) / 2));
+                }
+            }
+            value += tickSize;
+        }
+        m_ctx.restore();
+        plotLower(valuePerPixel);
+        return true;
+    }
+
+    function drawYAxisLower() {
+
+        //m_ctx.save();
+        m_ctx.strokeStyle = m_gridHorizontalCss.color;
+        m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
+        console.log(m_yLegendCss.color, m_gridHorizontalCss.color);
+        m_ctx.fillStyle = m_yLegendCss.color;
+        var lineLen = m_chartspaces.lowerChart.bottom - m_chartspaces.lowerChart.top;
+        var numticks = lineLen / (getFontSize(m_yLegendCss) * 2);
+        if (numticks > 8) numticks = 8; // limit to 8 items on Y legend ( this is not an absolut count, since we calculate nice legend numbers
+
+        m_ctx.moveTo(m_chartspaces.lowerChart.left + 0.5, m_chartspaces.lowerChart.top);
+        m_ctx.lineTo(m_chartspaces.lowerChart.left + 0.5, m_chartspaces.lowerChart.bottom);
+        m_ctx.stroke();
+        var x = m_chartspaces.lowerChart.left - 3;
+
+        drawYLegendLower(x, numticks, lineLen, true);
+        //m_ctx.restore();
+
+    }
+
     function drawYLegend(si, x, side, gridHorizontalLines, number) {
         var value;
         if (si.highValue == si.lowValue) console.log(si.tickSize);
@@ -523,25 +612,25 @@ function Milli_Chart(settings) {
             return false;
         }
         for (;;) {
-            var y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - ((value - si.minValue) * si.valuePerPixel));
-            if (y <= parseInt(m_chartCss['margin-top'])) break;
-            if (y <= m_canvas.height - parseInt(m_chartCss['margin-bottom'])) {
+            var y = Math.round(m_chartspaces.chart.bottom - ((value - si.minValue) * si.valuePerPixel));
+            if (y <= m_chartspaces.chart.top) break;
+            if (y <= m_chartspaces.chart.bottom) {
                 if (gridHorizontalLines == true) {
                     m_ctx.save();
                     if (_this.settings.gridHorizontalLinesStyle == 'dash') {
                         m_ctx.setLineDash([3, 3]);
                     }
                     m_ctx.beginPath();
-                    m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y + 0.5);
-                    m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), y + 0.5);
+                    m_ctx.moveTo(m_chartspaces.chart.left, y + 0.5);
+                    m_ctx.lineTo(m_chartspaces.chart.right, y + 0.5);
                     m_ctx.stroke();
                     m_ctx.closePath();
                     m_ctx.restore();
                 } else
                 if (_this.settings.drawyaxis == true && number == 1) { // draw legenditem markers for price
                     m_ctx.beginPath();
-                    m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y + 0.5);
-                    m_ctx.lineTo(parseInt(m_chartCss['margin-left']) + 3, y + 0.5);
+                    m_ctx.moveTo(m_chartspaces.chart.left, y + 0.5);
+                    m_ctx.lineTo(m_chartspaces.chart.left + 3, y + 0.5);
                     m_ctx.stroke();
                     m_ctx.closePath();
                 } else
@@ -575,18 +664,16 @@ function Milli_Chart(settings) {
     }
 
     function drawYAxis() {
-        // console.log(m_chartCss['margin-left']);
         m_ctx.save();
         m_ctx.strokeStyle = m_gridHorizontalCss.color;
         m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
         m_ctx.fillStyle = m_yLegendCss.color;
-        if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') firstvalue = _this.instruments[0].closeprice1d;
+        //if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') firstvalue = _this.instruments[0].closeprice1d;
 
         if (0 == calcHighLow()) {
-            // console.log('no data to draw on');
             return;
         }
-        _this.scaleinfoY.lineLength = m_canvas.height - parseInt(m_chartCss['margin-top']) - parseInt(m_chartCss['margin-bottom']);
+        _this.scaleinfoY.lineLength = m_chartspaces.chart.bottom - m_chartspaces.chart.top;
         _this.scaleinfoY2.lineLength = _this.scaleinfoY.lineLength;
         var numticks = _this.scaleinfoY.lineLength / (getFontSize(m_yLegendCss) * 4);
         if (numticks > 8) numticks = 8; // limit to 8 items on Y legend ( this is not an absolut count, since we calculate nice legend numbers
@@ -595,12 +682,13 @@ function Milli_Chart(settings) {
         _this.scaleinfoY.decimals = _this.scaleinfoY.decimals > 4 ? 4 : _this.scaleinfoY.decimals;
         _this.scaleinfoY.decimals = _this.scaleinfoY.decimals < 2 ? 2 : _this.scaleinfoY.decimals;
         var label = formatNiceNumber(_this.scaleinfoY.highValue, _this.settings.thousandseparator, _this.settings.decimalseparator, _this.scaleinfoY.decimals);
-        // console.log('SCALE', _this.scaleinfoY);
         if (m_yLegendCss.float != 'right') {
-            m_chartCss['margin-left'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
+            m_chartspaces.chart.left = 10 + Math.round(m_ctx.measureText(label).width); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
+            m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
         } else {
             if (m_yLegendCss['text-align'] == 'right') {
-                m_chartCss['margin-right'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
+                m_chartspaces.chart.right = m_canvas.width - (10 + Math.round(m_ctx.measureText(label).width)); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
+                m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
             }
             // TODO: kolla setting om den skall vara "i diagrammet"
         }
@@ -612,55 +700,48 @@ function Milli_Chart(settings) {
             _this.scaleinfoY2.decimals = _this.scaleinfoY2.decimals < 0 ? 0 : _this.scaleinfoY2.decimals;
 
             label = formatNiceNumber(_this.scaleinfoY2.highValue, _this.settings.thousandseparator, _this.settings.decimalseparator, _this.scaleinfoY2.decimals) + ' %';
-            if (m_y2LegendCss.float != 'right')
-                m_chartCss['margin-left'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
-            else {
+            if (m_y2LegendCss.float != 'right') {
+                m_chartspaces.chart.left = 10 + Math.round(m_ctx.measureText(label).width); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
+                m_chartspaces.lowerChart.left = m_chartspaces.chart.left
+            } else {
                 // kolla setting om den skall vara "i diagrammet"
-                m_chartCss['margin-right'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
+                m_chartspaces.chart.right = m_canvas.width - (10 + Math.round(m_ctx.measureText(label).width)); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
+                m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
             }
         }
-        // console.log(m_chartCss['margin-left']);
         if (m_yLegendCss.float != 'right' && _this.settings.drawyaxis) {
             m_ctx.save();
             m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
-            if (getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5 > parseInt(m_chartCss['margin-left'])) m_chartCss['margin-left'] = getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5;
+            if (getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5 > m_chartspaces.chart.left) m_chartspaces.chart.left = getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5;
             m_ctx.restore();
         }
-        // console.log('drawYXis 1');
-
-        //if (_this.settings.drawyaxis == true) { // draw left y legend line
         m_ctx.beginPath();
-        m_ctx.moveTo(parseInt(m_chartCss['margin-left']) + 0.5, parseInt(m_chartCss['margin-top']));
-        m_ctx.lineTo(parseInt(m_chartCss['margin-left']) + 0.5, m_canvas.height - parseInt(m_chartCss['margin-bottom']));
+        m_ctx.moveTo(m_chartspaces.chart.left + 0.5, m_chartspaces.chart.top);
+        m_ctx.lineTo(m_chartspaces.chart.left + 0.5, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']));
         m_ctx.stroke();
         m_ctx.closePath();
-        //}
-        // console.log('drawYXis 2');
+
         var x;
         if (m_yLegendCss.float == 'right') {
             if (m_yLegendCss['text-align'] == 'right')
-                x = m_canvas.width - parseInt(m_chartCss['margin-right']);
+                x = m_chartspaces.chart.right;
             else
-                x = m_canvas.width - parseInt(m_chartCss['margin-right']) + 3;
+                x = m_chartspaces.chart.right + 3;
         } else {
-            x = parseInt(m_chartCss['margin-left']) - 3;
+            x = m_chartspaces.chart.left - 3;
         }
-        // console.log('drawYXis 3');
 
         m_ctx.textAlign = 'right';
-        //if (_this.settings.drawyaxis) {
         if (m_yLegendCss['text-align'] == 'right') {
             m_ctx.textAlign = 'left';
             drawYLegend(_this.scaleinfoY, x, 'right', _this.settings.gridHorizontalLines, 1);
         } else
             drawYLegend(_this.scaleinfoY, x, 'left', _this.settings.gridHorizontalLines, 1);
-        //}
-        // console.log('drawYXis 4');
 
         if (_this.settings.drawy2axis) {
             x = 0;
             if (m_y2LegendCss.float == 'right') {
-                x = m_canvas.width - parseInt(m_chartCss['margin-right']) - 3;
+                x = m_chartspaces.chart.right - 3;
                 m_ctx.textAlign = 'left';
             }
             drawYLegend(_this.scaleinfoY2, x, 'right', _this.settings.gridHorizontalLines2, 2);
@@ -674,7 +755,7 @@ function Milli_Chart(settings) {
         m_ctx.save();
         m_ctx.strokeStyle = m_gridHorizontalCss.color;
         if (_this.settings.gridVerticalLines > 0) {
-            if (_this.settings.drawy2axis == false || p.x != parseInt(m_chartCss['margin-left'])) {
+            if (_this.settings.drawy2axis == false || p.x != m_chartspaces.chart.left) {
                 if (_this.settings.gridHorizontalLinesStyle == 'dash') {
                     m_ctx.setLineDash([3, 3]);
                 }
@@ -682,7 +763,7 @@ function Milli_Chart(settings) {
 
                 m_ctx.beginPath();
                 m_ctx.moveTo(p.x + 0.5, p.y + 3);
-                m_ctx.lineTo(p.x + 0.5, parseInt(m_chartCss['margin-top']));
+                m_ctx.lineTo(p.x + 0.5, m_chartspaces.chart.top);
                 m_ctx.stroke();
                 m_ctx.closePath();
             } else if (_this.settings.drawxaxis == 0) {
@@ -708,7 +789,7 @@ function Milli_Chart(settings) {
         _this.scaleinfoX.startDate = new Date(starttime);
         _this.scaleinfoX.endDate = new Date(endtime);
         _this.scaleinfoX.days = getNumberOfDays(starttime, endtime);
-        _this.scaleinfoX.lineLength = m_canvas.width - parseInt(m_chartCss['margin-right']) - parseInt(m_chartCss['margin-left']);
+        _this.scaleinfoX.lineLength = m_chartspaces.chart.right - m_chartspaces.chart.left;
         var datesize = new Date('2888-12-28'); // bredaste datum jag kan komma på
         //_this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
         _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, formatDate(datesize, _this.settings.dateformat)) * 2; // kolla rätt format en 8a för varje tecken
@@ -747,15 +828,13 @@ function Milli_Chart(settings) {
             if (xx >= x) return timestamp;
             timestamp += 86400000;
         }
-        //var timestamp = (x - Math.round(parseInt(m_chartCss['margin-left'] + offset)) * _this.scaleinfoX.timePerPixel) - _this.scaleinfoX.startDate.getTime();
-
         return 0;
     }
 
     function getXPosition(timestamp) {
         var offset = (timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / (86400000 * 7); // veckor
         offset = offset * 86400000 * 2 / _this.scaleinfoX.timePerPixel;
-        return Math.round(parseInt(m_chartCss['margin-left']) + ((timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+        return Math.round(m_chartspaces.chart.left + ((timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
     }
 
     function drawXAxisYears(starttime, endtime) {
@@ -768,8 +847,8 @@ function Milli_Chart(settings) {
         calcXScale(starttime, endtime);
         if (_this.settings.drawxaxis != 0) {
             m_ctx.beginPath();
-            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
             m_ctx.stroke();
             m_ctx.closePath();
         }
@@ -787,20 +866,23 @@ function Milli_Chart(settings) {
                 }
             }
             if (draw) {
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
                 text = year;
-                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - m_ctx.measureText(text).width) { // not to far right?
+                if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - m_ctx.measureText(text).width) { // not to far right?
                     if (_this.settings.yearLabelsPos == 'top') {
                         m_ctx.save(); // flip and write new years on top
                         var fontMetrix = m_ctx.measureText(text);
                         x = x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
-                        var y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
+                        var y = m_chartspaces.chart.top; // + m_ctx.measureText(datum).width;
                         m_ctx.translate(x, y);
                         m_ctx.rotate(90 * Math.PI / 180);
                         m_ctx.fillText(text, 0, 0);
                         m_ctx.restore();
-                    } else
-                        m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    } else {
+                        //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                        m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    }
                 }
                 numItems++;
                 legendItems.push({ text: year.toString(), timestamp: new Date(year + '-01-01T00:00:00Z'), 'x': x });
@@ -823,10 +905,12 @@ function Milli_Chart(settings) {
                     }
                 }
                 if (draw) {
-                    drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                    //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                    drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
                     text = formatDate(year.getFullYear() + '-07-01', _this.settings.dateformat);
                     // ingen if som på year???
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
                     numItems++;
                     legendItems.push({ 'text': text, timestamp: new Date(year + '-07-01T00:00:00Z'), 'x': x });
                 }
@@ -851,9 +935,11 @@ function Milli_Chart(settings) {
                 }
                 if (dontPrint) break;
                 if (draw) {
-                    drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                    //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                    drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
                     text = formatDate(year.getFullYear() + '-' + (year.getMonth() + 1) + '-01', _this.settings.dateformat);
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.height - parseInt(m_chartCss['margin-bottom']) + 10);
                 }
                 legendItems.push({ 'text': text, timestamp: new Date(year + '-04-01T00:00:00Z'), 'x': x });
                 year = new Date((year.getFullYear() + 1) + '-04-01T00:00:00Z');
@@ -872,9 +958,11 @@ function Milli_Chart(settings) {
                         }
                     }
                     if (draw) {
-                        drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                        //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                        drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
                         text = formatDate(year.getFullYear() + '-' + (year.getMonth() + 1) + '-01', _this.settings.dateformat);
-                        m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                        //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                        m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
                     }
                     legendItems.push({ 'text': text, timestamp: new Date(year + '-10-01T00:00:00Z'), 'x': x });
                     year = new Date((year.getFullYear() + 1) + '-10-01T00:00:00Z');
@@ -895,8 +983,8 @@ function Milli_Chart(settings) {
         calcXScale(starttime, endtime);
         if (_this.settings.drawxaxis != 0) { // draw line
             m_ctx.beginPath();
-            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
             m_ctx.stroke();
             m_ctx.closePath();
         }
@@ -912,8 +1000,8 @@ function Milli_Chart(settings) {
                 currentDate = new Date(currentDate.getTime() + 86400000);
                 offset += 86400000 / _this.scaleinfoX.timePerPixel;
             }
-            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
+            x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            if (lastx == 0 && m_chartspaces.chart.left > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
                 currentDate = new Date(currentDate.getTime() + 86400000);
                 continue;
             }
@@ -924,106 +1012,33 @@ function Milli_Chart(settings) {
             if (draw) {
                 lastx = x;
                 var text = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
-                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxDateWidth()) { // not to far right?
+                    //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                }
+                //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
             }
             currentDate = new Date(currentDate.getTime() + 86400000);
         }
         // vad är detta?
-        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
-            var boxshadow = m_chartCss['box-shadow'].split(' ');
-            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-
-        } else
-            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-        m_ctx.restore();
-    }
-
-    function drawXAxisMonth2(starttime, endtime) {
-        // month axis
-        starttime -= starttime % 8640000;
-        endtime -= starttime % 8640000;
-        m_ctx.save();
-        m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
-        m_ctx.strokeStyle = m_gridHorizontalCss.color;
-        m_ctx.fillStyle = m_xLegendCss.color;
-        m_ctx.textAlign = "left";
+        if (typeof m_chartCss.boxShadow !== 'undefined') {
+            var boxshadow = m_chartCss.boxShadow.split(' ');
+            //if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) }, false);
 
-        calcXScale(starttime, endtime);
-        if (_this.settings.drawxaxis != 0) { // draw line
-            m_ctx.beginPath();
-            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.stroke();
-            m_ctx.closePath();
-        }
-        var currentDate = new Date(starttime);
-        var lastDate = new Date(starttime);
-        var endDate = new Date(endtime);
-        var p = { x: 0, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) };
-        var offset = 0; // timeoffset for closed hours,and weekends
-        var last = 0;
-        var olddate = '';
-        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) { // oklart om det skall vara så här 2021-06-01
-            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
-                currentDate = new Date(currentDate.getTime() + 86400000);
-                offset += 86400000 / _this.scaleinfoX.timePerPixel;
-            }
-            p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            var datum;
-            var dash = false;
-            datum = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
-            offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);  // varför?
-            currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
-            if (parseInt(m_chartCss['margin-left']) + (getMaxDateWidth() / 2) > (p.x - (getMaxDateWidth()))) {
-                continue;
-            }
-
-            lastDate = new Date(currentDate);
-            lastDate.setHours(endDate.getHours());
-            lastDate.setMinutes(endDate.getMinutes());
-            lastDate.setSeconds(endDate.getSeconds());
-            var printLegendItem = true;
-
-            if (p.x != parseInt(m_chartCss['margin-left']) && p.x - last < (Math.floor(_this.scaleinfoX.itemwidth))) {
-                printLegendItem = false;
-            }
-            if (printLegendItem) {
-                if (olddate != datum) {
-                    last = p.x;
-                    if (_this.scaleinfoX.lineLength > (p.x - (m_ctx.measureText(datum).width / 2) + m_ctx.measureText(datum).width / 2))
-                        m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
-                    olddate = datum;
-                }
-            }
+        } else {
+            //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+            drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) }, false);
         }
-        // print end x legend if not to close to last
-        /*if (_this.scaleinfoY.type == 'history') {
-            p.x = parseInt(m_chartCss['margin-left']) + _this.scaleinfoX.lineLength; // - (getStringWidth(m_ctx, 'HH:MM'));
-            if (p.x - last > (Math.floor(_this.scaleinfoX.itemwidth))) {
-                var datum = formatDate(_this.scaleinfoX.endDate, _this.settings.dateformat);
-                m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-            }
-        }*/
-        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
-            var boxshadow = m_chartCss['box-shadow'].split(' ');
-            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines(p, false);
-
-        } else
-            drawXAxisGridlines(p, false);
         m_ctx.restore();
-        return;
-
-
     }
 
     function calcXScaleTick(starttime, endtime) {
         _this.scaleinfoX.startDate = new Date(starttime);
         _this.scaleinfoX.endDate = new Date(endtime);
         _this.scaleinfoX.days = getNumberOfDays(starttime, endtime); // kan vi nog skita i
-        _this.scaleinfoX.lineLength = m_canvas.width - parseInt(m_chartCss['margin-right']) - parseInt(m_chartCss['margin-left']); // daybreaks can have 88/88
+        _this.scaleinfoX.lineLength = m_chartspaces.chart.right - m_chartspaces.chart.left; // daybreaks can have 88/88
         _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
         var maxLegendItems = Math.floor(_this.scaleinfoX.lineLength / (_this.scaleinfoX.itemwidth * 2));
 
@@ -1053,7 +1068,7 @@ function Milli_Chart(settings) {
                 pixelsperday[i] = arr[i] * timePerPixel;
             }
             var x = totalmilli / maxLegendItems / 60000;
-            numticks = maxLegendItems;
+            var numticks = maxLegendItems;
 
             _this.scaleinfoX.milliPerDay = new Date('2019-01-01T' + _this.instruments[0].marketclose + 'Z') - new Date('2019-01-01T' + _this.instruments[0].marketopen + 'Z');
             _this.scaleinfoX.timePerPixel = timePerPixel;
@@ -1108,164 +1123,37 @@ function Milli_Chart(settings) {
         return datetime.toTimeString().substring(0, 8);
     }
 
-    function drawXAxisTick(starttime, endtime) {
+    function calcTimeSpanInDays(startdate, enddate) {
+        var s = Math.ceil(startdate / 86400000) * 86400000;
+        var e = Math.ceil(enddate / 86400000) * 86400000;
+        var days = 1;
+        for (s; s < e; s += 86400000) {
+            var d = new Date(s);
+            if (d.getDay() != 0 && d.getDay() != 6)
+                days++;
+        }
+        return Math.min(days, 5);
+        // Dra av helgen om det är någon där
+        return Math.min(((e - s) / 86400000 + 1), 5);
+    }
+
+    function drawXAxisTickLowerChart() {
         m_ctx.save();
         m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
 
         m_ctx.strokeStyle = m_gridHorizontalCss.color;
         m_ctx.fillStyle = m_xLegendCss.color;
-        m_ctx.textAlign = "left";
-        calcXScaleTick(starttime, endtime);
         if (_this.settings.drawxaxis != 0) { // draw line for legend
             m_ctx.beginPath();
-            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.lowerChart.bottom + 0.5);
+            m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.lowerChart.bottom + 0.5);
             m_ctx.stroke();
             m_ctx.closePath();
         }
-        // if(startime.date == endtime.date  && starttime > open || endtime < close ) // no date
-
-        var currentDate = new Date(starttime);
-        console.log('startdate', currentDate);
-        var x;
-        var lastx = 0;
-        var draw = true;
-        var offset = 0;
-        var legendItems = [];
-        // add days (daychanges)
-        //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-        if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
-            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-        console.log(currentDate);
-        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
-            draw = true;
-            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
-                currentDate = new Date(currentDate.getTime() + 86400000);
-                offset += 86400000 / _this.scaleinfoX.timePerPixel;
-            }
-            //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
-            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
-                draw = false;
-            }
-            if (draw) {
-                lastx = x;
-                x += 0.5;
-                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
-                // if day change and setting print on top as well
-                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    legendItems.push({ x: x, type: 0, text: text });
-                }
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
-            }
-            currentDate = new Date(currentDate.getTime() + 86400000);
-            offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
-            //offset += (86400000 - _this.scaleinfoX.milliPerDay);
-        }
-        var currentDate = new Date(starttime);
-        console.log(currentDate);
-        //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-        if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
-            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-        console.log(currentDate);
-
-        var maxHourLegends;
-        console.log(legendItems);
-        if (legendItems.length == 0)
-            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
-        else
-        if (legendItems.length == 1)
-            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
-        else
-            maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
-        var tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
-        tickSize = tickSize.getTime() / 3600000;
-        var interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
-        console.log('MAX', maxHourLegends, tickSize, interval);
-        // print other times
-        offset = 0;
-        lastx = 0;
-        var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
-        var workDate = new Date(currentDate);
-        console.log('workdate', workDate);
-        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
-            console.log('workdate', workDate);
-            draw = true;
-            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
-                console.log('Helg', currentDate);
-                closeTime = new Date(closeTime.getTime() + 86400000);
-                currentDate = new Date(currentDate.getTime() + 86400000);
-                //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-                if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
-                    currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-                var workDate = new Date(workDate.getTime() + 86400000);
-                offset += 86400000 / _this.scaleinfoX.timePerPixel;
-            }
-            console.log(currentDate, closeTime);
-            if (currentDate.getTime() > closeTime.getTime()) {
-                // draw DayEnd(start) dash line
-                var dayStart = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z')
-                x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
-
-
-                closeTime = new Date(closeTime.getTime() + 86400000);
-                workDate = new Date(workDate.getTime() + 86400000);
-                currentDate = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
-                //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-                if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
-                    currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-                offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
-                console.log('CLOSED', currentDate, closeTime);
-                continue;
-            }
-            console.log(currentDate, closeTime);
-            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            for (var i = 0; i < legendItems.length; i++) {
-                console.log('loop', x, legendItems[i].x);
-                if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
-                    draw = false;
-                    console.log('False1');
-                    break;
-                }
-                if (x > legendItems[i].x && legendItems[i].x + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
-                    draw = false;
-                    console.log('False2');
-                    break;
-                }
-            }
-            console.log(x, lastx, offset);
-            if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
-                //draw = false;
-                console.log('false');
-            }
-            if (draw) {
-                lastx = x;
-                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
-                // if day change and setting print on top as well
-                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    legendItems.push({ x: x, type: 0 });
-                }
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
-            }
-            currentDate = new Date(currentDate.getTime() + interval);
-            //currentDate = new Date(currentDate.getTime() + 3600000);
-        }
-
-        // vad är detta?
-        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
-            var boxshadow = m_chartCss['box-shadow'].split(' ');
-            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-
-        } else
-            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
         m_ctx.restore();
-
     }
 
-    function drawXAxisTickBra(starttime, endtime) {
+    function drawXAxisTick(starttime, endtime) {
         m_ctx.save();
         m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
 
@@ -1275,372 +1163,203 @@ function Milli_Chart(settings) {
         calcXScaleTick(starttime, endtime);
         if (_this.settings.drawxaxis != 0) { // draw line for legend
             m_ctx.beginPath();
-            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.bottom + 0.5);
+            m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.bottom + 0.5);
             m_ctx.stroke();
             m_ctx.closePath();
         }
-        // if(startime.date == endtime.date  && starttime > open || endtime < close ) // no date
-
         var currentDate = new Date(starttime);
-        console.log('startdate', currentDate);
         var x;
         var lastx = 0;
         var draw = true;
         var offset = 0;
         var legendItems = [];
-        // add days (daychanges)
-        currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
-        console.log(currentDate);
-        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
-            draw = true;
-            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
-                //                console.log('Helg', currentDate);
-                currentDate = new Date(currentDate.getTime() + 86400000);
-                offset += 86400000 / _this.scaleinfoX.timePerPixel;
-            }
-            //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
-            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
-                draw = false;
-            }
-            if (draw) {
-                lastx = x;
-                x += 0.5;
-                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
-                // if day change and setting print on top as well
-                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    legendItems.push({ x: x, type: 0, text: text });
+        var openhour = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z')).getTime() % 86400000;
+        // add daysstarts
+        if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
+            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+
+        var firstDate = new Date(currentDate);
+        var days = calcTimeSpanInDays(starttime, endtime);
+        if (m_zoom.mouseup.timestamp == null || (m_zoom.mouseup.timestamp != null && days > 1)) {
+            while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
+                draw = true;
+                while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
+                    currentDate = new Date(currentDate.getTime() + 86400000);
+                    offset += 86400000 / _this.scaleinfoX.timePerPixel;
                 }
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
+                x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+                if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
+                    draw = false;
+                } else
+                if (m_zoom.mouseup.timestamp != null && firstDate.getTime() === currentDate.getTime())
+                    draw = false;
+                if (draw) {
+                    lastx = x + 0.5;
+                    var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
+                    // if day change and setting print on top as well
+                    if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxTimeWidth()) { // not to far right?
+                        m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
+                        legendItems.push({ x: x, type: 0, text: text });
+                    }
+                    if (x != m_chartspaces.chart.left + 0.5) { // do not draw the first line, it is already drawn
+                        if (openhour == currentDate.getTime() % 86400000) {
+                            drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, true); // dash?
+                        } else {
+                            drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false); // dash?
+                        }
+                    }
+                }
+                // Move to next day and set starting hour correct if we have open at half hour
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
+                if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
+                    currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
             }
-            currentDate = new Date(currentDate.getTime() + 86400000);
-            offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
         }
+        // add timestamps
         var currentDate = new Date(starttime);
-        console.log(currentDate);
-        currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+        if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
+            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
 
         var maxHourLegends;
-        console.log(legendItems);
         if (legendItems.length == 0)
-            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
-        else
-        if (legendItems.length == 1)
-            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - m_chartspaces.chart.left - getMaxTimeWidth()) / (getMaxTimeWidth() * 3)); // varför tar vi bort margin???
         else
-            maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
-        var tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
-        var tickSize = tickSize.getTime() / 3600000;
-        var interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
-
+        if (legendItems.length == 1) {
+            if (m_zoom.mouseup.timestamp && days == 2) {
+                // ta den största delen av linjen och mät på
+                if (_this.scaleinfoX.lineLength / 2 < legendItems[0].x + m_chartspaces.chart.left)
+                    maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - (_this.scaleinfoX.lineLength - legendItems[0].x) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+                else
+                    maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+            } else
+                maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+        } else {
+            maxHourLegends = Math.floor((legendItems[legendItems.length - 1].x - legendItems[legendItems.length - 2].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3)); // calculate with the last days length
+        }
+
+        var tickSize; // per day
+        if (days == 1) {
+            // use start and endtime as ticksize
+            tickSize = new Date(endtime - starttime);
+        } else if (m_zoom.mouseup.timestamp && days == 2) { // zoom with more than 2 days
+            // use the day with most time as tickSize
+            var tmpDate = new Date(starttime);
+            tickSize = new Date(new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(starttime)).getTime();
+            var firstDay = tickSize;
+            tmpDate = new Date(endtime);
+            var secondDay = new Date(endtime - new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z').getTime()).getTime();
+            tickSize += new Date(endtime - new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z').getTime()).getTime();
+            tickSize = new Date(Math.max(firstDay, secondDay));
+        } else {
+            // use full day as tickSize
+            tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
+        }
+        var interval;
+        var modularvalue = 3600000;
+
+        // calc the ticksize to add to time(interval) when drawing and the modulu value
+        if (tickSize.getTime() < 1800000) {
+            tickSize = tickSize.getTime() / 60000;
+            interval = Math.floor(tickSize / (maxHourLegends + 1)) * 60000;
+            if (interval < 60000) interval = 60000;
+            modularvalue = 60000;
+        } else if (tickSize.getTime() < 3600000) {
+            tickSize = tickSize.getTime() / 300000;
+            interval = Math.floor(tickSize / (maxHourLegends + 1)) * 300000;
+            modularvalue = 300000;
+        } else if (tickSize.getTime() < 7200000 * 3) {
+            tickSize = tickSize.getTime() / 600000;
+            interval = Math.floor(tickSize / (maxHourLegends + 1)) * 600000;
+            modularvalue = 600000;
+        } else {
+            tickSize = tickSize.getTime() / 3600000;
+            interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
+        }
+        if (interval == 0) interval = 300000;
+        if (interval % 60000 != 0)
+            interval = (interval - interval % 60000) + 60000; // remove sekunder
         // print other times
         offset = 0;
         lastx = 0;
         var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
         var workDate = new Date(currentDate);
-        console.log('workdate', workDate);
-        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
-            console.log('workdate', workDate);
+        currentDate = new Date(starttime);
+        if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
+            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
+
+        var count = 0;
+        while (currentDate.getTime() <= _this.scaleinfoX.endTimeStamp) {
+            if (count++ > 100) {
+                break; // just make sure we dont do an infinity loop
+
+            }
             draw = true;
             while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
-                console.log('Helg', currentDate);
                 closeTime = new Date(closeTime.getTime() + 86400000);
                 currentDate = new Date(currentDate.getTime() + 86400000);
-                currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
+                    currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
                 var workDate = new Date(workDate.getTime() + 86400000);
                 offset += 86400000 / _this.scaleinfoX.timePerPixel;
             }
-            console.log(currentDate, closeTime);
             if (currentDate.getTime() > closeTime.getTime()) {
+                // draw DayEnd(start) dash line
+                var dayStart = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z')
+                x = Math.round(m_chartspaces.chart.left + ((dayStart.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+                drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, true); // dash?
+
                 closeTime = new Date(closeTime.getTime() + 86400000);
                 workDate = new Date(workDate.getTime() + 86400000);
                 currentDate = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
-                currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
+                    currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
                 offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
-                console.log('CLOSED', currentDate, closeTime);
                 continue;
             }
-            console.log(currentDate, closeTime);
-            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
             for (var i = 0; i < legendItems.length; i++) {
-                console.log('loop', x, legendItems[i].x);
                 if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
                     draw = false;
-                    console.log('False1');
                     break;
                 }
                 if (x > legendItems[i].x && legendItems[i].x + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
                     draw = false;
-                    console.log('False2');
+                    break;
+                }
+                if (x == legendItems[i].x) {
+                    draw = false;
                     break;
                 }
             }
-            console.log(x, lastx, offset);
             if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
                 //draw = false;
-                console.log('false');
+                //console.log('false');
             }
+            var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
             if (draw) {
                 lastx = x;
-                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
                 // if day change and setting print on top as well
-                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxTimeWidth()) { // not to far right?
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
                     legendItems.push({ x: x, type: 0 });
                 }
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+                drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
             }
             currentDate = new Date(currentDate.getTime() + interval);
-            //currentDate = new Date(currentDate.getTime() + 3600000);
-        }
-
-        // vad är detta?
-        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
-            var boxshadow = m_chartCss['box-shadow'].split(' ');
-            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-
-        } else
-            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-        m_ctx.restore();
-
-    }
-
-    function drawXAxisTickTest(starttime, endtime) {
-        m_ctx.save();
-        m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
-
-        m_ctx.strokeStyle = m_gridHorizontalCss.color;
-        m_ctx.fillStyle = m_xLegendCss.color;
-        m_ctx.textAlign = "left";
-        calcXScaleTick(starttime, endtime);
-        if (_this.settings.drawxaxis != 0) { // draw line for legend
-            m_ctx.beginPath();
-            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.stroke();
-            m_ctx.closePath();
         }
-        // if(startime.date == endtime.date  && starttime > open || endtime < close ) // no date
 
-        var currentDate = new Date(starttime);
-        console.log('startdate', currentDate);
-        var x;
-        var lastx = 0;
-        var draw = true;
-        var offset = 0;
-        var legendItems = [];
-        // add days (daychanges)
-        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
-            draw = true;
-            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
-                console.log('Helg', currentDate);
-                currentDate = new Date(currentDate.getTime() + 86400000);
-                offset += 86400000 / _this.scaleinfoX.timePerPixel;
-            }
-            var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
-            if (currentDate.getTime() > closeTime.getTime()) {
-                currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
-                currentDate = new Date(currentDate.getTime() + 86400000);
-                //                offset += 86400000 / _this.scaleinfoX.timePerPixel;
-                offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
-                console.log('STÄNGT', currentDate);
-                continue;
-            }
-            console.log(currentDate);
-            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            /*if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxTimeWidth() / 2))) { // do not print left of y legend
-                console.log('ftst', currentDate);
-                currentDate = new Date(currentDate.getTime() + 86400000);
-                continue;
-            }*/
-            console.log(x, lastx, offset);
-            if (lastx + (getMaxDateWidth() / 2) > (x - getMaxDateWidth())) {
-                draw = false;
-                console.log('false');
-            }
-            if (draw) {
-                lastx = x;
-                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
-                // if day change and setting print on top as well
-                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
-            }
-            //currentDate = new Date(currentDate.getTime() + 86400000);
-            currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
-        }
         // vad är detta?
-        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
-            var boxshadow = m_chartCss['box-shadow'].split(' ');
-            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-
-        } else
-            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-        m_ctx.restore();
-
-    }
-
-    function drawXAxisTick2(starttime, endtime) {
-        // day and month axis
-        m_ctx.save();
-        m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
+        if (typeof m_chartCss.boxShadow !== 'undefined') {
+            var boxshadow = m_chartCss.boxShadow.split(' ');
+            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
 
-        m_ctx.strokeStyle = m_gridHorizontalCss.color;
-        m_ctx.fillStyle = m_xLegendCss.color;
-        m_ctx.textAlign = "left";
-        calcXScaleTick(starttime, endtime);
-        if (_this.settings.drawxaxis != 0) { // draw line for legend
-            m_ctx.beginPath();
-            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.stroke();
-            m_ctx.closePath();
-        }
-        var currentDate = new Date(starttime);
-        lastDate = new Date(new Date(starttime).toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
-
-        var p = { x: 0, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) };
-        var offset = 0; // timeoffset for closed hours,and weekends
-        var oldx = 1;
-        var newday = true;
-        var last = 0;
-        var nextYear = currentDate.getFullYear() + 1;
-        var drawDate = currentDate;
-        var lastDrawX = -100;
-        var datum;
-        var date;
-        var y, x;
-        while (p.x < (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2))) { // && oldx != p.x) {
-            var dayChange = false;
-            if (currentDate.getTime() > endtime) {
-                break;
-            }
-            oldx = p.x;
-            p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            var dash = false;
-            if (newday) {
-                //datum = currentDate.getDate() + '/' + (currentDate.getMonth() + 1); // format date
-                date = currentDate.getDate() + '/' + (currentDate.getMonth() + 1); // format date
-                dash = true;
-                dayChange = true;
-            }
-            //datum = currentDate.toTimeString().substring(0, 5); // Format time
-            _this.settings.timeformat = 'HH:mm'; // jonas får fixa   
-            datum = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
-            drawDate = currentDate;
-            newday = false;
-            currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
-            var printLegendItem = true;
-            var drawGridline = true;
-            if (currentDate.getTime() >= lastDate.getTime() && _this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') { // om nästa ticket är större än stängning idag, flytta till nästa dag
-                //console.log('hmm', currentDate, lastDate, _this.scaleinfoX.ticksize, newday);
-                currentDate = new Date((currentDate.getTime() + 86400000) - (currentDate.getTime() % 86400000));
-                currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
-
-                // next day att starttime
-                while (currentDate.getDay() == 0 || currentDate.getDay() == 6) {
-                    currentDate = new Date(currentDate.getTime() + 86400000);
-                    offset += 86400000 / _this.scaleinfoX.timePerPixel;
-                }
-                //console.log(currentDate, _this.scaleinfoX.endDate);
-                if (currentDate.getTime() > _this.scaleinfoX.endDate.getTime()) {
-                    break;
-                }
-                offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
-                lastDate = new Date(currentDate);
-                lastDate = new Date(lastDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
-                newday = true;
-            }
-            var fontMetrix;
-            var nextx = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            //if ((nextx - p.x < Math.floor(_this.scaleinfoX.itemwidth)) && new Date(currentDate.getTime() + _this.scaleinfoX.ticksize).getDate() != drawDate.getDate()) { // skriv bara ut om utrymmet får plats innan nästa punkt kommer skrivas (dagbrytningar)
-            console.log(nextx, p.x, currentDate);
-            if ((nextx - p.x < m_ctx.measureText('88:88').width) && new Date(currentDate.getTime() + _this.scaleinfoX.ticksize).getDate() != drawDate.getDate()) { // skriv bara ut om utrymmet får plats innan nästa punkt kommer skrivas (dagbrytningar)
-                //console.log('1', datum, 'Skall nog skrivas ut men för nära sista....',nextx,_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 1));
-                if (nextx < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 1)) { // is it too close to next?
-                    //console.log('HIDE');
-                    printLegendItem = false;
-                } else
-                if (p.x - lastDrawX < Math.floor(_this.scaleinfoX.itemwidth)) { // is it to close to previous?
-                    //  console.log('to close to previous',dash,datum);
-                    printLegendItem = false;
-                }
-                if (dash) {
-                    drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
-                }
-            } else
-            if (p.x - lastDrawX < Math.floor(_this.scaleinfoX.itemwidth)) { // to close to previous?
-                //console.log('to close to previous',dash,datum);
-                printLegendItem = false;
-                if (dash) {
-                    drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
-                    printLegendItem = true;
-                }
-            } else {
-                if (dash && _this.settings.intradaydates) { // lutande text
-                    m_ctx.save();
-                    fontMetrix = m_ctx.measureText(date);
-                    x = p.x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
-                    y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
-                    m_ctx.translate(x, y);
-                    m_ctx.rotate(90 * Math.PI / 180);
-                    m_ctx.fillText(date, 0, 0);
-                    m_ctx.restore();
-                }
-                if (drawGridline) {
-                    drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
-                    drawGridline = false;
-                }
-            }
-            if (printLegendItem) {
-                last = p.x;
-                //console.log(newday,datum,dayChange);
-                if (dayChange) {
-                    m_ctx.save();
-                    fontMetrix = m_ctx.measureText(date);
-                    x = p.x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
-                    y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
-                    m_ctx.translate(x, y);
-                    m_ctx.rotate(90 * Math.PI / 180);
-                    m_ctx.fillText(date, 0, 0);
-                    m_ctx.restore();
-                    //m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), parseInt(m_chartCss['margin-top']) + 5);
-                    if (drawGridline) {
-                        drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
-                    }
-                    lastDrawX = p.x;
-                }
-                //else
-                if (p.x < m_canvas.width - m_ctx.measureText(datum).width) { // if text will be cropped do not print
-                    m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    if (drawGridline) {
-                        drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
-                    }
-                    lastDrawX = p.x;
-                } else {
-                    //console.log('else', p.x, _this.scaleinfoX.itemwidth, m_canvas.width, _this.scaleinfoX.lineLength, parseInt(m_chartCss['margin-left']), _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - _this.scaleinfoX.itemwidth);
-                }
-            }
+        } else {
+            drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
         }
-        // print end x legend if not to close to last
-        /*        p.x = parseInt(m_chartCss['margin-left']) + _this.scaleinfoX.lineLength; // - (getStringWidth(m_ctx, 'HH:MM'));
-                if (p.x - last > (Math.floor(_this.scaleinfoX.itemwidth))) {
-                    var datum = _this.scaleinfoX.endDate.toTimeString().substring(0, 5);
-                    m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                }
-
-        */
-        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
-            var boxshadow = m_chartCss['box-shadow'].split(' ');
-            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines(p, false);
-
-        } //else
-        //drawXAxisGridlines(p, false);
-
         m_ctx.restore();
-        return;
     }
 
     function onMouseOut(evt) {
@@ -1684,15 +1403,15 @@ function Milli_Chart(settings) {
                 m_canvas.parentNode.appendChild(m_zoom.div);
                 m_zoom.div.setAttribute('class', 'millistream-chart-zoombox');
             }
-            if (x < parseInt(m_chartCss['margin-left'])) x = parseInt(m_chartCss['margin-left']);
-            m_zoom.div.style.top = parseInt(m_chartCss['margin-top']) + 'px';
+            if (x < m_chartspaces.chart.left) x = m_chartspaces.chart.left;
+            m_zoom.div.style.top = m_chartspaces.chart.top + 'px';
             m_zoom.div.style.left = (m_zoom.mousedown.pos > x ? x : m_zoom.mousedown.pos) + 'px';
-            if (x > m_canvas.width - parseInt(m_chartCss['margin-right'])) x = m_canvas.width - parseInt(m_chartCss['margin-right']);
-            m_zoom.div.style.height = m_canvas.height - parseInt(m_chartCss['margin-bottom']) - parseInt(m_chartCss['margin-top']) + 'px';
+            if (x > m_chartspaces.chart.right) x = m_chartspaces.chart.right;
+            m_zoom.div.style.height = m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - m_chartspaces.chart.top + 'px';
             m_zoom.div.style.width = (m_zoom.mousedown.pos > x ? m_zoom.mousedown.pos - x : x - m_zoom.mousedown.pos) + 'px';
         }
         if (_this.settings.enablehover == false) return;
-        if (x < parseInt(m_chartCss['margin-left']) || x > m_canvas.width - parseInt(m_chartCss['margin-right']) || y < parseInt(m_chartCss['margin-top']) || y > m_canvas.height - parseInt(m_chartCss['margin-bottom'])) {
+        if (x < m_chartspaces.chart.left || x > m_chartspaces.chart.right || y < m_chartspaces.chart.top || y > m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom'])) {
             onMouseOut();
             return;
         }
@@ -1845,8 +1564,8 @@ function Milli_Chart(settings) {
 
     function setTimeSpanData() {
         if (typeof _this.settings.timespanelement === 'undefined' || _this.settings.timespanelement == null) return;
-        startdate = new Date(_this.scaleinfoX.startTimeStamp);
-        enddate = new Date(_this.scaleinfoX.endTimeStamp);
+        var startdate = new Date(_this.scaleinfoX.startTimeStamp);
+        var enddate = new Date(_this.scaleinfoX.endTimeStamp);
         if (startdate.getTime() - (startdate.getTime() % 86400000) == enddate.getTime() - (enddate.getTime() % 86400000)) {
             _this.settings.timespanelement.innerHTML = startdate.toTimeString().substring(0, 8) + ' - ' + enddate.toTimeString().substring(0, 8);
         } else {
@@ -1906,42 +1625,22 @@ function Milli_Chart(settings) {
         }
     }
 
-    function checkTickChartData() {
-        var count = 0;
-        for (var i = 0; i < _this.instruments[0].trades.length; i++) {
-            if (_this.instruments[0].trades[i].timestamp > _this.scaleinfoX.startTimeStamp && _this.instruments[0].trades[i].timestamp < _this.scaleinfoX.endTimeStamp) {
-                if (count++ > 0) {
-                    return true;
-                }
-            }
-        }
-        var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-top']);
-        var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-left']);
-        m_ctx.save();
-        m_ctx.font = 'bold ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
-        m_ctx.font = 'bold 12px ' + m_xLegendCss['font-family'];
-        m_ctx.strokeStyle = m_gridHorizontalCss.color;
-        m_ctx.fillStyle = m_xLegendCss.color;
-        m_ctx.textAlign = "left";
-
-        m_ctx.fillText(_this.settings.nochartlabel, x - (m_ctx.measureText(_this.settings.nochartlabel).width / 2), y);
-        m_ctx.restore();
-        return false;
-    }
-
     function checkChartData(data) {
         // _this.instruments[0].history / _this.instruments[0].trades
         var count = 0;
         for (var i = 0; i < data.length; i++) {
-            if (data[i].timestamp > _this.scaleinfoX.startTimeStamp && data[i].timestamp < _this.scaleinfoX.endTimeStamp) {
+            if (data[i].timestamp >= _this.scaleinfoX.startTimeStamp && data[i].timestamp <= _this.scaleinfoX.endTimeStamp) {
                 //console.log(new Date(data[i].timestamp), new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.scaleinfoX.endTimeStamp), data[i]);
                 if (count++ > 0) {
                     return true;
                 }
             }
         }
-        var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-top']);
-        var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-left']);
+        console.log('NO data to draw on');
+        // var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + m_chartspaces.chart.top;
+        // var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + m_chartspaces.chart.left;
+        var y = m_chartspaces.chart.bottom - m_chartspaces.chart.top / 2 + m_chartspaces.chart.top;
+        var x = m_chartspaces.chart.right - m_chartspaces.chart.left / 2 + m_chartspaces.chart.left;
         m_ctx.save();
         m_ctx.font = 'bold ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
         m_ctx.font = 'bold 12px ' + m_xLegendCss['font-family'];
@@ -1954,8 +1653,36 @@ function Milli_Chart(settings) {
         return false;
     }
 
+    function calcChartSpaces() {
+        m_chartspaces.chart.height = m_canvas.height * (m_chartspaces.chart.percent / 100);
+        m_chartspaces.chart.top = parseInt(m_chartCss['margin-top']);
+        m_chartspaces.chart.left = parseInt(m_chartCss['margin-left']);
+        m_chartspaces.chart.right = m_canvas.width - parseInt(m_chartCss['margin-right']);
+        m_chartspaces.chart.bottom = m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']);
+        m_chartspaces.chart.width = m_canvas.width;
+        m_chartspaces.lowerChart.height = m_canvas.height * (m_chartspaces.lowerChart.percent / 100);
+        m_chartspaces.lowerChart.top = m_chartspaces.chart.bottom + parseInt(m_chartCss['margin-bottom']) + m_chartspaces.chart.top;
+        m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
+        m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
+        //m_chartspaces.lowerChart.bottom =m_chartspaces.lowerChart.top +m_chartspaces.lowerChart.height - parseInt(m_chartCss['margin-bottom']);
+        m_chartspaces.lowerChart.bottom = m_canvas.height - parseInt(m_chartCss['margin-bottom']);
+        m_chartspaces.lowerChart.width = m_canvas.width;
+        console.log(m_chartspaces);
+    }
+
     _this.drawChart = function() {
+        if (m_lastDrawnInstrument != _this.instruments[0].insref) {
+            m_zoom.mousedown.pos = 0;
+            m_zoom.mousedown.i = 0;
+            m_zoom.mousedown.timestamp = null;
+            m_zoom.mouseup.timestamp = null;
+            if (m_zoom.div) m_canvas.parentNode.removeChild(m_zoom.div);
+            m_zoom.div = null;
+            m_zoom.isZooming = false;
+        }
+        m_lastDrawnInstrument = _this.instruments[0].insref;
         if (m_ctx == null) return;
+        //console.clear();
         m_datapoints = [];
         if (m_dataPoints.map) m_dataPoints.map.clear();
         m_dataPoints.map = new Map();
@@ -1964,6 +1691,8 @@ function Milli_Chart(settings) {
             console.log('no chartdata');
             return;
         }
+        calcChartSpaces();
+
         var period = _this.settings.chartlen.substring(_this.settings.chartlen.length - 1);
         var len = parseInt(_this.settings.chartlen.substring(0, _this.settings.chartlen.length - 1));
         m_ctx.clearRect(0, 0, m_canvas.width, m_canvas.height);
@@ -1978,11 +1707,8 @@ function Milli_Chart(settings) {
                 _this.scaleinfoX.endTimeStamp = m_zoom.mouseup.timestamp > m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
                 _this.scaleinfoX.startTimeStamp = m_zoom.mouseup.timestamp < m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
             } else {
-                //console.log('len', len);
                 _this.scaleinfoX.startTimeStamp = getTickStartDate(len); // calc not to start with weekends
                 // back up x days from quotedate if needed
-                //console.log(new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.instruments[0].quotedate));
-                //console.log(new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.instruments[0].quotedate - (86400000 * (len - 1))));
                 // TODO if startTimeStamp < quotedate -len borde det vara
                 var quoteDate = businessDaysSubtraction(_this.instruments[0].quotedate, len);
                 if (_this.scaleinfoX.startTimeStamp - _this.scaleinfoX.startTimeStamp % 86400000 > quoteDate) { // if startdate > quotedate back startdate
@@ -2116,36 +1842,44 @@ function Milli_Chart(settings) {
                 //plotChart(_this.instruments[0].history, null);
 
         }
-        drawBoxShadow(m_canvas, m_ctx);
-        if (m_modules.quantity) {
-            m_modules.quantity.redraw();
+        drawBoxShadow(m_chartspaces.chart);
+        if (m_chartspaces.chart.percent != 100) {
+            drawXAxisTickLowerChart();
+            drawYAxisLower();
+            drawBoxShadow(m_chartspaces.lowerChart);
         }
         onMouseOut();
     };
 
-    function drawBoxShadow(canvas, ctx) {
-        if (typeof m_chartCss['box-shadow'] === 'undefined') return;
-        var boxshadow = m_chartCss['box-shadow'].split(' ');
-        ctx.save();
+    function drawBoxShadow(space) {
+        console.log(space);
+        if (typeof m_chartCss.boxShadow === 'undefined') return;
+        var boxShadow = m_chartCss.boxShadow;
+        if (boxShadow.indexOf(')') != -1) {
+            boxShadow = boxShadow.substring(boxShadow.indexOf(')') + 2);
+        }
+        var boxshadow = boxShadow.split(' ');
+        m_ctx.save();
         if (parseInt(boxshadow[0]) > 0) {
-            ctx.beginPath();
-            ctx.strokeStyle = m_chartCss['border-top-color'];
-            ctx.lineWidth = parseInt(boxshadow[1]);
-            ctx.moveTo(parseInt(m_chartCss['margin-left']), parseInt(m_chartCss['margin-top']));
-            ctx.lineTo(canvas.width - parseInt(m_chartCss['margin-right']), parseInt(m_chartCss['margin-top']));
-            ctx.stroke();
-            ctx.closePath();
+            m_ctx.beginPath();
+            m_ctx.strokeStyle = m_chartCss['border-top-color'];
+            m_ctx.lineWidth = parseInt(boxshadow[1]);
+            m_ctx.moveTo(space.left, space.top);
+            m_ctx.lineTo(space.right, space.top);
+            m_ctx.stroke();
+            m_ctx.closePath();
         }
         if (parseInt(boxshadow[1]) > 0) {
-            ctx.beginPath();
-            ctx.strokeStyle = m_chartCss['border-right-color'];
-            ctx.lineWidth = parseInt(boxshadow[1]);
-            ctx.moveTo(canvas.width - parseInt(m_chartCss['margin-right']), parseInt(m_chartCss['margin-top']) + 0.5);
-            ctx.lineTo(canvas.width - parseInt(m_chartCss['margin-right']), canvas.height - parseInt(m_chartCss['margin-bottom']));
-            ctx.stroke();
-            ctx.closePath();
+            m_ctx.beginPath();
+            m_ctx.strokeStyle = m_chartCss['border-right-color'];
+            m_ctx.lineWidth = parseInt(boxshadow[1]);
+            m_ctx.moveTo(space.right, space.top + 0.5);
+            //m_ctx.lineTo(spaces.chart.right, spaces.chart.height - parseInt(m_chartCss['margin-bottom']));
+            m_ctx.lineTo(space.right, space.bottom);
+            m_ctx.stroke();
+            m_ctx.closePath();
         }
-        ctx.restore();
+        m_ctx.restore();
     }
 
     function parseData(data, factor) {
@@ -2239,39 +1973,50 @@ function Milli_Chart(settings) {
     }
 
     _this.addQuantity = function() {
-        if (m_modules.quantity == null)
-            m_modules.quantity = new MilliChart_Quantity(_this, m_canvas);
+        if (m_chartspaces.chart.percent == 100) {
+            m_chartspaces.chart.percent = 70;
+            m_chartspaces.lowerChart.percent = 30;
+        } else {
+            m_chartspaces.chart.percent = 100;
+            m_chartspaces.lowerChart.percent = 0;
+            _this.drawChart();
+            return;
+        }
+        /*if (m_modules.quantity == null)
+            m_modules.quantity = new MilliChart_Quantity(_this, m_canvas);*/
+        _this.drawChart();
     };
 
     _this.resizeStart = function(e, ui) {
-        m_resizing.resizing = true;
         m_resizing.width = m_canvas.width;
         m_resizing.height = m_canvas.height;
     };
 
     _this.resize = function(e, ui) {
-        var diff = (m_resizing.height - _this.settings.target.offsetHeight) / _this.settings.target.offsetHeight * 100;
-        if (Math.abs(diff) > 10) {
-            m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
-            m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
+        var diff = (m_resizing.height - m_canvas.height) / m_canvas.height * 100;
+        if (Math.abs(diff) > 1) {
+            setChartSize();
+            m_resizing.width = m_canvas.width;
+            m_resizing.height = m_canvas.height;
             _this.drawChart();
         } else {
-            diff = (m_resizing.width - _this.settings.target.offsetWidth) / _this.settings.target.offsetWidth * 100;
-            if (Math.abs(diff) > 10) {
-                m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
-                m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
+            diff = (m_resizing.width - m_canvas.width) / m_canvas.width * 100;
+            if (Math.abs(diff) > 1) {
+                setChartSize();
+                m_canvas.height = _this.settings.target.offsetHeight;
+                m_canvas.width = _this.settings.target.offsetWidth;
+                m_resizing.width = m_canvas.width;
+                m_resizing.height = m_canvas.height;
                 _this.drawChart();
             }
         }
-        m_resizing.width = m_canvas.width;
-        m_resizing.height = m_canvas.height;
+        var cache = m_ctx.getImageData(0, 0, m_canvas.width, m_canvas.height);
+        setChartSize();
+        m_ctx.putImageData(cache, 0, 0);
     };
 
     _this.resizeEnd = function(e, ui) {
-        m_resizeing = false;
-        m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
-        m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
-        console.log('Width:', _this.settings.target.offsetWidth);
+        setChartSize();
         _this.drawChart();
     };
 
@@ -2300,7 +2045,7 @@ function Milli_Chart(settings) {
             currentDate.setSeconds(lastdate.getSeconds());
 
             if (lastdate.toISOString().substring(0, 10) != currentDate.toISOString().substring(0, 10)) { // new date
-                tmp = new Date(lastdate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
+                var tmp = new Date(lastdate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
                 var nextDate = new Date(data[i].timestamp);
                 tmp = tmp.getTime() + 86400000 - _this.scaleinfoX.milliPerDay; // increase to next days starttime
                 currentDate = new Date(tmp);
@@ -2313,14 +2058,15 @@ function Milli_Chart(settings) {
                 }
                 offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
                 lastdate = currentDate;
-                startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
+                startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
                 // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
 
             }
-            startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+            //startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+            startpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
             var maxy = maxy > startpoint.y ? maxy : startpoint.y;
 
-            startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
+            startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
             startpoint.x -= offset;
             m_ctx.beginPath();
             m_ctx.arc(startpoint.x, startpoint.y - 20, 10, 0, 2 * Math.PI, false);
@@ -2386,11 +2132,13 @@ function Milli_Chart(settings) {
                 currentDate = new Date(data[i].timestamp);
                 offset = ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel) * dateDiffInDays(new Date(startDate), currentDate);
                 tmp = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
-                endpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((tmp.getTime() - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
-                if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') // plot the closeprice1d
-                    endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(_this.instruments[instrument].closeprice1d) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
-                else {
-                    endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+                endpoint.x = Math.round(m_chartspaces.chart.left + ((tmp.getTime() - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
+                if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') { // plot the closeprice1d
+                    //endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(_this.instruments[instrument].closeprice1d) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+                    endpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(_this.instruments[instrument].closeprice1d) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+                } else {
+                    //endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+                    endpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
                     // do not add closeprice to hover array
                     /*
 					var x = Math.round(endpoint.x);
@@ -2435,22 +2183,20 @@ function Milli_Chart(settings) {
                 offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
                 lastdate = currentDate;
                 //console.log(startpoint.x);
-                startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
+                startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
                 //console.log(startpoint.x);
 
                 // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
                 if (_this.scaleinfoY.type == 'trades' && tmpx < startpoint.x) {
                     m_ctx.lineTo(startpoint.x, startpoint.y);
                 }
-
                 //m_ctx.lineTo(startpoint.x, startpoint.y);
-
             }
-            //p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);    // from drawXaxis
-            startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+            //startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+            startpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
             maxy = maxy > startpoint.y ? maxy : startpoint.y;
 
-            startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
+            startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
             startpoint.x -= offset;
             if (startpoint.x != endpoint.x || startpoint.y != endpoint.y) {
                 var x = Math.round(startpoint.x);
@@ -2474,7 +2220,7 @@ function Milli_Chart(settings) {
                         //m_ctx.bezierCurveTo(startpoint.x, startpoint.y, endpoint.x - 1, endpoint.y - 1, endpoint.x, endpoint.y); // läs på om detta för "runda linjer"
 
                         if (instrument == 0) {
-                            point = { price: data[i].price, open: data[i].openprice, x: startpoint.x - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp) };
+                            point = { price: data[i].price, open: data[i].openprice, x: startpoint.x - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), quantity: data[i].quantity };
                             if (typeof data[i].dividend !== 'undefined') point.dividend = data[i].dividend;
                             if (typeof data[i].diff !== 'undefined') point.diff = data[i].diff;
                             m_datapoints.push(point);
@@ -2488,19 +2234,19 @@ function Milli_Chart(settings) {
                         if (_this.settings.hcurve && _this.scaleinfoY.type == 'history') {
                             if (isToday(currentDate)) {
                                 // only 1 point in hcurve chart, draw line from start of chart to end date
-                                m_ctx.moveTo(parseInt(m_chartCss['margin-left']), startpoint.y);
+                                m_ctx.moveTo(m_chartspaces.chart.left, startpoint.y);
                                 m_ctx.lineTo(startpoint.x, startpoint.y);
-                                point = { price: data[i].price, open: data[i].openprice, x: parseInt(m_chartCss['margin-left']) - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), insref: _this.instruments[instrument].insref, diff: data[i].diff };
+                                point = { price: data[i].price, open: data[i].openprice, x: m_chartspaces.chart.left - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), insref: _this.instruments[instrument].insref, diff: data[i].diff };
                                 m_datapoints.push(point);
                                 point = { price: data[i].price, open: data[i].openprice, x: startpoint.x - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), insref: _this.instruments[instrument].insref, diff: data[i].diff };
                                 m_datapoints.push(point);
-                                startx = parseInt(m_chartCss['margin-left']);
+                                startx = m_chartspaces.chart.left;
                                 starty = startpoint.y;
                                 // last point so break out and store startx and starty from fake point
                                 break;
                             } else if (hCurveLastPoint) {
                                 /*                                var y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((hCurveLastPoint.price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
-                                                                m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y);
+                                                                m_ctx.moveTo(m_chartspaces.chart.left, y);
                                                                 m_ctx.lineTo(startpoint.x, y);*/
                             }
                         }
@@ -2509,11 +2255,9 @@ function Milli_Chart(settings) {
                     startx = startpoint.x;
                     starty = startpoint.y;
                 }
-                //console.log('in', startpoint.x);
                 endpoint.x = startpoint.x;
                 endpoint.y = startpoint.y;
             }
-            //            console.log('div', data[i]);
             if (data[i].dividend) {
                 //console.log('div', data[i]);
             }
@@ -2523,9 +2267,10 @@ function Milli_Chart(settings) {
         });
         m_ctx.stroke();
         if (_this.settings.fillchart == true && instrument == 0) {
-            //console.log(startpoint.x, endpoint.x);
-            m_ctx.lineTo(startpoint.x, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
-            m_ctx.lineTo(startx, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            //            m_ctx.lineTo(startpoint.x, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            //            m_ctx.lineTo(startx, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(startpoint.x, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(startx, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
             m_ctx.lineTo(startx, starty);
             m_ctx.closePath();
             if (true == m_instrumentCss[0]['background-image'].startsWith('linear-gradient')) {
@@ -2537,7 +2282,7 @@ function Milli_Chart(settings) {
                     col0 = col0.substring(0, col0.lastIndexOf(','));
                     col1 = colors.substring(colors.lastIndexOf('rgba'), colors.lastIndexOf(')'));
                 }
-                var grd = m_ctx.createLinearGradient(0, 0, 0, m_canvas.height - parseInt(m_chartCss['margin-top']) - parseInt(m_chartCss['margin-bottom']));
+                var grd = m_ctx.createLinearGradient(0, 0, 0, m_chartspaces.chart.height - m_chartspaces.chart.top - parseInt(m_chartCss['margin-bottom']));
                 grd.addColorStop(0, col0);
                 grd.addColorStop(1, col1);
                 m_ctx.fillStyle = grd;
@@ -2634,6 +2379,16 @@ function Milli_Chart(settings) {
         return 1;
     };
 
+    function setChartSize() {
+        var offset = 0;
+        if (_this.settings.target.parentNode.classList.contains('chartcontainer')) {
+            offset = _this.settings.target.getBoundingClientRect().top - _this.settings.target.parentNode.getBoundingClientRect().top;
+        }
+        _this.settings.target.style.height = (_this.settings.target.parentNode.offsetHeight - offset) + 'px';
+        _this.settings.target.style.width = _this.settings.target.parentNode.offsetWidth + 'px';
+        m_canvas.height = _this.settings.target.offsetHeight;
+        m_canvas.width = _this.settings.target.offsetWidth;
+    }
     _this.buildwidget = function(resp) {
         //console.log('buildwidget', resp);
         parseData(resp[0], 1);
@@ -2651,13 +2406,8 @@ function Milli_Chart(settings) {
         if (m_canvas == null) {
             m_canvas = MillistreamWidgetApi_addElement(_this, 'canvas', 'millistream-chart-canvas', _this.settings.target);
 
-            //m_canvas.style.width = '100%';
-            //m_canvas.style.height = '100%';
-            //m_canvas.setAttribute('height', m_canvas.offsetHeight);
-            //m_canvas.setAttribute('width', m_canvas.offsetWidth); // läs från css?
-            m_canvas.setAttribute('height', _this.settings.target.offsetHeight);
-            //m_canvas.setAttribute('height', 300);
-            m_canvas.setAttribute('width', _this.settings.target.offsetWidth); // läs från css?
+            setChartSize();
+
             m_ctx = m_canvas.getContext("2d");
             m_canvas.addEventListener('mousemove', onMouseMove, false); // disable while loading and enable on drawReady
             m_canvas.addEventListener('mouseout', onMouseOut, false);
@@ -2683,9 +2433,13 @@ function Milli_Chart(settings) {
                 if (m_datapoints.length == 0 || m_zoom.mousedown.timestamp == null) return;
                 var rect = m_canvas.getBoundingClientRect();
                 var x = evt.clientX - rect.left - 1;
+                if (x < m_zoom.mousedown.pos) {
+                    clearZoom();
+                    return;
+                }
                 if (Math.abs(x - m_zoom.mousedown.pos) > 5) { // only handle zoom with 5 pixels width
                     var i;
-                    for (i = m_datapoints.length - 1; i > 0; i--) { // -1??
+                    for (i = m_datapoints.length - 1; i > 0; i--) {
                         if (x >= m_datapoints[i].x) {
                             m_zoom.end = x;
                             break;
@@ -2761,7 +2515,8 @@ function Milli_Chart(settings) {
         m_chartCss['margin-bottom'] = properties.marginBottom;
         m_chartCss['margin-left'] = properties.marginLeft;
         m_chartCss['margin-right'] = properties.marginRight;
-        m_chartCss['box-shadow'] = properties.boxShadow;
+        //m_chartCss['box-shadow'] = properties.boxShadow;
+        m_chartCss.boxShadow = properties.boxShadow;
         m_chartCss['border-right-color'] = properties.borderRightColor;
         m_chartCss['border-left-color'] = properties.borderLeftColor;
 
@@ -2957,7 +2712,6 @@ function Milli_Chart(settings) {
             changeOrientation();
 
     });
-
 }
 var milli_data_api_url = 'https://stage.millistream.com/widgets/3.0.3/data/milli_widget_dataapi.php?';
 
@@ -3605,7 +3359,7 @@ function print_field(widget, element, field, value, overridedecimals) {
         }
     }
     if (typeof widget.settings.translations !== 'undefined' && widget.translateTypes) {
-        element.innerHTML = widget.translateTypes(value);
+        element.innerHTML = widget.translateTypes(value, field);
         return element.innerHTML;
     }
 
@@ -5532,4 +5286,5 @@ function MillistreamWidgetStreamingApi(settings) {
 }
 exports.Milli_Chart = Milli_Chart;
 exports.MillistreamWidgetSettings = MillistreamWidgetSettings;
+exports.milli_data_api_url = milli_data_api_url;
 exports.MillistreamWidgetStreamingApi = MillistreamWidgetStreamingApi;