Unable find mouse click event on rectangle
Unable find mouse click event on rectangle
I have been trying to find the click event on the rectangle, how can I detect the rectangle by click event?
- Attachments
-
- click event need
- Capture.PNG (36.93 KiB) Viewed 67998 times
Re: Unable find mouse click event on rectangle
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.
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,
Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP) | |
Please read our Bug Fixing Policy |
Re: Unable find mouse click event on rectangle
I am using the below
I need every click event for every formatBlue will draw .
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);
}
}
Re: Unable find mouse click event on rectangle
Hello,
In that case you should do something like this in your event listener:
Here a working example.
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}`);
}
}
})
Best Regards,
Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP) | |
Please read our Bug Fixing Policy |
Re: Unable find mouse click event on rectangle
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;
}
}
}
Re: Unable find mouse click event on rectangle
Hello,
Using TeeChart's own mouse events, here ES6 coded, you can try:
See: https://www.steema.com/files/public/tee ... s_ES6.html and open the console in your browser.
Regards,
Marc Meumann
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();
}
Regards,
Marc Meumann
Steema Support
Re: Unable find mouse click event on rectangle
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
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();
}
Re: Unable find mouse click event on rectangle
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)
..or this approach being used here: https://www.steema.net/TeeChartBlazor/chartpanel/101
Regards,
Marc
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()
}
}
}
}
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);
}
Marc
Steema Support
Re: Unable find mouse click event on rectangle
Resize was working well, but I couldn't get the right coordinates for mousedown. And its working for mousemove
Re: Unable find mouse click event on rectangle
In my case, it was working with event.clientX isntead of event.x