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>
