@millistream/millistream-widgets 0.0.15 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/millistream-widgets.js +449 -729
  2. package/package.json +1 -1
package/millistream-widgets.js CHANGED
@@ -7,10 +7,6 @@ function Milli_Chart(settings) {
7
7
  _this.scaleinfoY = {};
8
8
  _this.scaleinfoY2 = {};
9
9
  _this.instruments = [];
10
- var m_modules = {
11
- quantity: null
12
- };
13
-
14
10
  _this.settings = {
15
11
  autodraw: true,
16
12
  instrument: null,
@@ -46,6 +42,16 @@ function Milli_Chart(settings) {
46
42
  yearLabelsPos: 'bottom'
47
43
  };
48
44
  _this.unsubscriptions = {};
45
+ var m_chartspaces = {
46
+ chart: {
47
+ percent: 100,
48
+ height: 0
49
+ },
50
+ lowerChart: {
51
+ percent: 0,
52
+ height: 0
53
+ }
54
+ };
49
55
  var m_dummyDiv = null; // dummy div For chartclasses
50
56
  var m_requestid = 0;
51
57
  var m_canvas = null;
@@ -101,6 +107,7 @@ function Milli_Chart(settings) {
101
107
  div: null,
102
108
  isZooming: false
103
109
  };
110
+ var m_lastDrawnInstrument = -1;
104
111
  var m_months = ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'];
105
112
  var m_xLegendCss = {
106
113
  'font-size': '10px',
@@ -421,11 +428,12 @@ function Milli_Chart(settings) {
421
428
  }
422
429
 
423
430
  function calcHighLow() {
424
- var datalen = 0;
425
431
  _this.scaleinfoY.lowValue = null;
426
432
  _this.scaleinfoY.highValue = null;
427
433
  _this.scaleinfoY2.lowValue = null;
428
434
  _this.scaleinfoY2.highValue = null;
435
+ _this.scaleinfoY.lowLowerChart = null;
436
+ _this.scaleinfoY.highLowerChart = null;
429
437
  var firstvalue = null;
430
438
 
431
439
  for (var s = 0; s < _this.instruments.length; s++) {
@@ -434,34 +442,26 @@ function Milli_Chart(settings) {
434
442
  if (_this.scaleinfoY.type != 'history') {
435
443
  if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d' && !m_zoom.mousedown.timestamp) {
436
444
  firstvalue = parseFloat(_this.instruments[s].closeprice1d);
437
- //console.log('closeprice1d', firstvalue);
438
445
  }
439
446
  }
440
- //console.log(_this.scaleinfoY.type, data, firstvalue);
441
447
  for (var i = 0; i < data.length; i++) {
442
448
  // only calc on visible data
443
449
  var price = data[i][_this.settings.graphvalue] * _this.instruments[s].factor;
450
+ var quantity = 0;
451
+ if (data[i].quantity !== 'undefined')
452
+ quantity = data[i].quantity;
444
453
  if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) {
445
- // if (_this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') firstvalue = data[i][_this.settings.graphvalue] * _this.instruments[s].factor;
446
- // continue; // only calc high low on data we are showing
447
454
  continue;
448
455
  }
449
456
  if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) {
450
- break; // continue?
457
+ break;
451
458
  }
452
459
 
453
460
  if (_this.scaleinfoY.type != 'history' && (data[i].timestamp % 86400000 < _this.instruments[0].opentimestamp || data[i].timestamp % 86400000 > _this.instruments[0].closetimestamp)) {
454
461
  // stämmer detta kan det bli överlapp vid sommartid/vintertid?
455
462
  continue;
456
463
  }
457
- if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) break;
458
464
 
459
- if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) { // hit kommer vi ju aldrig
460
- //if (_this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') firstvalue = price
461
- //console.log(new Date(data[i].timestamp),price,firstvalue);
462
- continue; // only calc high low on data we are showing
463
- }
464
- datalen++;
465
465
  if (firstvalue == null) {
466
466
  if (_this.scaleinfoY.type == 'history')
467
467
  firstvalue = price;
@@ -478,6 +478,8 @@ function Milli_Chart(settings) {
478
478
  data[i].diff = diff;
479
479
  if (_this.scaleinfoY2.lowValue == null || _this.scaleinfoY2.lowValue > diff) _this.scaleinfoY2.lowValue = diff;
480
480
  if (_this.scaleinfoY2.highValue == null || _this.scaleinfoY2.highValue < diff) _this.scaleinfoY2.highValue = diff;
481
+ if (_this.scaleinfoY.lowLowerChart == null || _this.scaleinfoY.lowLowerChart > quantity) _this.scaleinfoY.lowLowerChart = quantity;
482
+ if (_this.scaleinfoY.highLowerChart == null || _this.scaleinfoY.highLowerChart < quantity) _this.scaleinfoY.highLowerChart = quantity;
481
483
  }
482
484
  if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') { // if closeprice is used calch high/low on it
483
485
  var cp = parseFloat(_this.instruments[s].closeprice1d);
@@ -496,11 +498,96 @@ function Milli_Chart(settings) {
496
498
  _this.scaleinfoY.lowValue -= 1;
497
499
  _this.scaleinfoY.highValue += 1;
498
500
  }
499
- // console.log(_this.scaleinfoY);
501
+ console.log(_this.scaleinfoY);
500
502
  // console.log('CALCHHIGHLOW', _this.scaleinfoY);
501
503
  return 1;
502
504
  }
503
505
 
506
+ function plotLower(valuePerPixel) {
507
+ m_ctx.save();
508
+ m_ctx.strokeStyle = m_instrumentCss[0].color;
509
+ m_ctx.lineWidth = parseInt(m_instrumentCss[0].width);
510
+ for (var i = 0; i < m_datapoints.length; i++) {
511
+ m_ctx.moveTo(m_datapoints[i].x + 0.5, m_chartspaces.lowerChart.bottom - 0.5);
512
+ var y = Math.round(m_chartspaces.lowerChart.bottom - (m_datapoints[i].quantity * valuePerPixel));
513
+ m_ctx.lineTo(m_datapoints[i].x + 0.5, y - 0.5);
514
+ m_ctx.stroke();
515
+ }
516
+ m_ctx.restore();
517
+ }
518
+
519
+ function drawYLegendLower(x, numticks, lineLength, markers) {
520
+ m_ctx.save();
521
+ m_ctx.textAlign = 'right';
522
+ var tickSize = getTickValue(_this.scaleinfoY.lowLowerChart, _this.scaleinfoY.highLowerChart, numticks);
523
+ console.log(_this.scaleinfoY.highLowerChart, tickSize, lineLength);
524
+ var maxValue = _this.scaleinfoY.highLowerChart == 0 ? 100 : _this.scaleinfoY.highLowerChart + (tickSize * 0.2);
525
+ var valuePerPixel = lineLength / maxValue;
526
+ if (isNaN(valuePerPixel) || !isFinite(valuePerPixel)) {
527
+ console.log('cant draw valuePerPixel' + valuePerPixel);
528
+ return false;
529
+ }
530
+ var value = 0;
531
+ for (;;) {
532
+ var y = Math.round(m_chartspaces.lowerChart.bottom - (value * valuePerPixel));
533
+ console.log(value, y, tickSize, maxValue);
534
+
535
+ if (y <= m_chartspaces.lowerChart.top) break;
536
+ if (y <= m_chartspaces.lowerChart.bottom) {
537
+ if (_this.settings.gridHorizontalLines == true) {
538
+ m_ctx.save();
539
+ if (_this.settings.gridHorizontalLinesStyle == 'dash') {
540
+ m_ctx.setLineDash([3, 3]);
541
+ }
542
+ m_ctx.moveTo(m_chartspaces.lowerChart.left, y + 0.5);
543
+ m_ctx.lineTo(m_chartspaces.lowerChart.right, y + 0.5);
544
+ m_ctx.stroke();
545
+ m_ctx.restore();
546
+ } else
547
+ if (_this.settings.drawyaxis == true && markers == true) { // draw legenditem markers for price
548
+ m_ctx.moveTo(m_chartspaces.lowerChart.left, y + 0.5);
549
+ m_ctx.lineTo(m_chartspaces.lowerChart.left + 3, y + 0.5);
550
+ m_ctx.stroke();
551
+ }
552
+
553
+ if (markers == true && _this.settings.drawyaxis == true) {
554
+ var label = formatLargeNumber(value, 0, _this);
555
+ var textpos = x - 5;
556
+ if (m_yLegendCss['vertical-align'] == 'top') {
557
+ if (y - (getFontSize(m_yLegendCss)) > 0) // dont draw if cropped
558
+ m_ctx.fillText(label, textpos, y - ((getFontSize(m_yLegendCss) + 2)));
559
+ } else
560
+ m_ctx.fillText(label, textpos, y - (getFontSize(m_yLegendCss) / 2));
561
+ }
562
+ }
563
+ value += tickSize;
564
+ }
565
+ m_ctx.restore();
566
+ plotLower(valuePerPixel);
567
+ return true;
568
+ }
569
+
570
+ function drawYAxisLower() {
571
+
572
+ //m_ctx.save();
573
+ m_ctx.strokeStyle = m_gridHorizontalCss.color;
574
+ m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
575
+ console.log(m_yLegendCss.color, m_gridHorizontalCss.color);
576
+ m_ctx.fillStyle = m_yLegendCss.color;
577
+ var lineLen = m_chartspaces.lowerChart.bottom - m_chartspaces.lowerChart.top;
578
+ var numticks = lineLen / (getFontSize(m_yLegendCss) * 2);
579
+ if (numticks > 8) numticks = 8; // limit to 8 items on Y legend ( this is not an absolut count, since we calculate nice legend numbers
580
+
581
+ m_ctx.moveTo(m_chartspaces.lowerChart.left + 0.5, m_chartspaces.lowerChart.top);
582
+ m_ctx.lineTo(m_chartspaces.lowerChart.left + 0.5, m_chartspaces.lowerChart.bottom);
583
+ m_ctx.stroke();
584
+ var x = m_chartspaces.lowerChart.left - 3;
585
+
586
+ drawYLegendLower(x, numticks, lineLen, true);
587
+ //m_ctx.restore();
588
+
589
+ }
590
+
504
591
  function drawYLegend(si, x, side, gridHorizontalLines, number) {
505
592
  var value;
506
593
  if (si.highValue == si.lowValue) console.log(si.tickSize);
@@ -525,25 +612,25 @@ function Milli_Chart(settings) {
525
612
  return false;
526
613
  }
527
614
  for (;;) {
528
- var y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - ((value - si.minValue) * si.valuePerPixel));
529
- if (y <= parseInt(m_chartCss['margin-top'])) break;
530
- if (y <= m_canvas.height - parseInt(m_chartCss['margin-bottom'])) {
615
+ var y = Math.round(m_chartspaces.chart.bottom - ((value - si.minValue) * si.valuePerPixel));
616
+ if (y <= m_chartspaces.chart.top) break;
617
+ if (y <= m_chartspaces.chart.bottom) {
531
618
  if (gridHorizontalLines == true) {
532
619
  m_ctx.save();
533
620
  if (_this.settings.gridHorizontalLinesStyle == 'dash') {
534
621
  m_ctx.setLineDash([3, 3]);
535
622
  }
536
623
  m_ctx.beginPath();
537
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y + 0.5);
538
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), y + 0.5);
624
+ m_ctx.moveTo(m_chartspaces.chart.left, y + 0.5);
625
+ m_ctx.lineTo(m_chartspaces.chart.right, y + 0.5);
539
626
  m_ctx.stroke();
540
627
  m_ctx.closePath();
541
628
  m_ctx.restore();
542
629
  } else
543
630
  if (_this.settings.drawyaxis == true && number == 1) { // draw legenditem markers for price
544
631
  m_ctx.beginPath();
545
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y + 0.5);
546
- m_ctx.lineTo(parseInt(m_chartCss['margin-left']) + 3, y + 0.5);
632
+ m_ctx.moveTo(m_chartspaces.chart.left, y + 0.5);
633
+ m_ctx.lineTo(m_chartspaces.chart.left + 3, y + 0.5);
547
634
  m_ctx.stroke();
548
635
  m_ctx.closePath();
549
636
  } else
@@ -577,7 +664,6 @@ function Milli_Chart(settings) {
577
664
  }
578
665
 
579
666
  function drawYAxis() {
580
- // console.log(m_chartCss['margin-left']);
581
667
  m_ctx.save();
582
668
  m_ctx.strokeStyle = m_gridHorizontalCss.color;
583
669
  m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
@@ -585,10 +671,9 @@ function Milli_Chart(settings) {
585
671
  //if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') firstvalue = _this.instruments[0].closeprice1d;
586
672
 
587
673
  if (0 == calcHighLow()) {
588
- // console.log('no data to draw on');
589
674
  return;
590
675
  }
591
- _this.scaleinfoY.lineLength = m_canvas.height - parseInt(m_chartCss['margin-top']) - parseInt(m_chartCss['margin-bottom']);
676
+ _this.scaleinfoY.lineLength = m_chartspaces.chart.bottom - m_chartspaces.chart.top;
592
677
  _this.scaleinfoY2.lineLength = _this.scaleinfoY.lineLength;
593
678
  var numticks = _this.scaleinfoY.lineLength / (getFontSize(m_yLegendCss) * 4);
594
679
  if (numticks > 8) numticks = 8; // limit to 8 items on Y legend ( this is not an absolut count, since we calculate nice legend numbers
@@ -597,12 +682,13 @@ function Milli_Chart(settings) {
597
682
  _this.scaleinfoY.decimals = _this.scaleinfoY.decimals > 4 ? 4 : _this.scaleinfoY.decimals;
598
683
  _this.scaleinfoY.decimals = _this.scaleinfoY.decimals < 2 ? 2 : _this.scaleinfoY.decimals;
599
684
  var label = formatNiceNumber(_this.scaleinfoY.highValue, _this.settings.thousandseparator, _this.settings.decimalseparator, _this.scaleinfoY.decimals);
600
- // console.log('SCALE', _this.scaleinfoY);
601
685
  if (m_yLegendCss.float != 'right') {
602
- 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å?
686
+ 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å?
687
+ m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
603
688
  } else {
604
689
  if (m_yLegendCss['text-align'] == 'right') {
605
- 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å?
690
+ 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å?
691
+ m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
606
692
  }
607
693
  // TODO: kolla setting om den skall vara "i diagrammet"
608
694
  }
@@ -614,55 +700,48 @@ function Milli_Chart(settings) {
614
700
  _this.scaleinfoY2.decimals = _this.scaleinfoY2.decimals < 0 ? 0 : _this.scaleinfoY2.decimals;
615
701
 
616
702
  label = formatNiceNumber(_this.scaleinfoY2.highValue, _this.settings.thousandseparator, _this.settings.decimalseparator, _this.scaleinfoY2.decimals) + ' %';
617
- if (m_y2LegendCss.float != 'right')
618
- 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å?
619
- else {
703
+ if (m_y2LegendCss.float != 'right') {
704
+ 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å?
705
+ m_chartspaces.lowerChart.left = m_chartspaces.chart.left
706
+ } else {
620
707
  // kolla setting om den skall vara "i diagrammet"
621
- 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å?
708
+ 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å?
709
+ m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
622
710
  }
623
711
  }
624
- // console.log(m_chartCss['margin-left']);
625
712
  if (m_yLegendCss.float != 'right' && _this.settings.drawyaxis) {
626
713
  m_ctx.save();
627
714
  m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
628
- 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;
715
+ 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;
629
716
  m_ctx.restore();
630
717
  }
631
- // console.log('drawYXis 1');
632
-
633
- //if (_this.settings.drawyaxis == true) { // draw left y legend line
634
718
  m_ctx.beginPath();
635
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']) + 0.5, parseInt(m_chartCss['margin-top']));
636
- m_ctx.lineTo(parseInt(m_chartCss['margin-left']) + 0.5, m_canvas.height - parseInt(m_chartCss['margin-bottom']));
719
+ m_ctx.moveTo(m_chartspaces.chart.left + 0.5, m_chartspaces.chart.top);
720
+ m_ctx.lineTo(m_chartspaces.chart.left + 0.5, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']));
637
721
  m_ctx.stroke();
638
722
  m_ctx.closePath();
639
- //}
640
- // console.log('drawYXis 2');
723
+
641
724
  var x;
642
725
  if (m_yLegendCss.float == 'right') {
643
726
  if (m_yLegendCss['text-align'] == 'right')
644
- x = m_canvas.width - parseInt(m_chartCss['margin-right']);
727
+ x = m_chartspaces.chart.right;
645
728
  else
646
- x = m_canvas.width - parseInt(m_chartCss['margin-right']) + 3;
729
+ x = m_chartspaces.chart.right + 3;
647
730
  } else {
648
- x = parseInt(m_chartCss['margin-left']) - 3;
731
+ x = m_chartspaces.chart.left - 3;
649
732
  }
650
- // console.log('drawYXis 3');
651
733
 
652
734
  m_ctx.textAlign = 'right';
653
- //if (_this.settings.drawyaxis) {
654
735
  if (m_yLegendCss['text-align'] == 'right') {
655
736
  m_ctx.textAlign = 'left';
656
737
  drawYLegend(_this.scaleinfoY, x, 'right', _this.settings.gridHorizontalLines, 1);
657
738
  } else
658
739
  drawYLegend(_this.scaleinfoY, x, 'left', _this.settings.gridHorizontalLines, 1);
659
- //}
660
- // console.log('drawYXis 4');
661
740
 
662
741
  if (_this.settings.drawy2axis) {
663
742
  x = 0;
664
743
  if (m_y2LegendCss.float == 'right') {
665
- x = m_canvas.width - parseInt(m_chartCss['margin-right']) - 3;
744
+ x = m_chartspaces.chart.right - 3;
666
745
  m_ctx.textAlign = 'left';
667
746
  }
668
747
  drawYLegend(_this.scaleinfoY2, x, 'right', _this.settings.gridHorizontalLines2, 2);
@@ -676,7 +755,7 @@ function Milli_Chart(settings) {
676
755
  m_ctx.save();
677
756
  m_ctx.strokeStyle = m_gridHorizontalCss.color;
678
757
  if (_this.settings.gridVerticalLines > 0) {
679
- if (_this.settings.drawy2axis == false || p.x != parseInt(m_chartCss['margin-left'])) {
758
+ if (_this.settings.drawy2axis == false || p.x != m_chartspaces.chart.left) {
680
759
  if (_this.settings.gridHorizontalLinesStyle == 'dash') {
681
760
  m_ctx.setLineDash([3, 3]);
682
761
  }
@@ -684,7 +763,7 @@ function Milli_Chart(settings) {
684
763
 
685
764
  m_ctx.beginPath();
686
765
  m_ctx.moveTo(p.x + 0.5, p.y + 3);
687
- m_ctx.lineTo(p.x + 0.5, parseInt(m_chartCss['margin-top']));
766
+ m_ctx.lineTo(p.x + 0.5, m_chartspaces.chart.top);
688
767
  m_ctx.stroke();
689
768
  m_ctx.closePath();
690
769
  } else if (_this.settings.drawxaxis == 0) {
@@ -710,7 +789,7 @@ function Milli_Chart(settings) {
710
789
  _this.scaleinfoX.startDate = new Date(starttime);
711
790
  _this.scaleinfoX.endDate = new Date(endtime);
712
791
  _this.scaleinfoX.days = getNumberOfDays(starttime, endtime);
713
- _this.scaleinfoX.lineLength = m_canvas.width - parseInt(m_chartCss['margin-right']) - parseInt(m_chartCss['margin-left']);
792
+ _this.scaleinfoX.lineLength = m_chartspaces.chart.right - m_chartspaces.chart.left;
714
793
  var datesize = new Date('2888-12-28'); // bredaste datum jag kan komma på
715
794
  //_this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
716
795
  _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, formatDate(datesize, _this.settings.dateformat)) * 2; // kolla rätt format en 8a för varje tecken
@@ -749,15 +828,13 @@ function Milli_Chart(settings) {
749
828
  if (xx >= x) return timestamp;
750
829
  timestamp += 86400000;
751
830
  }
752
- //var timestamp = (x - Math.round(parseInt(m_chartCss['margin-left'] + offset)) * _this.scaleinfoX.timePerPixel) - _this.scaleinfoX.startDate.getTime();
753
-
754
831
  return 0;
755
832
  }
756
833
 
757
834
  function getXPosition(timestamp) {
758
835
  var offset = (timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / (86400000 * 7); // veckor
759
836
  offset = offset * 86400000 * 2 / _this.scaleinfoX.timePerPixel;
760
- return Math.round(parseInt(m_chartCss['margin-left']) + ((timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
837
+ return Math.round(m_chartspaces.chart.left + ((timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
761
838
  }
762
839
 
763
840
  function drawXAxisYears(starttime, endtime) {
@@ -770,8 +847,8 @@ function Milli_Chart(settings) {
770
847
  calcXScale(starttime, endtime);
771
848
  if (_this.settings.drawxaxis != 0) {
772
849
  m_ctx.beginPath();
773
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
774
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
850
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
851
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
775
852
  m_ctx.stroke();
776
853
  m_ctx.closePath();
777
854
  }
@@ -789,20 +866,23 @@ function Milli_Chart(settings) {
789
866
  }
790
867
  }
791
868
  if (draw) {
792
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
869
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
870
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
793
871
  text = year;
794
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - m_ctx.measureText(text).width) { // not to far right?
872
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - m_ctx.measureText(text).width) { // not to far right?
795
873
  if (_this.settings.yearLabelsPos == 'top') {
796
874
  m_ctx.save(); // flip and write new years on top
797
875
  var fontMetrix = m_ctx.measureText(text);
798
876
  x = x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
799
- var y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
877
+ var y = m_chartspaces.chart.top; // + m_ctx.measureText(datum).width;
800
878
  m_ctx.translate(x, y);
801
879
  m_ctx.rotate(90 * Math.PI / 180);
802
880
  m_ctx.fillText(text, 0, 0);
803
881
  m_ctx.restore();
804
- } else
805
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
882
+ } else {
883
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
884
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
885
+ }
806
886
  }
807
887
  numItems++;
808
888
  legendItems.push({ text: year.toString(), timestamp: new Date(year + '-01-01T00:00:00Z'), 'x': x });
@@ -825,10 +905,12 @@ function Milli_Chart(settings) {
825
905
  }
826
906
  }
827
907
  if (draw) {
828
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
908
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
909
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
829
910
  text = formatDate(year.getFullYear() + '-07-01', _this.settings.dateformat);
830
911
  // ingen if som på year???
831
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
912
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
913
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
832
914
  numItems++;
833
915
  legendItems.push({ 'text': text, timestamp: new Date(year + '-07-01T00:00:00Z'), 'x': x });
834
916
  }
@@ -853,9 +935,11 @@ function Milli_Chart(settings) {
853
935
  }
854
936
  if (dontPrint) break;
855
937
  if (draw) {
856
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
938
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
939
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
857
940
  text = formatDate(year.getFullYear() + '-' + (year.getMonth() + 1) + '-01', _this.settings.dateformat);
858
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
941
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
942
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.height - parseInt(m_chartCss['margin-bottom']) + 10);
859
943
  }
860
944
  legendItems.push({ 'text': text, timestamp: new Date(year + '-04-01T00:00:00Z'), 'x': x });
861
945
  year = new Date((year.getFullYear() + 1) + '-04-01T00:00:00Z');
@@ -874,9 +958,11 @@ function Milli_Chart(settings) {
874
958
  }
875
959
  }
876
960
  if (draw) {
877
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
961
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
962
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
878
963
  text = formatDate(year.getFullYear() + '-' + (year.getMonth() + 1) + '-01', _this.settings.dateformat);
879
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
964
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
965
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
880
966
  }
881
967
  legendItems.push({ 'text': text, timestamp: new Date(year + '-10-01T00:00:00Z'), 'x': x });
882
968
  year = new Date((year.getFullYear() + 1) + '-10-01T00:00:00Z');
@@ -897,8 +983,8 @@ function Milli_Chart(settings) {
897
983
  calcXScale(starttime, endtime);
898
984
  if (_this.settings.drawxaxis != 0) { // draw line
899
985
  m_ctx.beginPath();
900
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
901
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
986
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
987
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
902
988
  m_ctx.stroke();
903
989
  m_ctx.closePath();
904
990
  }
@@ -914,8 +1000,8 @@ function Milli_Chart(settings) {
914
1000
  currentDate = new Date(currentDate.getTime() + 86400000);
915
1001
  offset += 86400000 / _this.scaleinfoX.timePerPixel;
916
1002
  }
917
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
918
- if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
1003
+ x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1004
+ if (lastx == 0 && m_chartspaces.chart.left > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
919
1005
  currentDate = new Date(currentDate.getTime() + 86400000);
920
1006
  continue;
921
1007
  }
@@ -926,106 +1012,33 @@ function Milli_Chart(settings) {
926
1012
  if (draw) {
927
1013
  lastx = x;
928
1014
  var text = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
929
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
930
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
931
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1015
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxDateWidth()) { // not to far right?
1016
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1017
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
1018
+ }
1019
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1020
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
932
1021
  }
933
1022
  currentDate = new Date(currentDate.getTime() + 86400000);
934
1023
  }
935
1024
  // vad är detta?
936
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
937
- var boxshadow = m_chartCss['box-shadow'].split(' ');
938
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1025
+ if (typeof m_chartCss.boxShadow !== 'undefined') {
1026
+ var boxshadow = m_chartCss.boxShadow.split(' ');
1027
+ //if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1028
+ if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) }, false);
939
1029
 
940
- } else
941
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
942
- m_ctx.restore();
943
- }
944
-
945
- function drawXAxisMonth2(starttime, endtime) {
946
- // month axis
947
- starttime -= starttime % 8640000;
948
- endtime -= starttime % 8640000;
949
- m_ctx.save();
950
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
951
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
952
- m_ctx.fillStyle = m_xLegendCss.color;
953
- m_ctx.textAlign = "left";
954
-
955
- calcXScale(starttime, endtime);
956
- if (_this.settings.drawxaxis != 0) { // draw line
957
- m_ctx.beginPath();
958
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
959
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
960
- m_ctx.stroke();
961
- m_ctx.closePath();
962
- }
963
- var currentDate = new Date(starttime);
964
- var lastDate = new Date(starttime);
965
- var endDate = new Date(endtime);
966
- var p = { x: 0, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) };
967
- var offset = 0; // timeoffset for closed hours,and weekends
968
- var last = 0;
969
- var olddate = '';
970
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) { // oklart om det skall vara så här 2021-06-01
971
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
972
- currentDate = new Date(currentDate.getTime() + 86400000);
973
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
974
- }
975
- p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
976
- var datum;
977
- var dash = false;
978
- datum = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
979
- offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate); // varför?
980
- currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
981
- if (parseInt(m_chartCss['margin-left']) + (getMaxDateWidth() / 2) > (p.x - (getMaxDateWidth()))) {
982
- continue;
983
- }
984
-
985
- lastDate = new Date(currentDate);
986
- lastDate.setHours(endDate.getHours());
987
- lastDate.setMinutes(endDate.getMinutes());
988
- lastDate.setSeconds(endDate.getSeconds());
989
- var printLegendItem = true;
990
-
991
- if (p.x != parseInt(m_chartCss['margin-left']) && p.x - last < (Math.floor(_this.scaleinfoX.itemwidth))) {
992
- printLegendItem = false;
993
- }
994
- if (printLegendItem) {
995
- if (olddate != datum) {
996
- last = p.x;
997
- if (_this.scaleinfoX.lineLength > (p.x - (m_ctx.measureText(datum).width / 2) + m_ctx.measureText(datum).width / 2))
998
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
999
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1000
- olddate = datum;
1001
- }
1002
- }
1030
+ } else {
1031
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1032
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) }, false);
1003
1033
  }
1004
- // print end x legend if not to close to last
1005
- /*if (_this.scaleinfoY.type == 'history') {
1006
- p.x = parseInt(m_chartCss['margin-left']) + _this.scaleinfoX.lineLength; // - (getStringWidth(m_ctx, 'HH:MM'));
1007
- if (p.x - last > (Math.floor(_this.scaleinfoX.itemwidth))) {
1008
- var datum = formatDate(_this.scaleinfoX.endDate, _this.settings.dateformat);
1009
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1010
- }
1011
- }*/
1012
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1013
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1014
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines(p, false);
1015
-
1016
- } else
1017
- drawXAxisGridlines(p, false);
1018
1034
  m_ctx.restore();
1019
- return;
1020
-
1021
-
1022
1035
  }
1023
1036
 
1024
1037
  function calcXScaleTick(starttime, endtime) {
1025
1038
  _this.scaleinfoX.startDate = new Date(starttime);
1026
1039
  _this.scaleinfoX.endDate = new Date(endtime);
1027
1040
  _this.scaleinfoX.days = getNumberOfDays(starttime, endtime); // kan vi nog skita i
1028
- _this.scaleinfoX.lineLength = m_canvas.width - parseInt(m_chartCss['margin-right']) - parseInt(m_chartCss['margin-left']); // daybreaks can have 88/88
1041
+ _this.scaleinfoX.lineLength = m_chartspaces.chart.right - m_chartspaces.chart.left; // daybreaks can have 88/88
1029
1042
  _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
1030
1043
  var maxLegendItems = Math.floor(_this.scaleinfoX.lineLength / (_this.scaleinfoX.itemwidth * 2));
1031
1044
 
@@ -1111,11 +1124,33 @@ function Milli_Chart(settings) {
1111
1124
  }
1112
1125
 
1113
1126
  function calcTimeSpanInDays(startdate, enddate) {
1114
- console.log(startdate, enddate)
1115
1127
  var s = Math.ceil(startdate / 86400000) * 86400000;
1116
1128
  var e = Math.ceil(enddate / 86400000) * 86400000;
1117
- console.log(e - s / 86400000);
1129
+ var days = 1;
1130
+ for (s; s < e; s += 86400000) {
1131
+ var d = new Date(s);
1132
+ if (d.getDay() != 0 && d.getDay() != 6)
1133
+ days++;
1134
+ }
1135
+ return Math.min(days, 5);
1136
+ // Dra av helgen om det är någon där
1137
+ return Math.min(((e - s) / 86400000 + 1), 5);
1138
+ }
1118
1139
 
1140
+ function drawXAxisTickLowerChart() {
1141
+ m_ctx.save();
1142
+ m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1143
+
1144
+ m_ctx.strokeStyle = m_gridHorizontalCss.color;
1145
+ m_ctx.fillStyle = m_xLegendCss.color;
1146
+ if (_this.settings.drawxaxis != 0) { // draw line for legend
1147
+ m_ctx.beginPath();
1148
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.lowerChart.bottom + 0.5);
1149
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.lowerChart.bottom + 0.5);
1150
+ m_ctx.stroke();
1151
+ m_ctx.closePath();
1152
+ }
1153
+ m_ctx.restore();
1119
1154
  }
1120
1155
 
1121
1156
  function drawXAxisTick(starttime, endtime) {
@@ -1128,84 +1163,114 @@ function Milli_Chart(settings) {
1128
1163
  calcXScaleTick(starttime, endtime);
1129
1164
  if (_this.settings.drawxaxis != 0) { // draw line for legend
1130
1165
  m_ctx.beginPath();
1131
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1132
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1166
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.bottom + 0.5);
1167
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.bottom + 0.5);
1133
1168
  m_ctx.stroke();
1134
1169
  m_ctx.closePath();
1135
1170
  }
1136
- // if(startime.date == endtime.date && starttime > open || endtime < close ) // no date
1137
-
1138
1171
  var currentDate = new Date(starttime);
1139
- console.log('startdate', currentDate);
1140
1172
  var x;
1141
1173
  var lastx = 0;
1142
1174
  var draw = true;
1143
1175
  var offset = 0;
1144
1176
  var legendItems = [];
1145
- // add days (daychanges)
1146
- //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1177
+ var openhour = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z')).getTime() % 86400000;
1178
+ // add daysstarts
1147
1179
  if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
1148
1180
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1149
- console.log(currentDate);
1150
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1151
- draw = true;
1152
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1153
- currentDate = new Date(currentDate.getTime() + 86400000);
1154
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1155
- }
1156
- //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1157
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1158
- if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1159
- draw = false;
1160
- }
1161
- if (draw) {
1162
- lastx = x;
1163
- x += 0.5;
1164
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1165
- // if day change and setting print on top as well
1166
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1167
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1168
- legendItems.push({ x: x, type: 0, text: text });
1181
+
1182
+ var firstDate = new Date(currentDate);
1183
+ var days = calcTimeSpanInDays(starttime, endtime);
1184
+ if (m_zoom.mouseup.timestamp == null || (m_zoom.mouseup.timestamp != null && days > 1)) {
1185
+ while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1186
+ draw = true;
1187
+ while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1188
+ currentDate = new Date(currentDate.getTime() + 86400000);
1189
+ offset += 86400000 / _this.scaleinfoX.timePerPixel;
1169
1190
  }
1170
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
1191
+ x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1192
+ if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1193
+ draw = false;
1194
+ } else
1195
+ if (m_zoom.mouseup.timestamp != null && firstDate.getTime() === currentDate.getTime())
1196
+ draw = false;
1197
+ if (draw) {
1198
+ lastx = x + 0.5;
1199
+ var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1200
+ // if day change and setting print on top as well
1201
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxTimeWidth()) { // not to far right?
1202
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
1203
+ legendItems.push({ x: x, type: 0, text: text });
1204
+ }
1205
+ if (x != m_chartspaces.chart.left + 0.5) { // do not draw the first line, it is already drawn
1206
+ if (openhour == currentDate.getTime() % 86400000) {
1207
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, true); // dash?
1208
+ } else {
1209
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false); // dash?
1210
+ }
1211
+ }
1212
+ }
1213
+ // Move to next day and set starting hour correct if we have open at half hour
1214
+ currentDate = new Date(currentDate.getTime() + 86400000);
1215
+ currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1216
+ if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
1217
+ currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1218
+ offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1171
1219
  }
