Using Annotations to have an image within a chart

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
NickH
Newbie
Newbie
Posts: 23
Joined: Mon Mar 08, 2004 5:00 am

Using Annotations to have an image within a chart

Post by NickH » Thu Jan 18, 2018 6:10 am

Hi, my ultimate goal is to be able to watermark my chart with a logo in the corner such that when users download the image the logo should appear. I've attempted to achieve this through annotations with the isDom approach referred in the annotation demos

However using the isDom approach causes two problems:

1) Right-click to save as image does not save the logo
2) When I re-adjust the chart, all previous instances of the Annotation box still appears such that if I incrementally adjust my chart horizontally 10 times there will be 10 logos produced overlapping each other. I am certain it is the isDom approach causing this issue as annotations without isDom are working fine.

I've looked at the reference guide and saw "ChartImage" as an alternative, however the console states that it's not a valid constructor.

For example:

Code: Select all

Sample = new Tee.ChartImage(Chart1);
is not valid.

I'm open to other alternatives if possible.

Thanks

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

Re: Using Annotations to have an image within a chart

Post by Yeray » Thu Jan 18, 2018 12:43 pm

Hello,
NickH wrote:However using the isDom approach causes two problems:

1) Right-click to save as image does not save the logo
2) When I re-adjust the chart, all previous instances of the Annotation box still appears such that if I incrementally adjust my chart horizontally 10 times there will be 10 logos produced overlapping each other. I am certain it is the isDom approach causing this issue as annotations without isDom are working fine.
The example here uses this approach and I can save the image with a right-click.
In that same example, the chart is resized when you resize the window to a smaller size than the chart. When this happens, the marks aren't repositioned until you move the mouse over the chart, but you can solve it calling changeMarkAnotationsPos() at the end of the resize() function.
2018-01-18_13-41-29.gif
2018-01-18_13-41-29.gif (815.14 KiB) Viewed 23330 times
NickH wrote:I've looked at the reference guide and saw "ChartImage" as an alternative, however the console states that it's not a valid constructor.
FYI, this is how it's being used internally:

Code: Select all

var obDefP;
try {
  Object.defineProperty({}, 'x', {});
  obDefP=Object.defineProperty;
}
catch(e) {}

Code: Select all

  this._img=null;

  if (obDefP)
    obDefP(this, "image", {
    get: function() {  if (!this._img)
                          this._img=new ChartImage(this.chart);
                       return this._img;
                    }
    });
  else
    this._img=this.image=new ChartImage(chart);
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

NickH
Newbie
Newbie
Posts: 23
Joined: Mon Mar 08, 2004 5:00 am

Re: Using Annotations to have an image within a chart

Post by NickH » Fri Jan 19, 2018 4:23 am

Strange, at least on Google Chrome the demo saves as an image without the annotations so it may just be a browser issue. Moving forward it's probably best to implement a button function for download which should hopefully have the annotation with it.

I'll have a deeper look into the resizing issue.

nh128
Newbie
Newbie
Posts: 6
Joined: Mon Feb 23, 2009 12:00 am

Re: Using Annotations to have an image within a chart

Post by nh128 » Wed Jan 31, 2018 5:58 am

We're still having difficulty addressing this issue, we want to attempt the ChartImage method first but unsure to get started even with the internal code. According to the documentation ChartImage should be referenced in TeeChart.js and we're using the link hosted on Steema: http://www.steema.com/files/public/teec ... eechart.js but there doesn't seem to be any references to ChartImage?

If possible as well, could you provide a small sample of a watermarked chart (any image at the bottom of the chart), as we can't find any sample code.

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

Re: Using Annotations to have an image within a chart

Post by Yeray » Wed Jan 31, 2018 9:17 am

Hello,

Here it is a simple example using an Annotation as a Dom and a ChartImage through a Format object:
https://jsfiddle.net/norike82/rp83jLgm/
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

NickH
Newbie
Newbie
Posts: 23
Joined: Mon Mar 08, 2004 5:00 am

Re: Using Annotations to have an image within a chart

Post by NickH » Sun Feb 04, 2018 1:11 pm

We've decided to use the second option for our purposes (and it works!), however now if I add a scroller to another canvas it makes the ChartImage (but not the dom-styled) annotation disappear. In your example if you add:

Code: Select all

var Scroll = new Tee.Scroller("Canvas2", Chart1);
Using teechart-extras.js and providing Canvas2 in the HTML, this correctly draws the scroller and the dom-style HTML5 logo but not the ChartImage.

Furthermore I am having difficulty finding resources for Tee.Scroller as its details are not in the documentation. I have tried reading teecharts-extras.js however I am very new to the syntax of JS. Specifically, I would like to get rid of the gradient of the background but more customisation would be great as well.

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

Re: Using Annotations to have an image within a chart

Post by Yeray » Mon Feb 05, 2018 8:03 am

Hello,

The problem is the Scroller constructor overwrites the onDraw function you are using to draw the Tee.Format object. So, you could create the Scroller in first place, store the ondraw function and call that stored function at your ondraw redefinition. Ie:

Code: Select all

var myFormat = new Tee.Format(Chart1);
myFormat.stroke.fill = "";
myFormat.image.url = imageSrc;

var Scroll = new Tee.Scroller("canvas2", Chart1);

var oldDraw = Chart1.ondraw;
Chart1.ondraw = function() {
  oldDraw();

  myFormat.rectangle(myFormat.x, myFormat.y, myFormat.width, myFormat.height);
}
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

Post Reply