Unable find mouse click event on rectangle

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Unable find mouse click event on rectangle

Post by aaron » Fri Sep 08, 2023 11:56 am

I have been trying to find the click event on the rectangle, how can I detect the rectangle by click event?
Attachments
Capture.PNG
click event need
Capture.PNG (36.93 KiB) Viewed 67998 times

Yeray
Site Admin
Site Admin
Posts: 9604
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Unable find mouse click event on rectangle

Post by Yeray » Fri Sep 08, 2023 12:07 pm

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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: Unable find mouse click event on rectangle

Post by aaron » Mon Sep 11, 2023 1:37 pm

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
Site Admin
Site Admin
Posts: 9604
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Unable find mouse click event on rectangle

Post by Yeray » Tue Sep 12, 2023 7:43 am

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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: Unable find mouse click event on rectangle

Post by aaron » Tue Sep 12, 2023 11:36 am

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
Site Admin
Site Admin
Posts: 1261
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Unable find mouse click event on rectangle

Post by Marc » Thu Sep 14, 2023 10:42 am

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
Steema Support

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: Unable find mouse click event on rectangle

Post by aaron » Thu Sep 21, 2023 10:41 am

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
Site Admin
Site Admin
Posts: 1261
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Unable find mouse click event on rectangle

Post by Marc » Tue Sep 26, 2023 10:20 am

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
Steema Support

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: Unable find mouse click event on rectangle

Post by aaron » Tue Sep 26, 2023 1:56 pm

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

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: Unable find mouse click event on rectangle

Post by aaron » Mon Oct 02, 2023 4:09 am

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

Post Reply