1172
- currentDate = new Date(currentDate.getTime() + 86400000);
1173
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1174
- //offset += (86400000 - _this.scaleinfoX.milliPerDay);
1175
1220
  }
1221
+ // add timestamps
1176
1222
  var currentDate = new Date(starttime);
1177
- console.log(currentDate);
1178
- //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1179
1223
  if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
1180
1224
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1181
- console.log(currentDate);
1182
1225
 
1183
1226
  var maxHourLegends;
1184
- console.log(legendItems);
1185
1227
  if (legendItems.length == 0)
1186
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1187
- else
1188
- if (legendItems.length == 1)
1189
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1228
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - m_chartspaces.chart.left - getMaxTimeWidth()) / (getMaxTimeWidth() * 3)); // varför tar vi bort margin???
1190
1229
  else
1191
- maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1192
- var tickSize;
1193
- calcTimeSpanInDays(starttime, endtime);
1194
-
1195
- //if (m_zoom.isZooming) {
1196
- console.log(starttime, endtime);
1197
- tickSize = new Date(endtime - starttime);
1198
- console.log(tickSize.getTime());
1199
- //} else
1200
- // 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'));
1230
+ if (legendItems.length == 1) {
1231
+ if (m_zoom.mouseup.timestamp && days == 2) {
1232
+ // ta den största delen av linjen och mät på
1233
+ if (_this.scaleinfoX.lineLength / 2 < legendItems[0].x + m_chartspaces.chart.left)
1234
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - (_this.scaleinfoX.lineLength - legendItems[0].x) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1235
+ else
1236
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1237
+ } else
1238
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1239
+ } else {
1240
+ maxHourLegends = Math.floor((legendItems[legendItems.length - 1].x - legendItems[legendItems.length - 2].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3)); // calculate with the last days length
1241
+ }
1242
+
1243
+ var tickSize; // per day
1244
+ if (days == 1) {
1245
+ // use start and endtime as ticksize
1246
+ tickSize = new Date(endtime - starttime);
1247
+ } else if (m_zoom.mouseup.timestamp && days == 2) { // zoom with more than 2 days
1248
+ // use the day with most time as tickSize
1249
+ var tmpDate = new Date(starttime);
1250
+ tickSize = new Date(new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(starttime)).getTime();
1251
+ var firstDay = tickSize;
1252
+ tmpDate = new Date(endtime);
1253
+ var secondDay = new Date(endtime - new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z').getTime()).getTime();
1254
+ tickSize += new Date(endtime - new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z').getTime()).getTime();
1255
+ tickSize = new Date(Math.max(firstDay, secondDay));
1256
+ } else {
1257
+ // use full day as tickSize
1258
+ 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'));
1259
+ }
1201
1260
  var interval;
1202
1261
  var modularvalue = 3600000;
1203
- if (tickSize.getTime() < 3600000) {
1262
+
1263
+ // calc the ticksize to add to time(interval) when drawing and the modulu value
1264
+ if (tickSize.getTime() < 1800000) {
1265
+ tickSize = tickSize.getTime() / 60000;
1266
+ interval = Math.floor(tickSize / (maxHourLegends + 1)) * 60000;
1267
+ if (interval < 60000) interval = 60000;
1268
+ modularvalue = 60000;
1269
+ } else if (tickSize.getTime() < 3600000) {
1204
1270
  tickSize = tickSize.getTime() / 300000;
1205
1271
  interval = Math.floor(tickSize / (maxHourLegends + 1)) * 300000;
1206
1272
  modularvalue = 300000;
1207
- } else
1208
- if (tickSize.getTime() < 7200000 * 3) {
1273
+ } else if (tickSize.getTime() < 7200000 * 3) {
1209
1274
  tickSize = tickSize.getTime() / 600000;
1210
1275
  interval = Math.floor(tickSize / (maxHourLegends + 1)) * 600000;
1211
1276
  modularvalue = 600000;
@@ -1214,8 +1279,8 @@ function Milli_Chart(settings) {
1214
1279
  interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
1215
1280
  }
1216
1281
  if (interval == 0) interval = 300000;
1217
-
1218
- console.log('MAX', maxHourLegends, tickSize, interval);
1282
+ if (interval % 60000 != 0)
1283
+ interval = (interval - interval % 60000) + 60000; // remove sekunder
1219
1284
  // print other times
1220
1285
  offset = 0;
1221
1286
  lastx = 0;
@@ -1225,29 +1290,26 @@ function Milli_Chart(settings) {
1225
1290
  if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
1226
1291
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
1227
1292
 
1228
- console.log('workdate', workDate);
1229
1293
  var count = 0;
1230
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1231
- console.log('workdate', workDate);
1232
- if (count++ > 30) break;
1294
+ while (currentDate.getTime() <= _this.scaleinfoX.endTimeStamp) {
1295
+ if (count++ > 100) {
1296
+ break; // just make sure we dont do an infinity loop
1297
+
1298
+ }
1233
1299
  draw = true;
1234
1300
  while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1235
- console.log('Helg', currentDate);
1236
1301
  closeTime = new Date(closeTime.getTime() + 86400000);
1237
1302
  currentDate = new Date(currentDate.getTime() + 86400000);
1238
- //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1239
1303
  if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
1240
1304
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
1241
1305
  var workDate = new Date(workDate.getTime() + 86400000);
1242
1306
  offset += 86400000 / _this.scaleinfoX.timePerPixel;
1243
1307
  }
1244
- console.log(currentDate, closeTime);
1245
1308
  if (currentDate.getTime() > closeTime.getTime()) {
1246
1309
  // draw DayEnd(start) dash line
1247
- /*var dayStart = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z')
1248
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((dayStart.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1249
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, true); // dash?*/
1250
-
1310
+ var dayStart = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z')
1311
+ x = Math.round(m_chartspaces.chart.left + ((dayStart.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1312
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, true); // dash?
1251
1313
 
1252
1314
  closeTime = new Date(closeTime.getTime() + 86400000);
1253
1315
  workDate = new Date(workDate.getTime() + 86400000);
@@ -1255,11 +1317,9 @@ function Milli_Chart(settings) {
1255
1317
  if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
1256
1318
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
1257
1319
  offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1258
- console.log('CLOSED', currentDate, closeTime);
1259
1320
  continue;
1260
1321
  }
1261
- console.log(currentDate, closeTime);
1262
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1322
+ x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1263
1323
  for (var i = 0; i < legendItems.length; i++) {
1264
1324
  if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
1265
1325
  draw = false;
@@ -1269,413 +1329,37 @@ function Milli_Chart(settings) {
1269
1329
  draw = false;
1270
1330
  break;
1271
1331
  }
1272
- }
1273
- console.log(x, lastx, offset);
1274
- if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1275
- //draw = false;
1276
- //console.log('false');
1277
- }
1278
- if (draw) {
1279
- lastx = x;
1280
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1281
- // if day change and setting print on top as well
1282
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1283
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1284
- legendItems.push({ x: x, type: 0 });
1285
- }
1286
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1287
- }
1288
- currentDate = new Date(currentDate.getTime() + interval);
1289
- //currentDate = new Date(currentDate.getTime() + 3600000);
1290
- }
1291
-
1292
- // vad är detta?
1293
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1294
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1295
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1296
-
1297
- } else
1298
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1299
- m_ctx.restore();
1300
-
1301
- }
1302
-
1303
- function drawXAxisTickBra(starttime, endtime) {
1304
- m_ctx.save();
1305
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1306
-
1307
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1308
- m_ctx.fillStyle = m_xLegendCss.color;
1309
- m_ctx.textAlign = "left";
1310
- calcXScaleTick(starttime, endtime);
1311
- if (_this.settings.drawxaxis != 0) { // draw line for legend
1312
- m_ctx.beginPath();
1313
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1314
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1315
- m_ctx.stroke();
1316
- m_ctx.closePath();
1317
- }
1318
- // if(startime.date == endtime.date && starttime > open || endtime < close ) // no date
1319
-
1320
- var currentDate = new Date(starttime);
1321
- console.log('startdate', currentDate);
1322
- var x;
1323
- var lastx = 0;
1324
- var draw = true;
1325
- var offset = 0;
1326
- var legendItems = [];
1327
- // add days (daychanges)
1328
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1329
- console.log(currentDate);
1330
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1331
- draw = true;
1332
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1333
- // console.log('Helg', currentDate);
1334
- currentDate = new Date(currentDate.getTime() + 86400000);
1335
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1336
- }
1337
- //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1338
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1339
- if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1340
- draw = false;
1341
- }
1342
- if (draw) {
1343
- lastx = x;
1344
- x += 0.5;
1345
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1346
- // if day change and setting print on top as well
1347
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1348
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1349
- legendItems.push({ x: x, type: 0, text: text });
1350
- }
1351
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
1352
- }
1353
- currentDate = new Date(currentDate.getTime() + 86400000);
1354
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1355
- }
1356
- var currentDate = new Date(starttime);
1357
- console.log(currentDate);
1358
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1359
-
1360
- var maxHourLegends;
1361
- console.log(legendItems);
1362
- if (legendItems.length == 0)
1363
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1364
- else
1365
- if (legendItems.length == 1)
1366
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1367
- else
1368
- maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1369
- 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'));
1370
- var tickSize = tickSize.getTime() / 3600000;
1371
- var interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
1372
-
1373
- // print other times
1374
- offset = 0;
1375
- lastx = 0;
1376
- var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1377
- var workDate = new Date(currentDate);
1378
- console.log('workdate', workDate);
1379
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1380
- console.log('workdate', workDate);
1381
- draw = true;
1382
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1383
- console.log('Helg', currentDate);
1384
- closeTime = new Date(closeTime.getTime() + 86400000);
1385
- currentDate = new Date(currentDate.getTime() + 86400000);
1386
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1387
- var workDate = new Date(workDate.getTime() + 86400000);
1388
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1389
- }
1390
- console.log(currentDate, closeTime);
1391
- if (currentDate.getTime() > closeTime.getTime()) {
1392
- closeTime = new Date(closeTime.getTime() + 86400000);
1393
- workDate = new Date(workDate.getTime() + 86400000);
1394
- currentDate = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1395
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1396
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1397
- console.log('CLOSED', currentDate, closeTime);
1398
- continue;
1399
- }
1400
- console.log(currentDate, closeTime);
1401
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1402
- for (var i = 0; i < legendItems.length; i++) {
1403
- console.log('loop', x, legendItems[i].x);
1404
- if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
1405
- draw = false;
1406
- console.log('False1');
1407
- break;
1408
- }
1409
- if (x > legendItems[i].x && legendItems[i].x + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1332
+ if (x == legendItems[i].x) {
1410
1333
  draw = false;
1411
- console.log('False2');
1412
1334
  break;
1413
1335
  }
1414
1336
  }
