Steema Central

Posted: **Wed May 18, 2016 3:02 pm**

I'm trying to create transparent "highlight" bands on my chart to show important times.
Bottom axis is a datetime axis.
I have two issues --

#1) The Custom_Paint.htm example only draws one band and I need to draw multiple how would I draw multiples?
#2) How do I map a date onto the bottom axis to get the x1, x2 variables?

Thanks in advance for your help.
Joseph

Custom Pain Example:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Custom Canvas Painting Example</title>

<!--[if lt IE 9]>
    <script src="../../src/excanvas/excanvas_text.js"></script>
    <script src="../../src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="../../src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">

var Chart1;

function draw() {
  Chart1=new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Line([50,30,20,70,10,60,40,50,10,0,100]) ).format.stroke.size=4;

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

  Chart1.ondraw=function() {

    var x1 = Chart1.axes.bottom.calc(4), //what if this is a date value?
        y1 = Chart1.axes.left.calc(70),
        x2 = Chart1.axes.bottom.calc(7),// what if this is a date value?
        y2 = Chart1.axes.left.calc(40);

    // X,Y, Width, Height

    myFormat.rectangle(x1,y1, x2-x1, y2-y1);

  }

  Chart1.draw();
}

</script>
</head>
<body onload="draw()">

<canvas id="canvas" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</body>
</html>

Posted: **Thu May 19, 2016 9:34 am**

Hello,

First of all note the Custom Paint example in the demo draws a rectangle/shape. Here I modified it to draw an horizontal ColorBand:
http://www.teechart.net/support/viewtop ... 043#p71201

Taking that as a reference, I've modified the example to use datetime values for the bottom axis, and to draw two vertical ColorBands.
Note I've used slightly different approaches to draw them. The fist one uses a gradient and series values as x1 and x2; the second uses a single color and directly datetimes to calulcate x1 and x2:

Code: Select all

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

: chrome_2016-05-19_11-34-25.png (66.69 KiB) Viewed 49732 times

Posted: **Thu May 19, 2016 4:45 pm**

Wow! Perfect! Yeray thanks so much!!!

Posted: **Fri May 20, 2016 8:57 am**

jzarech wrote:Wow! Perfect! Yeray thanks so much!!!

You are welcome, Joseph!

Posted: **Wed Jun 17, 2020 7:44 am**

Hi Steema
After searching quite some time, I found this post which fulfill my needs.

However - it's written i C-language.

Is it possible to translate the code solution into Delphi?

Br.
Anders Balslev

Posted: **Tue Jun 23, 2020 8:14 am**

Thread moved to VCL forum. (I see that the issue has already been posted there too).

Steema Central

Draw Multiple Transparent Bands with DateTime Bottom Axis

Draw Multiple Transparent Bands with DateTime Bottom Axis

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis