Page 1 of 1
Using Annotations to have an image within a chart
Posted: Thu Jan 18, 2018 6:10 am
by 9231184
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
Re: Using Annotations to have an image within a chart
Posted: Thu Jan 18, 2018 12:43 pm
by yeray
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 (815.14 KiB) Viewed 28363 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);
Re: Using Annotations to have an image within a chart
Posted: Fri Jan 19, 2018 4:23 am
by 9231184
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.
Re: Using Annotations to have an image within a chart
Posted: Wed Jan 31, 2018 5:58 am
by 10052617
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.
Re: Using Annotations to have an image within a chart
Posted: Wed Jan 31, 2018 9:17 am
by 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/
Re: Using Annotations to have an image within a chart
Posted: Sun Feb 04, 2018 1:11 pm
by 9231184
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.
Re: Using Annotations to have an image within a chart
Posted: Mon Feb 05, 2018 8:03 am
by 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);
}