1415
- console.log(x, lastx, offset);
1416
1337
  if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1417
1338
  //draw = false;
1418
- console.log('false');
1339
+ //console.log('false');
1419
1340
  }
1341
+ var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1420
1342
  if (draw) {
1421
1343
  lastx = x;
1422
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1423
1344
  // if day change and setting print on top as well
1424
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1425
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1345
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxTimeWidth()) { // not to far right?
1346
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
1426
1347
  legendItems.push({ x: x, type: 0 });
1427
1348
  }
1428
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1349
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
1429
1350
  }
1430
1351
  currentDate = new Date(currentDate.getTime() + interval);
1431
- //currentDate = new Date(currentDate.getTime() + 3600000);
1432
1352
  }
1433
1353
 
1434
1354
  // vad är detta?
1435
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1436
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1437
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1438
-
1439
- } else
1440
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1441
- m_ctx.restore();
1442
-
1443
- }
1444
-
1445
- function drawXAxisTickTest(starttime, endtime) {
1446
- m_ctx.save();
1447
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1448
-
1449
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1450
- m_ctx.fillStyle = m_xLegendCss.color;
1451
- m_ctx.textAlign = "left";
1452
- calcXScaleTick(starttime, endtime);
1453
- if (_this.settings.drawxaxis != 0) { // draw line for legend
1454
- m_ctx.beginPath();
1455
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1456
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1457
- m_ctx.stroke();
1458
- m_ctx.closePath();
1459
- }
1460
- // if(startime.date == endtime.date && starttime > open || endtime < close ) // no date
1461
-
1462
- var currentDate = new Date(starttime);
1463
- console.log('startdate', currentDate);
1464
- var x;
1465
- var lastx = 0;
1466
- var draw = true;
1467
- var offset = 0;
1468
- var legendItems = [];
1469
- // add days (daychanges)
1470
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1471
- draw = true;
1472
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1473
- console.log('Helg', currentDate);
1474
- currentDate = new Date(currentDate.getTime() + 86400000);
1475
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1476
- }
1477
- var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1478
- if (currentDate.getTime() > closeTime.getTime()) {
1479
- currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1480
- currentDate = new Date(currentDate.getTime() + 86400000);
1481
- // offset += 86400000 / _this.scaleinfoX.timePerPixel;
1482
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1483
- console.log('STÄNGT', currentDate);
1484
- continue;
1485
- }
1486
- console.log(currentDate);
1487
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1488
- /*if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxTimeWidth() / 2))) { // do not print left of y legend
1489
- console.log('ftst', currentDate);
1490
- currentDate = new Date(currentDate.getTime() + 86400000);
1491
- continue;
1492
- }*/
1493
- console.log(x, lastx, offset);
1494
- if (lastx + (getMaxDateWidth() / 2) > (x - getMaxDateWidth())) {
1495
- draw = false;
1496
- console.log('false');
1497
- }
1498
- if (draw) {
1499
- lastx = x;
1500
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1501
- // if day change and setting print on top as well
1502
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
1503
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1504
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1505
- }
1506
- //currentDate = new Date(currentDate.getTime() + 86400000);
1507
- currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
1508
- }
1509
- // vad är detta?
1510
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1511
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1512
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1513
-
1514
- } else
1515
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1516
- m_ctx.restore();
1517
-
1518
- }
1519
-
1520
- function drawXAxisTick2(starttime, endtime) {
1521
- // day and month axis
1522
- m_ctx.save();
1523
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1355
+ if (typeof m_chartCss.boxShadow !== 'undefined') {
1356
+ var boxshadow = m_chartCss.boxShadow.split(' ');
1357
+ if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
1524
1358
 
1525
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1526
- m_ctx.fillStyle = m_xLegendCss.color;
1527
- m_ctx.textAlign = "left";
1528
- calcXScaleTick(starttime, endtime);
1529
- if (_this.settings.drawxaxis != 0) { // draw line for legend
1530
- m_ctx.beginPath();
1531
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1532
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1533
- m_ctx.stroke();
1534
- m_ctx.closePath();
1535
- }
1536
- var currentDate = new Date(starttime);
1537
- lastDate = new Date(new Date(starttime).toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1538
-
1539
- var p = { x: 0, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) };
1540
- var offset = 0; // timeoffset for closed hours,and weekends
1541
- var oldx = 1;
1542
- var newday = true;
1543
- var last = 0;
1544
- var nextYear = currentDate.getFullYear() + 1;
1545
- var drawDate = currentDate;
1546
- var lastDrawX = -100;
1547
- var datum;
1548
- var date;
1549
- var y, x;
1550
- while (p.x < (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2))) { // && oldx != p.x) {
1551
- var dayChange = false;
1552
- if (currentDate.getTime() > endtime) {
1553
- break;
1554
- }
1555
- oldx = p.x;
1556
- p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1557
- var dash = false;
1558
- if (newday) {
1559
- //datum = currentDate.getDate() + '/' + (currentDate.getMonth() + 1); // format date
1560
- date = currentDate.getDate() + '/' + (currentDate.getMonth() + 1); // format date
1561
- dash = true;
1562
- dayChange = true;
1563
- }
1564
- //datum = currentDate.toTimeString().substring(0, 5); // Format time
1565
- _this.settings.timeformat = 'HH:mm'; // jonas får fixa
1566
- datum = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1567
- drawDate = currentDate;
1568
- newday = false;
1569
- currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
1570
- var printLegendItem = true;
1571
- var drawGridline = true;
1572
- 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
1573
- //console.log('hmm', currentDate, lastDate, _this.scaleinfoX.ticksize, newday);
1574
- currentDate = new Date((currentDate.getTime() + 86400000) - (currentDate.getTime() % 86400000));
1575
- currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1576
-
1577
- // next day att starttime
1578
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) {
1579
- currentDate = new Date(currentDate.getTime() + 86400000);
1580
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1581
- }
1582
- //console.log(currentDate, _this.scaleinfoX.endDate);
1583
- if (currentDate.getTime() > _this.scaleinfoX.endDate.getTime()) {
1584
- break;
1585
- }
1586
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1587
- lastDate = new Date(currentDate);
1588
- lastDate = new Date(lastDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1589
- newday = true;
1590
- }
1591
- var fontMetrix;
1592
- var nextx = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1593
- //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)
1594
- console.log(nextx, p.x, currentDate);
1595
- 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)
1596
- //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));
1597
- if (nextx < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 1)) { // is it too close to next?
1598
- //console.log('HIDE');
1599
- printLegendItem = false;
1600
- } else
1601
- if (p.x - lastDrawX < Math.floor(_this.scaleinfoX.itemwidth)) { // is it to close to previous?
1602
- // console.log('to close to previous',dash,datum);
1603
- printLegendItem = false;
1604
- }
1605
- if (dash) {
1606
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1607
- }
1608
- } else
1609
- if (p.x - lastDrawX < Math.floor(_this.scaleinfoX.itemwidth)) { // to close to previous?
1610
- //console.log('to close to previous',dash,datum);
1611
- printLegendItem = false;
1612
- if (dash) {
1613
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1614
- printLegendItem = true;
1615
- }
1616
- } else {
1617
- if (dash && _this.settings.intradaydates) { // lutande text
1618
- m_ctx.save();
1619
- fontMetrix = m_ctx.measureText(date);
1620
- x = p.x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
1621
- y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
1622
- m_ctx.translate(x, y);
1623
- m_ctx.rotate(90 * Math.PI / 180);
1624
- m_ctx.fillText(date, 0, 0);
1625
- m_ctx.restore();
1626
- }
1627
- if (drawGridline) {
1628
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1629
- drawGridline = false;
1630
- }
1631
- }
1632
- if (printLegendItem) {
1633
- last = p.x;
1634
- //console.log(newday,datum,dayChange);
1635
- if (dayChange) {
1636
- m_ctx.save();
1637
- fontMetrix = m_ctx.measureText(date);
1638
- x = p.x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
1639
- y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
1640
- m_ctx.translate(x, y);
1641
- m_ctx.rotate(90 * Math.PI / 180);
1642
- m_ctx.fillText(date, 0, 0);
1643
- m_ctx.restore();
1644
- //m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), parseInt(m_chartCss['margin-top']) + 5);
1645
- if (drawGridline) {
1646
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1647
- }
1648
- lastDrawX = p.x;
1649
- }
1650
- //else
1651
- if (p.x < m_canvas.width - m_ctx.measureText(datum).width) { // if text will be cropped do not print
1652
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1653
- if (drawGridline) {
1654
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1655
- }
1656
- lastDrawX = p.x;
1657
- } else {
1658
- //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);
1659
- }
1660
- }
1359
+ } else {
1360
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
1661
1361
  }
