Page 1 of 1

Add image in Series instead of symbols.

Posted: Mon May 09, 2016 10:16 am
by 15677821
Hello,

Right now we are using the symbols to draw a chart. We would like to customize the image instead of tee chart symbols. Also, the same symbol should be display in the legend section too. Is it possible to customize our own icon? If so, please share some sample code.

Thanks!

Re: Add image in Series instead of symbols.

Posted: Mon May 09, 2016 12:46 pm
by yeray
Hello,
SenSeo wrote:We would like to customize the image instead of tee chart symbols
You can set a series format to use an image as brush with the code below. The pointer style will still be used to draw the shapes:

Code: Select all

series1.pointer.format.image.url="images/metal.jpg"; //series1 is a Tee.PointXY
SenSeo wrote:Also, the same symbol should be display in the legend section too.
The solution is very similar to the one here.

Code: Select all

    Chart1.legend.symbol.oldSymbolDraw = Chart1.legend.symbol.draw;

    function tryHover(series,index) {
        if (series.hover.enabled) {
            var sv=Chart1.legend.showValues();

            if ((sv && (series.over==index)) ||
                    ((!sv) && (series.over>=0)))
                return series.hover;
        }

        return null;
    }

    Chart1.legend.symbol.draw=function(series,index,x,y) {
        var f=this.format=new Tee.Format(Chart1);
        var c = Chart1.ctx, fhover=tryHover(series, index), old=f.fill, olds=f.stroke;

        if (series.pointer.format.image.url != "")
            f = series.pointer.format;
        else
            f.fill= series.legendColor(index);

        c.z=-0.01;

        switch (series.pointer.style) {
            case "triangle": {
                y = y-this.height*0.5-1;

                f.polygon([new Point(x+this.width*0.5,y),
                    new Point(x+this.width,y+this.height),
                    new Point(x,y+this.height)]);

                break;
            }
            case "ellipse": {
                f.ellipse(x+this.width*0.5, y, this.width, this.height);
                break;
            }
            default: {
                this.oldSymbolDraw(series,index,x,y);
                break;
            }
        }

        f.fill=old;
        f.stroke=olds;
    }

Re: Add image in Series instead of symbols.

Posted: Tue May 10, 2016 6:11 am
by 15677821
Thanks for your response. Its working like a charm.

Re: Add image in Series instead of symbols.

Posted: Wed May 11, 2016 1:17 pm
by 15677821
Hello,

The square border is displaying for the customized image in the chart. How to remove the square border from the customized icon? Please refer the attached image for the reference.

Re: Add image in Series instead of symbols.

Posted: Thu May 12, 2016 9:13 am
by yeray
Hello,

I have slightly modified the symbol.draw function to also use the series stroke. Ie:

Code: Select all

    var series1 = Chart1.addSeries(new Tee.PointXY);
    series1.addRandom(10);
    series1.pointer.style="ellipse";
    series1.pointer.format.stroke.fill = "";
    series1.pointer.format.image.url="images/metal.jpg";

    var series2 = Chart1.addSeries(new Tee.PointXY);
    series2.addRandom(10);
    series2.pointer.style="ellipse";
    series2.pointer.format.image.url="images/wood.jpg";

    Chart1.legend.symbol.oldSymbolDraw = Chart1.legend.symbol.draw;

    Chart1.legend.symbol.draw=function(series,index,x,y) {
        var f=this.format=new Tee.Format(Chart1);
        var c = Chart1.ctx, old=f.fill, olds=f.stroke;

        if (series.pointer.format.image.url != "") {
            f._img = series.pointer.format.image;
            f.stroke = series.pointer.format.stroke;
        }
        else
            f.fill= series.legendColor(index);

        c.z=-0.01;

        switch (series.pointer.style) {
            case "triangle": {
                y = y-this.height*0.5-1;

                f.polygon([new Point(x+this.width*0.5,y),
                    new Point(x+this.width,y+this.height),
                    new Point(x,y+this.height)]);

                break;
            }
            case "ellipse": {
                f.ellipse(x+this.width*0.5, y, this.width, this.height);
                break;
            }
            default: {
                this.oldSymbolDraw(series,index,x,y);
                break;
            }
        }

        f.fill=old;
        f.stroke=olds;
    }