CODEWITHSUNDEEP
htmlteechart
kshitij
kshitij

Reputation: 624

Get points in selected are in the teechart

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]

enter image description here

Upvotes: 0

Views: 108

Answers (1)

Yeray
Yeray

Reputation: 5039

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>

Upvotes: 1

Related Questions