Draw Multiple Transparent Bands with DateTime Bottom Axis

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
jzarech
Newbie
Newbie
Posts: 46
Joined: Mon Jul 07, 2008 12:00 am

Draw Multiple Transparent Bands with DateTime Bottom Axis

Post by jzarech » 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

Image

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>

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

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Post by Yeray » 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
chrome_2016-05-19_11-34-25.png (66.69 KiB) Viewed 31476 times
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

jzarech
Newbie
Newbie
Posts: 46
Joined: Mon Jul 07, 2008 12:00 am

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Post by jzarech » Thu May 19, 2016 4:45 pm

Wow! Perfect! Yeray thanks so much!!!

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

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Post by Yeray » Fri May 20, 2016 8:57 am

jzarech wrote:Wow! Perfect! Yeray thanks so much!!!
You are welcome, Joseph! :)
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

Anders Balslev
Newbie
Newbie
Posts: 4
Joined: Fri Feb 21, 2020 12:00 am

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Post by Anders Balslev » Wed Jun 17, 2020 7:44 am

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

However - it's written i C-language.

Is it possible to translate the code solution into Delphi?

Br.
Anders Balslev

Marc
Site Admin
Site Admin
Posts: 1209
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Draw Multiple Transparent Bands with DateTime Bottom Axis

Post by Marc » Tue Jun 23, 2020 8:14 am

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

Post Reply