Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JPGraph Table Graph Canvas Size

Status
Not open for further replies.

PCHomepage

Programmer
Feb 24, 2009
609
US
I have a simple, basic function for creating a Table graph in JPGraph, which is doing so by way of feeding it a query and it is working well. However, the number of rows and overall size of the data varies so is there some way to "measure" it to dynamically supply height and width parameters?

Code:
function TableGraph($Query, $Titles, $JPGraphPath, $FullURL, $ProcessType, $CanvasWidth='742', $CanvasHeight='150', $mysqli) {
	require_once ($JPGraphPath."/jpgraph.php");
	require_once ($JPGraphPath."/jpgraph_canvas.php");
	require_once ($JPGraphPath."/jpgraph_table.php");

	if ($result = $mysqli->query("$Query")):
		$data[] = $Titles;
		while ($row = $result->fetch_array()):
			$data[] = $row;
		endwhile;
	endif;
	
	$ImageName = rand();
	$graph = new CanvasGraph($CanvasWidth,$CanvasHeight);
	//$graph->SetImgFormat('png',60);	

	$table = new GTextTable();
	$table->Set($data);
	$graph->Add($table);

	// Produce an image, display the graph
	$fileName = $JPGraphPath."/Temp/".$ImageName.".png";	
	$graph->Stroke($fileName); // Creates image file

	$OutputImage = "<div class=\"ImageGraph\">\n";
	$OutputImage .= "<img src=\"$FullURL/jpgraph/Temp/".$ImageName.".png\">\n";
	$OutputImage .= "</div>\n\n";

	echo $OutputImage;
}
 
Sure

