Unable find mouse click event on rectangle

[aaron]

I have been trying to find the click event on the rectangle, how can I detect the rectangle by click event?

[Yeray]

Hello,

I'm not sure how are you exactly drawing those rectangles, but here's an example of detecting a mouse click on a drawn ellipse.

[aaron]

I am using the below

Code: Select all

formatBlue: Tee.IFormat;

this.Chart.ondraw = function () {

  for (let i = 0; i < this.data.length; i++) {

    let x1 = this.axes.bottom.calc(startDate);
    let x2 = this.axes.bottom.calc(data[i]);
    let y1 = this.axes.left.startPos;
    let y2 = this.axes.left.endPos;

    this.formatBlue.rectangle(x1, y1, x2 - x1, y2 - y1);
  }
}

I need every click event for every formatBlue will draw .

[Yeray]

Hello,

In that case you should do something like this in your event listener:

Code: Select all

const body = document.body;
body.addEventListener('click', function(evt) { 

  for (let i = 0; i < this.data.length-1; i++) {

    const x1 = this.axes.bottom.calc(this.data[i]);
    const x2 = this.axes.bottom.calc(this.data[i+1]);
    const y1 = this.axes.left.startPos;
    const y2 = this.axes.left.endPos;

    const rect = new Tee.Rectangle(x1, y1, x2 - x1, y2 - y1);
    const p = {
      x: evt.x,
      y: evt.y
    }
    
    if (rect.contains(p)) {
      console.log(`in rect ${i}`);
    }
  }
})

Here a working example.

[aaron]

Click event working in angular but event.x & event.y are not match with data

Code: Select all

    
    this.clickObservable$ = fromEvent(document.body, "dblclick");
    this.clickSubscription$ = this.clickObservable$.subscribe((evt) => {
    this.onDobuleClick(evt);
    });
    
    // double click events
    
    onDobuleClick(event: any) {
    for (let i = 0; i < this.TChart.Data.length; i++) {
      const subActivity = this.TChart.Data[i].SubActivity;
      const startDate = new Date(this.TChart.Data[i].StartDate);
      const endDate = new Date(this.TChart.Data[i].EndDate);
      let x1 = this.TChart.axes.bottom.calc(startDate);
      let x2 = this.TChart.axes.bottom.calc(endDate);
      let y1 = this.TChart.axes.left.startPos;
      let y2 = this.TChart.axes.left.endPos;
      const rect = new Tee.Rectangle(x1, y1, x2 - x1, y2 - y1);
      const p = {
        x: event.x,
        y: event.y,
      };

      if (rect.contains(p)) {
      console.log(this.TChart.Data[i]);
             break;
      }
    }
  }
    
    

[Marc]

Hello,

Using TeeChart's own mouse events, here ES6 coded, you can try:

Code: Select all

import { Chart, Line, Format, Rectangle } from '../../src/teechart.js'

drawChart();

function drawChart(){
	
	const msecsInADay = 86400000; //24*60*60*1000
	const now = new Date();

	const data = [];
	for (let t = 0; t < 10; t++) {
		const p = {
		x: new Date(now.getTime() + t * msecsInADay),
		y: Math.random()*100,
		color: "rgb("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+")"
	  }
	  data.push(p);
	}

	const chart1 = new Chart("canvas1");
	chart1.legend.visible = false;

	const series1 = chart1.addSeries(new Line());
	series1.format.stroke.size = 4;
	
	chart1.zoom.enabled = false;

	/*series1.onclick=function(series,index,x,y) {
	  alert("Clicked point: "+index);
	}*/

	series1.data.x = new Array(data.length);
	for (let t = 0; t < data.length; t++) {
	  series1.data.x[t] = data[t].x;
	  series1.data.values[t] = data[t].y;
	}

	const myFormat = new Format(chart1);
	myFormat.gradient.visible = true;
	myFormat.gradient.colors = ["white", "lime"];
	myFormat.transparency = 0.3;

	chart1.ondraw = function() {
	  for (let i = 0; i < data.length-1; i++) {

		const x1 = chart1.axes.bottom.calc(data[i].x);
		const x2 = chart1.axes.bottom.calc(data[i+1].x);
		const y1 = chart1.axes.left.startPos;
		const y2 = chart1.axes.left.endPos;

		myFormat.gradient.colors[1] = data[i].color;
		myFormat.rectangle(x1, y1, x2 - x1, y2 - y1);
	  }
	}
	
	chart1.mousedown=function(event) {
			 
	  for (let i = 0; i < data.length-1; i++) {

		const x1 = chart1.axes.bottom.calc(data[i].x);
		const x2 = chart1.axes.bottom.calc(data[i+1].x);
		const y1 = chart1.axes.left.startPos;
		const y2 = chart1.axes.left.endPos;

		const rect = new Rectangle(x1, y1, x2 - x1, y2 - y1);
		const p = {
		  x: event.x,
		  y: event.y
		}
		
		if (rect.contains(p)) {
				//alert("in rect: " + i);
				console.log(`in rect ${i}`);
		}
	  }			 
			 
	}

	chart1.draw();
}

See: https://www.steema.com/files/public/tee ... s_ES6.html and open the console in your browser.

Regards,
Marc Meumann

[aaron]

Sir,
It's not matching with mouse pointers, I double-checked that the X and Y coordinates are always the same with various screen sizes but it's not working. Any help ?

here is the my resize code

Code: Select all

  resize() {
    var body = document.body;
    let _canvas: any = this.TChart.canvas;
    const topMargin = 200;
    var width = 80,
      height = 70; // <--- % PERCENT

    _canvas.width = (width * body.clientWidth) / 100;
    _canvas.height = (height * body.clientHeight - topMargin) / 100;
    this.TChart.bounds.width = _canvas.width;
    this.TChart.bounds.height = _canvas.height;
    this.TChart.draw();
  }

[Marc]

Hello

Here's the approach used in the Steema demos:
https://www.steema.com/files/public/tee ... est/demos/

This one for example, https://www.steema.com/files/public/tee ... ghlow.html, the resize routine is in demo.js. It modifies the width but could apply the technique to height.
(https://www.steema.com/files/public/tee ... os/demo.js)

Code: Select all

  static resize(element) {
    if (element != null) {
      let w = 0
      let xContent
      let canvas
      let chart

      if (element instanceof HTMLCanvasElement) {
        canvas = element

        if (canvas.chart instanceof Chart) {
          chart = canvas.chart

          xContent = $(canvas).closest('.x_content')[0]
          w = parseFloat(window.getComputedStyle(xContent, null).width) | w

          canvas.width = w
          chart.bounds.width = w
          chart.draw()
        }
      }
    }
  }

..or this approach being used here: https://www.steema.net/TeeChartBlazor/chartpanel/101

Code: Select all

function resize(element) {
    if (element != null) {
        var w = 0, xContent, canvas, chart;

        if (element instanceof HTMLCanvasElement) {
            canvas = element;

            if (canvas.chart instanceof Tee.Chart) {
                chart = canvas.chart;

                hostChart = canvas.chart; 

                if (element.offsetParent != null)
                    w = element.offsetParent.clientWidth - 280;
                else {
                    xContent = $(canvas).closest('.tabcontent')[0];
                    w = xContent.parentElement.offsetWidth * 0.95;
                }

                canvas.width = w;
                chart.bounds.width = w - 30;
                chart.draw();
            }
        }
    }
}

function resizeC(chart) {
    resize(chart.ctx.canvas);
}

Regards,
Marc

[aaron]

Resize was working well, but I couldn't get the right coordinates for mousedown. And its working for mousemove

[aaron]

In my case, it was working with event.clientX isntead of event.x