Search code examples
javascripthtmlteechart

Draw rectangle on HTML 5 / Javascript Teechart

I need to draw vertical and horizontal rectangle / bands (like in Gantt charts) on the HTML 5 / JavaScript Tee charts.

I could draw a rectangle using the Bar series as below but I want the rectangle to float on a particular XY cor-ordinate rather standing from the x axis. 

var series1 = new Tee.Bar();
                     series1.data.values = [30000];
                     //alert(" openValues[y] "+ openValues[y] + " closeValues[y]  "+ closeValues[y] );
                     series1.data.x = [ (openValues[y] + closeValues[y]) /2 ];
                     series1.format.shadow.visible = false;
                     series1.format.lineCap = "round";
                     series1.format.stroke.fill = "#D3D3D3";
                     series1.format.stroke.size = .5;
                     series1.colorEach = "auto";
                     series1.format.join = "round";
                     series1.format.cap = "square";
                     series1.format.fill="#F8F8FF";
                     series1.barSize=100000;
                     //series1.format.transparent =1;
                     series1.color = "silver";
                     series1.marks.visible = false;
                     //series1.hover.shadow =false;
                     series1.hover.stroke.size =.01;
                     Chart1.addSeries(series1);

Is it possible to just draw a rectangle using HTML 5 / Javascript Teecharts. I want to to draw rectangles like in gantt chart with specific x1,y1,x2 and y2 values.

I tried using the Format Object in Teecharts but it didn't help

Chart1.panel.format.rectPath(20,20,30,40);

Solution

  • The next TeeChart Javascript v1.1 will incude the Gantt Series. Here it is the demo: http://www.steema.us/files/jscript/demos/series/gantt/gantt.htm

    We'll be glad to hear any comment about it.

    Steema Support Central