Code:
[b][COLOR=#0000FF]function[/color][/b] [b][COLOR=#000000]TableGraph[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$Query[/color][COLOR=#990000],[/color] [COLOR=#009900]$Titles[/color][COLOR=#990000],[/color] [COLOR=#009900]$JPGraphPath[/color][COLOR=#990000],[/color] [COLOR=#009900]$FullURL[/color][COLOR=#990000],[/color] [COLOR=#009900]$ProcessType[/color][COLOR=#990000],[/color] [COLOR=#009900]$CanvasWidth[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'742'[/color][COLOR=#990000],[/color] [COLOR=#009900]$CanvasHeight[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'150'[/color][COLOR=#990000],[/color] [COLOR=#009900]$mysqli[/color][COLOR=#990000])[/color] [COLOR=#FF0000]{[/color]
[tab][b][COLOR=#000080]require_once[/color][/b] [COLOR=#990000]([/color][COLOR=#009900]$JPGraphPath[/color][COLOR=#990000].[/color][COLOR=#FF0000]"/jpgraph.php"[/color][COLOR=#990000]);[/color]
[tab][b][COLOR=#000080]require_once[/color][/b] [COLOR=#990000]([/color][COLOR=#009900]$JPGraphPath[/color][COLOR=#990000].[/color][COLOR=#FF0000]"/jpgraph_canvas.php"[/color][COLOR=#990000]);[/color]
[tab][b][COLOR=#000080]require_once[/color][/b] [COLOR=#990000]([/color][COLOR=#009900]$JPGraphPath[/color][COLOR=#990000].[/color][COLOR=#FF0000]"/jpgraph_table.php"[/color][COLOR=#990000]);[/color]

[tab][b][COLOR=#0000FF]if[/color][/b] [COLOR=#990000]([/color][COLOR=#009900]$result[/color] [COLOR=#990000]=[/color] [COLOR=#009900]$mysqli[/color][COLOR=#990000]->[/color][b][COLOR=#000000]query[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]"$Query"[/color][COLOR=#990000])):[/color]
[tab][tab][COLOR=#009900]$data[/color][COLOR=#990000][][/color] [COLOR=#990000]=[/color] [COLOR=#009900]$Titles[/color][COLOR=#990000];[/color]
[tab][tab][b][COLOR=#0000FF]while[/color][/b] [COLOR=#990000]([/color][COLOR=#009900]$row[/color] [COLOR=#990000]=[/color] [COLOR=#009900]$result[/color][COLOR=#990000]->[/color][b][COLOR=#000000]fetch_array[/color][/b][COLOR=#990000]()):[/color]
[tab][tab][tab][COLOR=#009900]$data[/color][COLOR=#990000][][/color] [COLOR=#990000]=[/color] [COLOR=#009900]$row[/color][COLOR=#990000];[/color]
[tab][tab][b][COLOR=#0000FF]endwhile[/color][/b][COLOR=#990000];[/color]
[tab][b][COLOR=#0000FF]endif[/color][/b][COLOR=#990000];[/color]

[tab][COLOR=#009900]$numRows[/color] [COLOR=#990000]=[/color] [b][COLOR=#000000]count[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$data[/color][COLOR=#990000]);[/color]
[tab][tab][COLOR=#009900]$numCols[/color] [COLOR=#990000]=[/color] [b][COLOR=#000000]count[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$data[/color][COLOR=#990000][[/color][COLOR=#993399]0[/color][COLOR=#990000]]);[/color]

[tab][COLOR=#009900]$ImageName[/color] [COLOR=#990000]=[/color] [b][COLOR=#000000]rand[/color][/b][COLOR=#990000]();[/color]
[tab][COLOR=#009900]$graph[/color] [COLOR=#990000]=[/color] [b][COLOR=#0000FF]new[/color][/b] [b][COLOR=#000000]CanvasGraph[/color][/b][COLOR=#990000]([/color][b][COLOR=#000000]ceil[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$numCols[/color] [COLOR=#990000]*[/color] [COLOR=#009900]$colsWidth[/color][COLOR=#990000]),[/color][b][COLOR=#000000]ceil[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$numRows[/color] [COLOR=#990000]*[/color] [COLOR=#009900]$colsHeight[/color][COLOR=#990000]));[/color]
[tab][i][COLOR=#9A1900]//$graph->SetImgFormat('png',60);   [/color][/i]
[tab]   
[tab][COLOR=#009900]$table[/color] [COLOR=#990000]=[/color] [b][COLOR=#0000FF]new[/color][/b] [b][COLOR=#000000]GTextTable[/color][/b][COLOR=#990000]();[/color]

[tab][tab][COLOR=#009900]$table[/color][COLOR=#990000]->[/color][b][COLOR=#000000]init[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$numRows[/color][COLOR=#990000],[/color] [COLOR=#009900]$numCols[/color][COLOR=#990000]);[/color]

[tab][COLOR=#009900]$table[/color][COLOR=#990000]->[/color][b][COLOR=#000000]Set[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$data[/color][COLOR=#990000]);[/color]
[tab][COLOR=#009900]$graph[/color][COLOR=#990000]->[/color][b][COLOR=#000000]Add[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$table[/color][COLOR=#990000]);[/color]

[tab][i][COLOR=#9A1900]// Produce an image, display the graph[/color][/i]
[tab][COLOR=#009900]$fileName[/color] [COLOR=#990000]=[/color] [COLOR=#009900]$JPGraphPath[/color][COLOR=#990000].[/color][COLOR=#FF0000]"/Temp/"[/color][COLOR=#990000].[/color][COLOR=#009900]$ImageName[/color][COLOR=#990000].[/color][COLOR=#FF0000]".png"[/color][COLOR=#990000];[/color][tab]
[tab][COLOR=#009900]$graph[/color][COLOR=#990000]->[/color][b][COLOR=#000000]Stroke[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$fileName[/color][COLOR=#990000]);[/color] [i][COLOR=#9A1900]// Creates image file[/color][/i]

[tab][COLOR=#009900]$OutputImage[/color] [COLOR=#990000]=[/color] [COLOR=#FF0000]"<div class=\"ImageGraph\">\n"[/color][COLOR=#990000];[/color]
[tab][COLOR=#009900]$OutputImage[/color] [COLOR=#990000].=[/color] [COLOR=#FF0000]"<img src=\"$FullURL/jpgraph/Temp/"[/color][COLOR=#990000].[/color][COLOR=#009900]$ImageName[/color][COLOR=#990000].[/color][COLOR=#FF0000]".png\">\n"[/color][COLOR=#990000];[/color]
[tab][COLOR=#009900]$OutputImage[/color] [COLOR=#990000].=[/color] [COLOR=#FF0000]"</div>\n\n"[/color][COLOR=#990000];[/color]

[tab][b][COLOR=#0000FF]echo[/color][/b] [COLOR=#009900]$OutputImage[/color][COLOR=#990000];[/color]
[COLOR=#FF0000]}[/color]
 
This looks like it's exactly what I need but JPGraph gives errors as there is nothing defining $colsWidth and $colsHeight. Where are these variables coming from? Thanks.
 
I just realized that perhaps $colsWidth and $colsHeight were supplosed to be $CanvasWidth and $CanvasHeight but if so, it defeats the purpose because I want it to create the proper sizes automatically and not need it fed into the function. Thanks.
 
nope. you need to add them.

e.g

Code:
$colsWidth = $colsHeight = 10;
 
I don't quite follow, then, what it is supposed to do to size itself automatically. If I give the value as 10, then the graph has only small portion of the first column but if I give it 100, it shows the whole thing and some additional empty cells. It is the empty cells that I am trying to elimate so is there a way to do that dynamically? I confirmed that $numRows and $numCols are supplying the proper values.

PHP:
function TableGraph($Query, $Titles, $JPGraphPath, $FullURL, $Size, $mysqli) {
    require_once ($JPGraphPath."/jpgraph.php");
    require_once ($JPGraphPath."/jpgraph_canvas.php");
    require_once ($JPGraphPath."/jpgraph_table.php");

    if ($result = $mysqli->query("$Query")):
        $data[] = $Titles;
        while ($row = $result->fetch_array()):
            $data[] = $row;
        endwhile;
    endif;

    $numRows = count($data);
    $numCols = count($data[0]);

	$colsWidth = $colsHeight = $Size;

    $ImageName = rand();
    $graph = new CanvasGraph(ceil($numCols * $colsWidth),ceil($numRows * $colsHeight));
    $graph->SetImgFormat('png',60);   
       
    $table = new GTextTable();

    $table->init($numRows, $numCols);

    $table->Set($data);
    $graph->Add($table);

    // Produce an image, display the graph
    $fileName = $JPGraphPath."/Temp/".$ImageName.".png";    
    $graph->Stroke($fileName); // Creates image file

    $OutputImage = "<div class=\"ImageGraph\">\n";
    $OutputImage .= "<img src=\"$FullURL/jpgraph/Temp/".$ImageName.".png\">\n";
    $OutputImage .= "</div>\n\n";

    echo $OutputImage;
} 
 
TableGraph($Query, $Titles, $JPGraphPath, $FullURL, $Size=100, $mysqli);
 
I think that the question you posed in the first post was answered. Perhaps that was not the question you wanted to ask.

Do you want the cell size or the canvas size to be important? Ie should the canvas resize to accommodate the cells given height and width, or should the cells shrink/grow to fill the canvas?

And can you explain why you are using jpgraph to produce a table when there HTML has tables built within its schema?
 
I want the graph size (both the canvas and the table graph) to match the data going into it which might be a single row (with headers) or it might be a dozen rows and it has a varying number of columns. I've indicated in the graph what size the fonts should be and I want the graph to be sized appropriately so that it has the proper cells and no extra unused white space (or, if I could tell it a width to be, it could size the font appropriately). Can that be done?

To answer your question, I was asked to do it as a graphic that could be saved for use in reports but even so, I rarely use HTML tags and in particular not tables.
 
if you just want a graphic, then it would perhaps be better to render html and then use an htmltopng command line function to create the graphic. much more flexible that way.

however you have not answered my question. do you want:

1. to specify cell size and have the canvas dynamically adjusted
2. to specify canvas size and have the cells dynamically adjusted.

You could have both, of course. and then use parameters in the <img> tag to scale the image down to a given size (pixel or relative or em etc). But this would be rather wasteful.

 
I actually don't want to have to specify either one. The data in the different fields varies with the first column being long because it contains a file name. The canvas, cells and graph need to size themselves automatically in field size and every other way. I would like to force it to 800px wide but that is not absolutely necessary. "It" refers to both the canvas and the table in it.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top