How to draw table on a chart

Hi,

Can some one please point to an article or code base where I can draw a table on a chart.. I am trying to achieve something like attached image.. Both on left and right side of the chart I want to draw a table. Any input would be much appreciated.

SAMPLE%20CHART%20TEMPLATE4

Thanks,
Vinay

1 Like
3 Likes

You should use GFX to do this:
http://www.amibroker.com/guide/h_lowlevelgfx.html

You can draw Rectangles filled with Text and use two nested loops to draw a Grid.

// Function to draw TEXT or CELLs
procedure DrawBtn (Text, x1, y1, x2, y2, colorV, just)
{ 
	// Uncomment for Hollow Square to draw cell borders
	// GfxSetBkMode(1);	               		// 1:trans, 2 opaque	
	// GfxSelectStockObject( 5 );         	          // NULL brush
	// GfxSelectPen( colorGrey50, 1, 0 );	          // Draw hollow shape. Col, width, style.
	// GfxRectangle( x1, y1, x2, y2 );	
	
	GfxSelectStockObject( 5 );         
	GfxSetTextColor(colorV);
	GfxDrawText(Text, x1+3, y1, x2-3, y2, just | 4| 16| 32);
}

list1 = "S1,S2,S3,S4";								// Short name for Ticker to save chart space
Vcol = 4;											// Number of Columns
rows = 1 + StrCount( list1, "," );					// Number of Rows, equal to list1
bw = 36;											// Common width of each Cell, can adjust individually below
bh = 25;											// Height of each cell, fixed by design
XC[0] = 0;											// X Co-ord starting Pixel of Grid
YC[0] = 75;											// Y Co-ord starting pixel of Grid

for(y=0; y < rows; y++)								// Outer loop to plot ROWS
{

	// some code compute
	
	for(x=0; x < Vcol; x++)						// Inner loop to plot Columns
	{		
		just = 2;									// Select TEXT JUSTIFICATION (ALIGNMENT)
		colg = ColorRed;							// Customize colour as needed
		str1 = StrExtract( list1, y );

		// More code compute
		
		
		DrawBtn (str1 ,1 + x*bw, YC[0] + y*bh, 1 + (x+1)*bw, YC[0] + (y+1)*bh, colg, just);
		// You can figure out what above line does and all the Math in it :D
	}
}

This is not a Full copy-paste functional code but out of my personal stuff which i'm sure will give you a very good head start.

It plots some thing like this:
image

Also, checkout the very nice @Milosz one here

5 Likes

easy way… take image of excel file & use "GfxDrawImage" to paste it GfxDrawImage

2 Likes

@travick the spreadsheet-like output from that thread comes directly from AB documentation. It is not my code :wink:

I have summarized different ways of outputting text on a chart in this post:


@Fossil in this easy way you can even watch CNBC or play Pacman in AmiBroker. :grin:

Of course I don't recommend using GfxDrawImage() for streaming live Excel content. It's definitely not the most efficient way and the broadcast would be rather boring :grin:

With that amount of data it would be better to use Exploration's output or simply have an Excel in sight :wink:

4 Likes

Agreed :smiley:

It was reference to your post, missed some wordings.

The one I use is simple, I have an X x Y way with some Foreign Calls which draws a nice ticker Grid.
Good if you want to draw a lot of rows, then the loops helps.

Let OP give them all a try :stuck_out_tongue:

2 Likes

Bellow is the code which I have come up with to draw table. All the solutions proposed here was helpful in one or the other way.. So thought of posting the code what I have done for creating table so others may benefit from it. Using GfxDrawImage was an easy option but doesn't support older versions of Amibroker. Using low level graphics functions was the way to go approach.

