JPGraph Table Graph Canvas Size

PCHomepage · Aug 15, 2012

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;
}

jpadie · Aug 16, 2012

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]

PCHomepage · Aug 16, 2012

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.

PCHomepage · Aug 16, 2012

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.

jpadie · Aug 16, 2012

nope. you need to add them.

e.g

Code:

$colsWidth = $colsHeight = 10;

PCHomepage · Aug 16, 2012

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);

jpadie · Aug 16, 2012

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?

PCHomepage · Aug 16, 2012

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.

jpadie · Aug 17, 2012

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.

PCHomepage · Aug 17, 2012

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.

jpadie · Aug 17, 2012

you cannot.

the sizing is done automatically unless you mandate it.
the best you can do is specify minimum row height and minimum column width

see further

http://jpgraph.net/doc/howto7.php

my advice is to use html and render it. see wkhtmltoimage:

http://code.google.com/p/wkhtmltopdf/downloads/list

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!

JPGraph Table Graph Canvas Size

PCHomepage

Programmer

jpadie

Technical User

PCHomepage

Programmer

PCHomepage

Programmer

jpadie

Technical User

PCHomepage

Programmer

jpadie

Technical User

PCHomepage

Programmer

jpadie

Technical User

PCHomepage

Programmer

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor