Using Annotations to have an image within a chart

[NickH]

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]

Hello,

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 (815.14 KiB) Viewed 28359 times

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);

[NickH]

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]

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]

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/

[NickH]

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]

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);
}