Transparent bands

[Anders Balslev]

Hi Steema
Delphi 10.3.3
TeeChart Pro v.2020.29.200113 32 bit VCL

I do not know whether my reply to an old post (2018) have been read.
The title of the post is:
Draw Multiple Transparent Bands with DateTime Bottom Axis

I do have the same problem, and I thereby found the above mentioned post as my solution
However, it's written in Java and I do not know how to translate the code into Delphi
The java code:
----------
<script type="text/javascript">

var Chart1;

function draw() {
Chart1 = new Tee.Chart("canvas1");

Chart1.legend.visible = false;
var line1 = Chart1.addSeries(new Tee.Line([50,30,20,70,10,60,40,50,10,0,100]) );
line1.format.stroke.size=4;

var oneDay = 86400000, oneHour = 60 * 60 * 1000, today = new Date().getTime();
line1.data.x = [];
for (var i=0; i<line1.count(); i++) {
line1.data.x.push(new Date(today + i * oneDay));
}

Chart1.axes.bottom.labels.dateFormat = "dd mmm";
Chart1.axes.bottom.increment = oneDay;

var myFormat1 = new Tee.Format(Chart1);
myFormat1.gradient.visible=true;
myFormat1.gradient.colors=["white","lime"];
myFormat1.transparency=0.5;

var myFormat2 = new Tee.Format(Chart1);
//myFormat1.gradient.visible=true;
myFormat2.fill="red";
myFormat2.transparency=0.2;

line1.beforeDraw=function() {

var x1 = Chart1.axes.bottom.calc(line1.data.x[2]),
y1 = Chart1.chartRect.y,
x2 = Chart1.axes.bottom.calc(line1.data.x[4]),
y2 = Chart1.chartRect.y + Chart1.chartRect.height;

// X,Y, Width, Height
myFormat1.rectangle(x1,y1, x2-x1, y2-y1);

x1 = Chart1.axes.bottom.calc(today + 7 * oneDay + 5 * oneHour),
y1 = Chart1.chartRect.y,
x2 = Chart1.axes.bottom.calc(today + 8 * oneDay + 2 * oneHour),
y2 = Chart1.chartRect.y + Chart1.chartRect.height;

// X,Y, Width, Height
myFormat2.rectangle(x1,y1, x2-x1, y2-y1);
}

Chart1.draw();
}
</script>
----------

Do you think it's possible to provide same solution in VCL (Delphi) - or - translate the Java code into Delphi

br.

Anders Balslev

[Marc]

Hello Anders,

The code is very similar in Delphi. I'm not sure exactly which part you need, but bear in mind that TeeChart VCL/FMX has a Colorband tool that may be used to plot the rectangles. If you wish to do so manually, then use the OnBeforDrawSeries event in a similar way.

eg.

Code: Select all

procedure TForm14.Chart1BeforeDrawSeries(Sender: TObject);
var x1,x2,y1,y2 : Integer;
begin
  x1 := Chart1.Axes.Bottom.CalcXPosValue(Series1.XValues[2]);
  y1 := Chart1.chartRect.Top;
  x2 := Chart1.Axes.Bottom.CalcXPosValue(Series1.XValues[4]);
  y2 := Chart1.chartRect.Top + Chart1.chartRect.height;

  Chart1.Canvas.Brush.Color := clYellow;
  Chart1.Canvas.Rectangle(Rect(x1,y1,x2,y2));
end;

Please look at the TeeChart code samples for examples of setting the Brush in different ways, etc.
https://github.com/Steema/TeeChart-VCL-samples

The tutorials include details of variations on how to draw to the Canvas:
https://www.steema.com/docs/TeeChartVCLTutorials.htm

Regards,
Marc Meumann