1662
- // print end x legend if not to close to last
1663
- /* p.x = parseInt(m_chartCss['margin-left']) + _this.scaleinfoX.lineLength; // - (getStringWidth(m_ctx, 'HH:MM'));
1664
- if (p.x - last > (Math.floor(_this.scaleinfoX.itemwidth))) {
1665
- var datum = _this.scaleinfoX.endDate.toTimeString().substring(0, 5);
1666
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1667
- }
1668
-
1669
- */
1670
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1671
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1672
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines(p, false);
1673
-
1674
- } //else
1675
- //drawXAxisGridlines(p, false);
1676
-
1677
1362
  m_ctx.restore();
1678
- return;
1679
1363
  }
1680
1364
 
1681
1365
  function onMouseOut(evt) {
@@ -1719,15 +1403,15 @@ function Milli_Chart(settings) {
1719
1403
  m_canvas.parentNode.appendChild(m_zoom.div);
1720
1404
  m_zoom.div.setAttribute('class', 'millistream-chart-zoombox');
1721
1405
  }
1722
- if (x < parseInt(m_chartCss['margin-left'])) x = parseInt(m_chartCss['margin-left']);
1723
- m_zoom.div.style.top = parseInt(m_chartCss['margin-top']) + 'px';
1406
+ if (x < m_chartspaces.chart.left) x = m_chartspaces.chart.left;
1407
+ m_zoom.div.style.top = m_chartspaces.chart.top + 'px';
1724
1408
  m_zoom.div.style.left = (m_zoom.mousedown.pos > x ? x : m_zoom.mousedown.pos) + 'px';
1725
- if (x > m_canvas.width - parseInt(m_chartCss['margin-right'])) x = m_canvas.width - parseInt(m_chartCss['margin-right']);
1726
- m_zoom.div.style.height = m_canvas.height - parseInt(m_chartCss['margin-bottom']) - parseInt(m_chartCss['margin-top']) + 'px';
1409
+ if (x > m_chartspaces.chart.right) x = m_chartspaces.chart.right;
1410
+ m_zoom.div.style.height = m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - m_chartspaces.chart.top + 'px';
1727
1411
  m_zoom.div.style.width = (m_zoom.mousedown.pos > x ? m_zoom.mousedown.pos - x : x - m_zoom.mousedown.pos) + 'px';
1728
1412
  }
