Tee Chart for Angular & Draw a Painting Manually

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

Tee Chart for Angular & Draw a Painting Manually

Post by aaron » Tue Apr 18, 2023 6:12 am

Hello Team,

I have been working on Angular and HTML 5, we are looking to draw a painting using a mouse event before the draw series.

Marc
Site Admin
Site Admin
Posts: 1209
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Tee Chart for Angular & Draw a Painting Manually

Post by Marc » Tue Apr 18, 2023 9:29 am

Hello,

There is a Series "onbeforedraw" event you can use in a similar way to the ondraw event in this example:

Code: Select all

Chart1.ondraw=function() {
    var x1 = Chart1.axes.bottom.calc(4),
        y1 = Chart1.axes.left.calc(70),
        x2 = Chart1.axes.bottom.calc(7),
        y2 = Chart1.axes.left.calc(40);

    // X,Y, Width, Height
    myFormat.rectangle(x1,y1, x2-x1, y2-y1);
}
see: https://www.steema.com/files/public/tee ... _paint.htm

Regards,
Marc Meumann
Steema Support

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

Re: Tee Chart for Angular & Draw a Painting Manually

Post by aaron » Wed Apr 26, 2023 12:38 pm

Hello,

I have been facing paint loss while moving the mouse hover on it.
Can you please provide me with an angular example with paint?

there are so many issues if I draw a rectangle before the chart.draw(),
chart.ondraw() does not work before chart draw and if I draw before it, it will be removed after hover

Code: Select all

 	this.TChart.draw();
        this.TChart.ondraw = this.onChartDraw(this._tagData$);
:evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:

Marc
Site Admin
Site Admin
Posts: 1209
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Tee Chart for Angular & Draw a Painting Manually

Post by Marc » Wed May 03, 2023 2:58 pm

Hello,

This example (mousedown-drag line draw) includes code that I think is relevant to what you want:

https://www.steema.com/files/public/tee ... /lines.htm

I'll have a look to porting some elements over to the angular example,

Regards,
Marc Meumann
Steema Support

Marc
Site Admin
Site Admin
Posts: 1209
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Tee Chart for Angular & Draw a Painting Manually

Post by Marc » Tue May 09, 2023 3:46 pm

Hello,

The standard angular example has been modified. The location has changed to:

https://gitlab.com/steema/teechartjs/-/ ... ns/angular
drawline.jpg
drawline.jpg (124.78 KiB) Viewed 12580 times
The demo includes code for mouse movement and custom output to the canvas.

Regards,
Marc Meumann
Steema Support

Post Reply