Class: Decoration

Base class for a decorator. A decorator adds custom branding to a chart image before it is rendered.

The decoration function will be called right after the chart image is created to overlay any additional 'decorations' you may want to have on that image. The default decoration function can be found in stx-share.js (STXSocial.defaultDecorator.decorate). Feel free to modify as needed or create a new one based on it by setting STXSocial.defaultDecorator.decorate to the name of your custom decoration function.

For example, if you want to have a watermark logo on the shared image but not the interactive chart, you will have to do it as a decoration rather than using STXSocial.brandMyChart.

To do this, first add a hidden div in your HTML to store the watermark picture. Example (change the image link to whatever you will use):

<img id="shareWatermark" src="img/helicopter.png" style="display:none">

Then you can take the default decoration function in stx-share.js (STXSocial.defaultDecorator.decorate) and add the following to it:

var img = document.getElementById("shareWatermark");
context.drawImage(img, 10, stx.panels.chart.height-50, 60,60);  //Parameters are: image. x axis, y axis, width, hight.

Adjust the location and size as needed. You should be all set.

Be sure to set the pixel count you want to use for the header and footer. These amounts will be used to reduce the size of the chart and leave space for the additional decorations you will place as footer or headers. This is done in the STXSocial.defaultDecorator.initialize function. Feel free to modify as needed or create a new one based on it by setting STXSocial.defaultDecorator.initialize to the name of your custom initialization function. The values to be set are:

    this.headerPX=headerSize;
    this.footerPX=footerSize;