Get points in selected are in the teechart

Question

Trying to get series values in the selected area after mouseup. Need to calculate width and height of the selected are in the chart with respect to axis.

[`https://jsbin.com/wapovohiwe/edit?html,output`][1]

Answer 1

I modified your example to draw the rectangle and to output the coordinates of the

Chart1 = new Tee.Chart("canvas");
Chart1.legend.visible = false;
Chart1.panel.format.gradient.visible = false;
Chart1.panel.format.fill = "white";
Chart1.walls.back.format.fill = "white";

Chart1.addSeries(new Tee.Line([1, 3, 0, 2, 7, 5, 6]));

Chart1.zoom.enabled = false;

var myFormat = new Tee.Format(Chart1);
myFormat.transparency = 0.9;

var rect = {},
  drag = false;

Chart1.mousedown = function(e) {
  rect.startX = e.x - canvas.offsetLeft - canvas.parentElement.offsetLeft - canvas.parentElement.parentElement.offsetLeft;
  rect.startY = e.y - canvas.offsetTop - canvas.parentElement.offsetTop - canvas.parentElement.parentElement.offsetTop;
  drag = true;
}

Chart1.mouseup = function(p) {
  var i, tmpP = {};
  points = [];
  var s = Chart1.series.items[0];
  for (i = 0; i < s.count(); i++) {
    s.calc(i, tmpP);
    if ((tmpP.x >= rect.startX) && (tmpP.x <= rect.startX + rect.w) && (tmpP.y >= rect.startY) && (tmpP.y <= rect.startY + rect.h))
      console.log("index: " + i + ", value: " + s.data.values[i]);
  }

  drag = false;
}

Chart1.mousemove = function(e) {
  if (drag) {
    rect.w = e.x - rect.startX;
    rect.h = e.y - rect.startY;

    drawChart();
  }
}

function drawChart() {
  Chart1.draw();
  myFormat.rectangle(rect.startX, rect.startY, rect.w, rect.h);
}


Chart1.draw();

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>

<canvas id="canvas" height="400" width="700"></canvas>