cellheight = 20;
grid1_col1_cellwidth = 35;
grid1_col2_cellwidth = 70;
grid1_col3_cellwidth = 70;
grid1_col4_cellwidth = 35;
grid1_col5_cellwidth = 70;
grid1_col6_cellwidth = 70;
no_of_rows = 26;
start_x = 0;
start_y = 20;
GfxSelectPen( colorBlue );
for(i=1; i<=no_of_rows; i++) {
	//first cell
	GfxMoveTo( start_x, start_y + i * cellheight ); 
	GfxLineTo( grid1_col1_cellwidth, start_y + i * cellheight );
	//second cell
	GfxMoveTo( grid1_col1_cellwidth, start_y + i * cellheight  ); 
	GfxLineTo( (grid1_col1_cellwidth + grid1_col2_cellwidth), start_y + i * cellheight);
	//third cell
	GfxMoveTo( (grid1_col1_cellwidth + grid1_col2_cellwidth), start_y + i * cellheight); 
	GfxLineTo( (grid1_col1_cellwidth + grid1_col2_cellwidth + grid1_col3_cellwidth), start_y + i * cellheight  );
	//fourth cell
	GfxMoveTo( (grid1_col1_cellwidth + grid1_col2_cellwidth + grid1_col3_cellwidth), start_y + i * cellheight);
	GfxLineTo( (grid1_col1_cellwidth + grid1_col2_cellwidth + grid1_col3_cellwidth + grid1_col4_cellwidth), start_y + i * cellheight  );
	//fifth cell
	GfxMoveTo( (grid1_col1_cellwidth + grid1_col2_cellwidth + grid1_col3_cellwidth + grid1_col4_cellwidth), start_y + i * cellheight);
	GfxLineTo( (grid1_col1_cellwidth + grid1_col2_cellwidth + grid1_col3_cellwidth + grid1_col4_cellwidth + grid1_col5_cellwidth), start_y + i * cellheight  );
	//sixth cell
	GfxMoveTo( (grid1_col1_cellwidth + grid1_col2_cellwidth + grid1_col3_cellwidth + grid1_col4_cellwidth + grid1_col5_cellwidth), start_y + i * cellheight);
	GfxLineTo( (grid1_col1_cellwidth + grid1_col2_cellwidth + grid1_col3_cellwidth + grid1_col4_cellwidth + grid1_col5_cellwidth + grid1_col6_cellwidth), start_y + i * cellheight  );
}
//first vertical line
GfxMoveTo( start_x, start_y+cellheight );
GfxLineTo(start_x, start_y+cellheight*no_of_rows);
//second vertical line
GfxMoveTo( grid1_col1_cellwidth, start_y+cellheight );
GfxLineTo(grid1_col1_cellwidth, start_y+cellheight*no_of_rows);
//third vertical line
GfxMoveTo( grid1_col1_cellwidth+grid1_col2_cellwidth, start_y+cellheight );
GfxLineTo(grid1_col1_cellwidth+grid1_col2_cellwidth, start_y+cellheight*no_of_rows);
//fourth vertical line
GfxMoveTo( grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth, start_y+cellheight );
GfxLineTo(grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth, start_y+cellheight*no_of_rows);
//fifth vertical line
GfxMoveTo( grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth, start_y+cellheight );
GfxLineTo(grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth, start_y+cellheight*no_of_rows);
//sixth vertical line
GfxMoveTo( grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth+grid1_col5_cellwidth, start_y+cellheight );
GfxLineTo(grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth+grid1_col5_cellwidth, start_y+cellheight*no_of_rows);
//seventh vertical line
GfxMoveTo( grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth+grid1_col5_cellwidth+grid1_col6_cellwidth, start_y+cellheight );
GfxLineTo(grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth+grid1_col5_cellwidth+grid1_col6_cellwidth, start_y+cellheight*no_of_rows);

// write header
GfxSelectPen( colorBlue, 2 ); 
GfxSelectSolidBrush( colorBlue ); 
GfxRectangle(0, 20, grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth+grid1_col5_cellwidth+grid1_col6_cellwidth+1, 40);
GfxSelectFont("Arial Black", 10, 800 ); 
GfxSetBkColor(colorBlue);
GfxSetTextColor(colorWhite); 
GfxTextOut("GANN ANGLES", (grid1_col1_cellwidth+grid1_col2_cellwidth+grid1_col3_cellwidth+grid1_col4_cellwidth+grid1_col5_cellwidth+grid1_col6_cellwidth)/2 - 50 , 22);

This is how it looks when rendered.

table%20screenshot

5 Likes

@vinaykumar,

Good effort trying yourself!

But here is a hint...
The entire thing can be written much shorter and more flexible via looping.
(Also I have added some fixes in regards to start_x and start_y)

/// original version by vinaykumar not using loops can be found here
/// @link https://forum.amibroker.com/t/how-to-draw-table-on-a-chart/9489/8
///
/// loop version (with a few fixes) by fxshrat@gmail.com
/// @link https://forum.amibroker.com/t/how-to-draw-table-on-a-chart/9489/9
cellheight = 20;
grid1_col1_cellwidth = 35;
grid1_col2_cellwidth = 70;
grid1_col3_cellwidth = 70;
grid1_col4_cellwidth = 35;
grid1_col5_cellwidth = 70;
grid1_col6_cellwidth = 70;
//grid1_col7_cellwidth = 35;
//etc..
no_of_cols = 6;// see # of grid1_col*_cellwidth variables above!
no_of_rows = 26;
start_x = 50;
start_y = 20;

GfxSelectPen( colorBlue );
for (i=1; i<=no_of_rows; i++) {
	x1 = start_x;
	for (j=1; j<=no_of_cols; j++)
		x1 += Nz(VarGet("grid1_col"+j+"_cellwidth"));		 
	//
	y = start_y + i * cellheight;	
	GfxMoveTo( start_x, y ); 
	GfxLineTo( x1, y );
}

cellwidth = 0;
for (j=0; j<=no_of_cols; j++) {
	cellwidth += Nz(VarGet("grid1_col"+j+"_cellwidth"));
	x2 = start_x+cellwidth;
	GfxMoveTo( x2, start_y+cellheight ); 
	GfxLineTo( x2, start_y+cellheight*no_of_rows);	
}

// write header
GfxSelectPen( colorBlue, 2 ); 
GfxSelectSolidBrush( colorBlue );
GfxRectangle(start_x, start_y, start_x+cellwidth+1, start_y+cellheight);
//
GfxSelectFont("Arial Black", fntsize=10, 700 ); 
GfxSetBkColor(colorBlue);
GfxSetTextColor(colorWhite); 
GfxSetTextAlign(6|24);
GfxTextOut("GANN ANGLES", start_x+(cellwidth)/2, start_y+(cellheight+fntsize)/2);
13 Likes