Page 1 of 1

Gradients and colorEachPoint

Posted: Wed Jul 02, 2014 8:07 pm
by 9347097
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

Re: Gradients and colorEachPoint

Posted: Thu Jul 03, 2014 2:10 pm
by yeray
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;
  }

Re: Gradients and colorEachPoint

Posted: Fri Jul 04, 2014 5:44 pm
by 9347097
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.

Re: Gradients and colorEachPoint

Posted: Tue Jul 08, 2014 11:37 am
by yeray
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.

Re: Gradients and colorEachPoint

Posted: Wed Jul 09, 2014 2:32 pm
by 9347097
Thanks. I'll look for some alternatives to patterns (wasn't wild about them anyway).