Add image in Series instead of symbols.

[SenSeo]

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!

[Yeray]

Hello,

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

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

[SenSeo]

Thanks for your response. Its working like a charm.

[SenSeo]

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.

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