1729
1413
  if (_this.settings.enablehover == false) return;
1730
- 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'])) {
1414
+ 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'])) {
1731
1415
  onMouseOut();
1732
1416
  return;
1733
1417
  }
@@ -1941,42 +1625,22 @@ function Milli_Chart(settings) {
1941
1625
  }
1942
1626
  }
1943
1627
 
1944
- function checkTickChartData() {
1945
- var count = 0;
1946
- for (var i = 0; i < _this.instruments[0].trades.length; i++) {
1947
- if (_this.instruments[0].trades[i].timestamp > _this.scaleinfoX.startTimeStamp && _this.instruments[0].trades[i].timestamp < _this.scaleinfoX.endTimeStamp) {
1948
- if (count++ > 0) {
1949
- return true;
1950
- }
1951
- }
1952
- }
1953
- var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-top']);
1954
- var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-left']);
1955
- m_ctx.save();
1956
- m_ctx.font = 'bold ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1957
- m_ctx.font = 'bold 12px ' + m_xLegendCss['font-family'];
1958
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1959
- m_ctx.fillStyle = m_xLegendCss.color;
1960
- m_ctx.textAlign = "left";
1961
-
1962
- m_ctx.fillText(_this.settings.nochartlabel, x - (m_ctx.measureText(_this.settings.nochartlabel).width / 2), y);
1963
- m_ctx.restore();
1964
- return false;
1965
- }
1966
-
1967
1628
  function checkChartData(data) {
1968
1629
  // _this.instruments[0].history / _this.instruments[0].trades
1969
1630
  var count = 0;
1970
1631
  for (var i = 0; i < data.length; i++) {
1971
- if (data[i].timestamp > _this.scaleinfoX.startTimeStamp && data[i].timestamp < _this.scaleinfoX.endTimeStamp) {
1632
+ if (data[i].timestamp >= _this.scaleinfoX.startTimeStamp && data[i].timestamp <= _this.scaleinfoX.endTimeStamp) {
1972
1633
  //console.log(new Date(data[i].timestamp), new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.scaleinfoX.endTimeStamp), data[i]);
1973
1634
  if (count++ > 0) {
1974
1635
  return true;
1975
1636
  }
1976
1637
  }
1977
1638
  }
1978
- var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-top']);
1979
- var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-left']);
1639
+ console.log('NO data to draw on');
1640
+ // var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + m_chartspaces.chart.top;
1641
+ // var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + m_chartspaces.chart.left;
1642
+ var y = m_chartspaces.chart.bottom - m_chartspaces.chart.top / 2 + m_chartspaces.chart.top;
1643
+ var x = m_chartspaces.chart.right - m_chartspaces.chart.left / 2 + m_chartspaces.chart.left;
1980
1644
  m_ctx.save();
1981
1645
  m_ctx.font = 'bold ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1982
1646
  m_ctx.font = 'bold 12px ' + m_xLegendCss['font-family'];
@@ -1989,8 +1653,36 @@ function Milli_Chart(settings) {
1989
1653
  return false;
1990
1654
  }
1991
1655
 
1656
+ function calcChartSpaces() {
1657
+ m_chartspaces.chart.height = m_canvas.height * (m_chartspaces.chart.percent / 100);
1658
+ m_chartspaces.chart.top = parseInt(m_chartCss['margin-top']);
1659
+ m_chartspaces.chart.left = parseInt(m_chartCss['margin-left']);
1660
+ m_chartspaces.chart.right = m_canvas.width - parseInt(m_chartCss['margin-right']);
1661
+ m_chartspaces.chart.bottom = m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']);
1662
+ m_chartspaces.chart.width = m_canvas.width;
1663
+ m_chartspaces.lowerChart.height = m_canvas.height * (m_chartspaces.lowerChart.percent / 100);
1664
+ m_chartspaces.lowerChart.top = m_chartspaces.chart.bottom + parseInt(m_chartCss['margin-bottom']) + m_chartspaces.chart.top;
1665
+ m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
1666
+ m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
1667
+ //m_chartspaces.lowerChart.bottom =m_chartspaces.lowerChart.top +m_chartspaces.lowerChart.height - parseInt(m_chartCss['margin-bottom']);
1668
+ m_chartspaces.lowerChart.bottom = m_canvas.height - parseInt(m_chartCss['margin-bottom']);
1669
+ m_chartspaces.lowerChart.width = m_canvas.width;
1670
+ console.log(m_chartspaces);
1671
+ }
1672
+
1992
1673
  _this.drawChart = function() {
1674
+ if (m_lastDrawnInstrument != _this.instruments[0].insref) {
1675
+ m_zoom.mousedown.pos = 0;
1676
+ m_zoom.mousedown.i = 0;
1677
+ m_zoom.mousedown.timestamp = null;
1678
+ m_zoom.mouseup.timestamp = null;
1679
+ if (m_zoom.div) m_canvas.parentNode.removeChild(m_zoom.div);
1680
+ m_zoom.div = null;
1681
+ m_zoom.isZooming = false;
1682
+ }
1683
+ m_lastDrawnInstrument = _this.instruments[0].insref;
1993
1684
  if (m_ctx == null) return;
1685
+ //console.clear();
1994
1686
  m_datapoints = [];
1995
1687
  if (m_dataPoints.map) m_dataPoints.map.clear();
1996
1688
  m_dataPoints.map = new Map();
@@ -1999,6 +1691,8 @@ function Milli_Chart(settings) {
1999
1691
  console.log('no chartdata');
2000
1692
  return;
2001
1693
  }
1694
+ calcChartSpaces();
1695
+
2002
1696
  var period = _this.settings.chartlen.substring(_this.settings.chartlen.length - 1);
2003
1697
  var len = parseInt(_this.settings.chartlen.substring(0, _this.settings.chartlen.length - 1));
2004
1698
  m_ctx.clearRect(0, 0, m_canvas.width, m_canvas.height);
@@ -2013,11 +1707,8 @@ function Milli_Chart(settings) {
2013
1707
  _this.scaleinfoX.endTimeStamp = m_zoom.mouseup.timestamp > m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
2014
1708
  _this.scaleinfoX.startTimeStamp = m_zoom.mouseup.timestamp < m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
2015
1709
  } else {
2016
- //console.log('len', len);
2017
1710
  _this.scaleinfoX.startTimeStamp = getTickStartDate(len); // calc not to start with weekends
2018
1711
  // back up x days from quotedate if needed
2019
- //console.log(new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.instruments[0].quotedate));
2020
- //console.log(new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.instruments[0].quotedate - (86400000 * (len - 1))));
2021
1712
  // TODO if startTimeStamp < quotedate -len borde det vara
2022
1713
  var quoteDate = businessDaysSubtraction(_this.instruments[0].quotedate, len);
2023
1714
  if (_this.scaleinfoX.startTimeStamp - _this.scaleinfoX.startTimeStamp % 86400000 > quoteDate) { // if startdate > quotedate back startdate
@@ -2151,36 +1842,44 @@ function Milli_Chart(settings) {
2151
1842
  //plotChart(_this.instruments[0].history, null);
2152
1843
 
2153
1844
  }
2154
- drawBoxShadow(m_canvas, m_ctx);
2155
- if (m_modules.quantity) {
2156
- m_modules.quantity.redraw();
1845
+ drawBoxShadow(m_chartspaces.chart);
1846
+ if (m_chartspaces.chart.percent != 100) {
1847
+ drawXAxisTickLowerChart();
1848
+ drawYAxisLower();
1849
+ drawBoxShadow(m_chartspaces.lowerChart);
2157
1850
  }
2158
1851
  onMouseOut();
2159
1852
  };
2160
1853
 
2161
- function drawBoxShadow(canvas, ctx) {
2162
- if (typeof m_chartCss['box-shadow'] === 'undefined') return;
2163
- var boxshadow = m_chartCss['box-shadow'].split(' ');
2164
- ctx.save();
1854
+ function drawBoxShadow(space) {
1855
+ console.log(space);
1856
+ if (typeof m_chartCss.boxShadow === 'undefined') return;
1857
+ var boxShadow = m_chartCss.boxShadow;
1858
+ if (boxShadow.indexOf(')') != -1) {
1859
+ boxShadow = boxShadow.substring(boxShadow.indexOf(')') + 2);
1860
+ }
1861
+ var boxshadow = boxShadow.split(' ');
1862
+ m_ctx.save();
2165
1863
  if (parseInt(boxshadow[0]) > 0) {
2166
- ctx.beginPath();
2167
- ctx.strokeStyle = m_chartCss['border-top-color'];
2168
- ctx.lineWidth = parseInt(boxshadow[1]);
2169
- ctx.moveTo(parseInt(m_chartCss['margin-left']), parseInt(m_chartCss['margin-top']));
2170
- ctx.lineTo(canvas.width - parseInt(m_chartCss['margin-right']), parseInt(m_chartCss['margin-top']));
2171
- ctx.stroke();
2172
- ctx.closePath();
1864
+ m_ctx.beginPath();
1865
+ m_ctx.strokeStyle = m_chartCss['border-top-color'];
1866
+ m_ctx.lineWidth = parseInt(boxshadow[1]);
1867
+ m_ctx.moveTo(space.left, space.top);
1868
+ m_ctx.lineTo(space.right, space.top);
1869
+ m_ctx.stroke();
1870
+ m_ctx.closePath();
2173
1871
  }
2174
1872
  if (parseInt(boxshadow[1]) > 0) {
2175
- ctx.beginPath();
2176
- ctx.strokeStyle = m_chartCss['border-right-color'];
2177
- ctx.lineWidth = parseInt(boxshadow[1]);
2178
- ctx.moveTo(canvas.width - parseInt(m_chartCss['margin-right']), parseInt(m_chartCss['margin-top']) + 0.5);
2179
- ctx.lineTo(canvas.width - parseInt(m_chartCss['margin-right']), canvas.height - parseInt(m_chartCss['margin-bottom']));
2180
- ctx.stroke();
2181
- ctx.closePath();
1873
+ m_ctx.beginPath();
1874
+ m_ctx.strokeStyle = m_chartCss['border-right-color'];
1875
+ m_ctx.lineWidth = parseInt(boxshadow[1]);
1876
+ m_ctx.moveTo(space.right, space.top + 0.5);
1877
+ //m_ctx.lineTo(spaces.chart.right, spaces.chart.height - parseInt(m_chartCss['margin-bottom']));
1878
+ m_ctx.lineTo(space.right, space.bottom);
1879
+ m_ctx.stroke();
1880
+ m_ctx.closePath();
2182
1881
  }
2183
- ctx.restore();
1882
+ m_ctx.restore();
2184
1883
  }
2185
1884
 
2186
1885
  function parseData(data, factor) {
@@ -2274,39 +1973,50 @@ function Milli_Chart(settings) {
2274
1973
  }
2275
1974
 
2276
1975
  _this.addQuantity = function() {
2277
- if (m_modules.quantity == null)
2278
- m_modules.quantity = new MilliChart_Quantity(_this, m_canvas);
1976
+ if (m_chartspaces.chart.percent == 100) {
1977
+ m_chartspaces.chart.percent = 70;
1978
+ m_chartspaces.lowerChart.percent = 30;
1979
+ } else {
1980
+ m_chartspaces.chart.percent = 100;
1981
+ m_chartspaces.lowerChart.percent = 0;
1982
+ _this.drawChart();
1983
+ return;
1984
+ }
1985
+ /*if (m_modules.quantity == null)
1986
+ m_modules.quantity = new MilliChart_Quantity(_this, m_canvas);*/
1987
+ _this.drawChart();
2279
1988
  };
2280
1989
 
2281
1990
  _this.resizeStart = function(e, ui) {
2282
- m_resizing.resizing = true;
2283
1991
  m_resizing.width = m_canvas.width;
2284
1992
  m_resizing.height = m_canvas.height;
2285
1993
  };
2286
1994
 
2287
1995
  _this.resize = function(e, ui) {
2288
- var diff = (m_resizing.height - _this.settings.target.offsetHeight) / _this.settings.target.offsetHeight * 100;
2289
- if (Math.abs(diff) > 10) {
2290
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
2291
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
1996
+ var diff = (m_resizing.height - m_canvas.height) / m_canvas.height * 100;
1997
+ if (Math.abs(diff) > 1) {
1998
+ setChartSize();
1999
+ m_resizing.width = m_canvas.width;
2000
+ m_resizing.height = m_canvas.height;
2292
2001
  _this.drawChart();
2293
2002
  } else {
2294
- diff = (m_resizing.width - _this.settings.target.offsetWidth) / _this.settings.target.offsetWidth * 100;
2295
- if (Math.abs(diff) > 10) {
2296
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
2297
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
2003
+ diff = (m_resizing.width - m_canvas.width) / m_canvas.width * 100;
2004
+ if (Math.abs(diff) > 1) {
2005
+ setChartSize();
2006
+ m_canvas.height = _this.settings.target.offsetHeight;
2007
+ m_canvas.width = _this.settings.target.offsetWidth;
2008
+ m_resizing.width = m_canvas.width;
2009
+ m_resizing.height = m_canvas.height;
2298
2010
  _this.drawChart();
2299
2011
  }
2300
2012
  }
2301
- m_resizing.width = m_canvas.width;
2302
- m_resizing.height = m_canvas.height;
2013
+ var cache = m_ctx.getImageData(0, 0, m_canvas.width, m_canvas.height);
2014
+ setChartSize();
2015
+ m_ctx.putImageData(cache, 0, 0);
2303
2016
  };
2304
2017
 
2305
2018
  _this.resizeEnd = function(e, ui) {
2306
- m_resizeing = false;
2307
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
2308
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
2309
- console.log('Width:', _this.settings.target.offsetWidth);
2019
+ setChartSize();
2310
2020
  _this.drawChart();
2311
2021
  };
2312
2022
 
@@ -2335,7 +2045,7 @@ function Milli_Chart(settings) {
2335
2045
  currentDate.setSeconds(lastdate.getSeconds());
2336
2046
 
2337
2047
  if (lastdate.toISOString().substring(0, 10) != currentDate.toISOString().substring(0, 10)) { // new date
2338
- tmp = new Date(lastdate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
2048
+ var tmp = new Date(lastdate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
2339
2049
  var nextDate = new Date(data[i].timestamp);
2340
2050
  tmp = tmp.getTime() + 86400000 - _this.scaleinfoX.milliPerDay; // increase to next days starttime
2341
2051
  currentDate = new Date(tmp);
@@ -2348,14 +2058,15 @@ function Milli_Chart(settings) {
2348
2058
  }
2349
2059
  offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
2350
2060
  lastdate = currentDate;
2351
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2061
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2352
2062
  // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
2353
2063
 
2354
2064
  }
2355
- startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2065
+ //startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2066
+ 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;
2356
2067
  var maxy = maxy > startpoint.y ? maxy : startpoint.y;
2357
2068
 
2358
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2069
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2359
2070
  startpoint.x -= offset;
2360
2071
  m_ctx.beginPath();
2361
2072
  m_ctx.arc(startpoint.x, startpoint.y - 20, 10, 0, 2 * Math.PI, false);
@@ -2421,11 +2132,13 @@ function Milli_Chart(settings) {
2421
2132
  currentDate = new Date(data[i].timestamp);
2422
2133
  offset = ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel) * dateDiffInDays(new Date(startDate), currentDate);
2423
2134
  tmp = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
2424
- endpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((tmp.getTime() - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2425
- if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') // plot the closeprice1d
2426
- 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;
2427
- else {
2428
- endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2135
+ endpoint.x = Math.round(m_chartspaces.chart.left + ((tmp.getTime() - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2136
+ if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') { // plot the closeprice1d
2137
+ //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;
2138
+ 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;
2139
+ } else {
2140
+ //endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2141
+ 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;
2429
2142
  // do not add closeprice to hover array
2430
2143
  /*
2431
2144
  var x = Math.round(endpoint.x);
@@ -2470,22 +2183,20 @@ function Milli_Chart(settings) {
2470
2183
  offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
2471
2184
  lastdate = currentDate;
2472
2185
  //console.log(startpoint.x);
2473
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2186
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2474
2187
  //console.log(startpoint.x);
2475
2188
 
2476
2189
  // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
2477
2190
  if (_this.scaleinfoY.type == 'trades' && tmpx < startpoint.x) {
2478
2191
  m_ctx.lineTo(startpoint.x, startpoint.y);
2479
2192
  }
2480
-
2481
2193
  //m_ctx.lineTo(startpoint.x, startpoint.y);
2482
-
2483
2194
  }
2484
- //p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset); // from drawXaxis
2485
- startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2195
+ //startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2196
+ 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;
2486
2197
  maxy = maxy > startpoint.y ? maxy : startpoint.y;
2487
2198
 
2488
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2199
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2489
2200
  startpoint.x -= offset;
2490
2201
  if (startpoint.x != endpoint.x || startpoint.y != endpoint.y) {
2491
2202
  var x = Math.round(startpoint.x);
@@ -2509,7 +2220,7 @@ function Milli_Chart(settings) {
2509
2220
  //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"
2510
2221
 
2511
2222
  if (instrument == 0) {
2512
- 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) };
2223
+ 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 };
2513
2224
  if (typeof data[i].dividend !== 'undefined') point.dividend = data[i].dividend;
2514
2225
  if (typeof data[i].diff !== 'undefined') point.diff = data[i].diff;
2515
2226
  m_datapoints.push(point);
@@ -2523,19 +2234,19 @@ function Milli_Chart(settings) {
2523
2234
  if (_this.settings.hcurve && _this.scaleinfoY.type == 'history') {
2524
2235
  if (isToday(currentDate)) {
2525
2236
  // only 1 point in hcurve chart, draw line from start of chart to end date
2526
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), startpoint.y);
2237
+ m_ctx.moveTo(m_chartspaces.chart.left, startpoint.y);
2527
2238
  m_ctx.lineTo(startpoint.x, startpoint.y);
2528
- 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 };
2239
+ 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 };
2529
2240
  m_datapoints.push(point);
2530
2241
  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 };
2531
2242
  m_datapoints.push(point);
2532
- startx = parseInt(m_chartCss['margin-left']);
2243
+ startx = m_chartspaces.chart.left;
2533
2244
  starty = startpoint.y;
2534
2245
  // last point so break out and store startx and starty from fake point
2535
2246
  break;
2536
2247
  } else if (hCurveLastPoint) {
2537
2248
  /* var y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((hCurveLastPoint.price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2538
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y);
2249
+ m_ctx.moveTo(m_chartspaces.chart.left, y);
2539
2250
  m_ctx.lineTo(startpoint.x, y);*/
2540
2251
  }
2541
2252
  }
@@ -2544,11 +2255,9 @@ function Milli_Chart(settings) {
2544
2255
  startx = startpoint.x;
2545
2256
  starty = startpoint.y;
2546
2257
  }
2547
- //console.log('in', startpoint.x);
2548
2258
  endpoint.x = startpoint.x;
2549
2259
  endpoint.y = startpoint.y;
2550
2260
  }
2551
- // console.log('div', data[i]);
2552
2261
  if (data[i].dividend) {
2553
2262
  //console.log('div', data[i]);
2554
2263
  }
@@ -2558,9 +2267,10 @@ function Milli_Chart(settings) {
2558
2267
  });
2559
2268
  m_ctx.stroke();
2560
2269
  if (_this.settings.fillchart == true && instrument == 0) {
2561
- //console.log(startpoint.x, endpoint.x);
2562
- m_ctx.lineTo(startpoint.x, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2563
- m_ctx.lineTo(startx, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2270
+ // m_ctx.lineTo(startpoint.x, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2271
+ // m_ctx.lineTo(startx, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2272
+ m_ctx.lineTo(startpoint.x, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2273
+ m_ctx.lineTo(startx, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2564
2274
  m_ctx.lineTo(startx, starty);
2565
2275
  m_ctx.closePath();
2566
2276
  if (true == m_instrumentCss[0]['background-image'].startsWith('linear-gradient')) {
@@ -2572,7 +2282,7 @@ function Milli_Chart(settings) {
2572
2282
  col0 = col0.substring(0, col0.lastIndexOf(','));
2573
2283
  col1 = colors.substring(colors.lastIndexOf('rgba'), colors.lastIndexOf(')'));
2574
2284
  }
2575
- var grd = m_ctx.createLinearGradient(0, 0, 0, m_canvas.height - parseInt(m_chartCss['margin-top']) - parseInt(m_chartCss['margin-bottom']));
2285
+ var grd = m_ctx.createLinearGradient(0, 0, 0, m_chartspaces.chart.height - m_chartspaces.chart.top - parseInt(m_chartCss['margin-bottom']));
2576
2286
  grd.addColorStop(0, col0);
2577
2287
  grd.addColorStop(1, col1);
2578
2288
  m_ctx.fillStyle = grd;
@@ -2669,6 +2379,16 @@ function Milli_Chart(settings) {
2669
2379
  return 1;
2670
2380
  };
2671
2381
 
2382
+ function setChartSize() {
2383
+ var offset = 0;
2384
+ if (_this.settings.target.parentNode.classList.contains('chartcontainer')) {
2385
+ offset = _this.settings.target.getBoundingClientRect().top - _this.settings.target.parentNode.getBoundingClientRect().top;
2386
+ }
2387
+ _this.settings.target.style.height = (_this.settings.target.parentNode.offsetHeight - offset) + 'px';
2388
+ _this.settings.target.style.width = _this.settings.target.parentNode.offsetWidth + 'px';
2389
+ m_canvas.height = _this.settings.target.offsetHeight;
2390
+ m_canvas.width = _this.settings.target.offsetWidth;
2391
+ }
2672
2392
  _this.buildwidget = function(resp) {
2673
2393
  //console.log('buildwidget', resp);
2674
2394
  parseData(resp[0], 1);
@@ -2686,13 +2406,8 @@ function Milli_Chart(settings) {
2686
2406
  if (m_canvas == null) {
2687
2407
  m_canvas = MillistreamWidgetApi_addElement(_this, 'canvas', 'millistream-chart-canvas', _this.settings.target);
2688
2408
 
2689
- //m_canvas.style.width = '100%';
2690
- //m_canvas.style.height = '100%';
2691
- //m_canvas.setAttribute('height', m_canvas.offsetHeight);
2692
- //m_canvas.setAttribute('width', m_canvas.offsetWidth); // läs från css?
2693
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight);
2694
- //m_canvas.setAttribute('height', 300);
2695
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth); // läs från css?
2409
+ setChartSize();
2410
+
2696
2411
  m_ctx = m_canvas.getContext("2d");
2697
2412
  m_canvas.addEventListener('mousemove', onMouseMove, false); // disable while loading and enable on drawReady
2698
2413
  m_canvas.addEventListener('mouseout', onMouseOut, false);
@@ -2718,9 +2433,13 @@ function Milli_Chart(settings) {
2718
2433
  if (m_datapoints.length == 0 || m_zoom.mousedown.timestamp == null) return;
2719
2434
  var rect = m_canvas.getBoundingClientRect();
2720
2435
  var x = evt.clientX - rect.left - 1;
2436
+ if (x < m_zoom.mousedown.pos) {
2437
+ clearZoom();
2438
+ return;
2439
+ }
2721
2440
  if (Math.abs(x - m_zoom.mousedown.pos) > 5) { // only handle zoom with 5 pixels width
2722
2441
  var i;
2723
- for (i = m_datapoints.length - 1; i > 0; i--) { // -1??
2442
+ for (i = m_datapoints.length - 1; i > 0; i--) {
2724
2443
  if (x >= m_datapoints[i].x) {
2725
2444
  m_zoom.end = x;
2726
2445
  break;
@@ -2796,7 +2515,8 @@ function Milli_Chart(settings) {
2796
2515
  m_chartCss['margin-bottom'] = properties.marginBottom;
2797
2516
  m_chartCss['margin-left'] = properties.marginLeft;
2798
2517
  m_chartCss['margin-right'] = properties.marginRight;
2799
- m_chartCss['box-shadow'] = properties.boxShadow;
2518
+ //m_chartCss['box-shadow'] = properties.boxShadow;
2519
+ m_chartCss.boxShadow = properties.boxShadow;
2800
2520
  m_chartCss['border-right-color'] = properties.borderRightColor;
2801
2521
  m_chartCss['border-left-color'] = properties.borderLeftColor;
2802
2522
 
@@ -2992,7 +2712,6 @@ function Milli_Chart(settings) {
2992
2712
  changeOrientation();
2993
2713
 
2994
2714
  });
2995
-
2996
2715
  }
2997
2716
  var milli_data_api_url = 'https://stage.millistream.com/widgets/3.0.3/data/milli_widget_dataapi.php?';
2998
2717
 
@@ -3640,7 +3359,7 @@ function print_field(widget, element, field, value, overridedecimals) {
3640
3359
  }
3641
3360
  }
3642
3361
  if (typeof widget.settings.translations !== 'undefined' && widget.translateTypes) {
3643
- element.innerHTML = widget.translateTypes(value);
3362
+ element.innerHTML = widget.translateTypes(value, field);
3644
3363
  return element.innerHTML;
3645
3364
  }
3646
3365
 
@@ -5567,4 +5286,5 @@ function MillistreamWidgetStreamingApi(settings) {
5567
5286
  }
5568
5287
  exports.Milli_Chart = Milli_Chart;
5569
5288
  exports.MillistreamWidgetSettings = MillistreamWidgetSettings;
5289
+ exports.milli_data_api_url = milli_data_api_url;
5570
5290
  exports.MillistreamWidgetStreamingApi = MillistreamWidgetStreamingApi;