Gradients and colorEachPoint

TeeChart for Javascript for the HTML5 Canvas
Post Reply
Jim Green
Newbie
Newbie
Posts: 43
Joined: Thu Aug 03, 2006 12:00 am

Gradients and colorEachPoint

Post by Jim Green » Wed Jul 02, 2014 8:07 pm

Hi, when a bar series has a single color gradient it shows fine. When the series shows colors that go from green to yellow to red, the 2nd gradient color on all bars is red (I assume since that is the color of the last bar shown). Can a pair of gradient colors be specified for each point?

Note that the chart definition is coming from VCL TeeSaveToJavascriptFile. Even in the VCL version this was awkward to do, requiring a GetBarStyle to supply the 2nd gradient color.

Thanks,
Jim

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

Re: Gradients and colorEachPoint

Post by Yeray » Thu Jul 03, 2014 2:10 pm

Hi Jim,

In TeeChart Javascript it's easier to redefine some of the functions. Take a look at this example:

Code: Select all

  bar1 = Chart1.addSeries(new Tee.Bar()).addRandom();
  bar1.getFill=function(index,f) {
    var gr=this.format.gradient;
    switch (index) {
      case 0:
        gr.colors=["silver", "red", "white"];
        gr.stops = [0, 0.25, 1];
        break;
      case 1:
        gr.colors=["green", "white", "black"];
        gr.stops = [0, 0.75, 1];
        break;
      default:
        gr.colors=["red", "silver", "yellow"];
        gr.stops = [0, 0.50, 1];
        break;
    }
    return null;
  }
  
  Chart1.draw();
If getFill() doesn't return null, then all the gradient colors except the first are set to be the color returned by getFill()
However, you can also redefine setEndColor to correct this. Ie:

Code: Select all

  bar1 = Chart1.addSeries(new Tee.Bar()).addRandom();
  bar1.getFill=function(index,f) {
    var gr=this.format.gradient;
    switch (index) {
      case 0:
        gr.colors=["silver", "red", "white"];
        gr.stops = [0, 0.25, 1];
        break;
      case 1:
        gr.colors=["green", "white", "black"];
        gr.stops = [0, 0.75, 1];
        break;
      default:
        gr.colors=["red", "silver", "yellow"];
        gr.stops = [0, 0.50, 1];
        break;
    }
    return gr.colors[gr.colors.length-1];
  }
  
  bar1.format.gradient.setEndColor=function(color) {
    var l=this.colors.length;
    if (color && (color!=="") && l>0)
      this.colors[l-1]=color;
  }
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

Jim Green
Newbie
Newbie
Posts: 43
Joined: Thu Aug 03, 2006 12:00 am

Re: Gradients and colorEachPoint

Post by Jim Green » Fri Jul 04, 2014 5:44 pm

Thanks Yeray, looks like there's a lot of control possible. (I could never have figured this out myself from the docs though.)

We also uses patterns in the bars sometimes, in addition to the gradients. Can this be done?

Thanks.

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

Re: Gradients and colorEachPoint

Post by Yeray » Tue Jul 08, 2014 11:37 am

Hello,

The patterns work fine for the Area series as you can see in the Smooth Areas example.
However, I'm afraid I can't find an easy override for the patterns to work with the Bar series.

I've added it to the public tracker:
http://bugs.teechart.net/show_bug.cgi?id=831
Feel free to add your mail to the CC list to be automatically notified when an update arrives.
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

Jim Green
Newbie
Newbie
Posts: 43
Joined: Thu Aug 03, 2006 12:00 am

Re: Gradients and colorEachPoint

Post by Jim Green » Wed Jul 09, 2014 2:32 pm

Thanks. I'll look for some alternatives to patterns (wasn't wild about them anyway).

Post Reply