Add image in Series instead of symbols.

TeeChart for Javascript for the HTML5 Canvas

Add image in Series instead of symbols.

Postby 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!
SenSeo
Newbie
Newbie
 
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Add image in Series instead of symbols.

Postby 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 ImagePlease read our Bug Fixing Policy
Yeray
Site Admin
Site Admin
 
Posts: 8467
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia

Re: Add image in Series instead of symbols.

Postby 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.

Postby 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 847 times
SenSeo
Newbie
Newbie
 
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Add image in Series instead of symbols.

Postby 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 ImagePlease read our Bug Fixing Policy
Yeray
Site Admin
Site Admin
 
Posts: 8467
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia


Return to Javascript / HTML5

Who is online

Users browsing this forum: No registered users and 1 guest