Add image in Series instead of symbols.

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Add image in Series instead of symbols.

Post by SenSeo » Mon May 09, 2016 10:16 am

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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Add image in Series instead of symbols.

Post by Yeray » Mon May 09, 2016 12:46 pm

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;
    }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Add image in Series instead of symbols.

Post by SenSeo » Tue May 10, 2016 6:11 am

Thanks for your response. Its working like a charm.

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Add image in Series instead of symbols.

Post by SenSeo » Wed May 11, 2016 1:17 pm

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.
Attachments
Image_Transperancy.jpg
Image_Transperancy.jpg (1.85 KiB) Viewed 11222 times

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Add image in Series instead of symbols.

Post by Yeray » Thu May 12, 2016 9:13 am

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;
    }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply