Gradients and colorEachPoint

[Jim Green]

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]

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

[Jim Green]

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]

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.

[Jim Green]

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