Graph from a drop down

Hello,

Please i need help using jpgraph or rpgraph. I am working on a php/mysql project that as to do with graphing. The issue is not to be able get both graphing solution to work or pull data from the database as i have been able to do that from their provided documentation, the issue is allowing the user to be able to query the database through a form on the page.

I have a large database with fields like ‘state’, ‘year’, ‘month’, ‘readings’, and i want the user to be able to query the db themselves so as to get the very graph they want. the form the user will see will have the four fields both on the x and y axis so that when the user select a particular year against the readings only the values of each month of that year will be displayed.

The look of the form has been attached. Really appreciate a response as i am very desperate about this now.

Many thanks.

You attachment is still pending, so here goes, this is roughly how you would generate the queries to get the data from your db, there are different methods you can use, but this is should give you the general idea.

Your form could look like this:


<form action="xxx" method=GET>
<select name=year>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>

<select name=month>
<option value="1">Jan</option>
<option value="2">Feb</option>
</select>

<input type=submit />
</form>

This would create a query string something like this:

?year=2011&month=2

Your form handler (the action set out in xxx from your form) then accesses these variables:


// use int to cast the variable to an integer
$year = (int)$_GET['year'];
$month = (int)$_GET['month'];

// do some basic filtering here
// if $year is > this year or < x years and therefore out of range
// then get rid of this user
// if month is not 1 or greater and 12 or less
// then get rid of this user

// If you got here, build the query based on those incoming variables

$sql = "select data from mytable where year  = '$year' and month = '$month'";

echo $sql;

… you then present the data in the graph, which you say you have already worked out how to do.

This is the simplest way I can think of to show you the flow between a HTML form and the query builder, clearly your final solution will be far more complex than this.

If this is still a mystery to you, then you should make some test files and practice posting data back and forth, and use var_dump($_GET) to see how the form elements behave and how their information is interpreted.

I have kept the example short, and have not shown things like:

  • using POST instead of GET method
  • how to check if variables were sent
  • how to use prepared statements to protect your db
  • error handling
  • header relocations to get rid of the user

Either show us how you get on, or ask (or search) for advice on these matters …

ps I’d favour sticking with GET because this means people can bookmark a set of data, they can share it, you can cache it, you can also look in your logfiles to find out which queries are the most popular – all of which may be irrelevant to you – but I certainly used this to great effect when I did something similar for an air quality application.

Hello, thanks for response really appreciate it. Firstly I must say i am a newbie to php and all i know presently is through associated documentation of the script/software. I have please attached the code to my html form below.

<form id="form" action="#" method="post" name="form">
<table width="50%" border="0" cellspacing="0" cellpadding="0">

<tr>
  <td colspan="6" align="center"><strong>Draw Graph</strong></td>
  </tr>
  <tr>
  <td colspan="6" align="left"><strong>X-Axis:</strong></td>
  </tr>
  <tr>
  <td width="90" align="left"><label for="state"><strong>State:</strong></label></td>
  <td width="166" align="left"><select name="state" id="state" value="">
    <option value="Select All">Select All</option>
    <option value="FCT">FCT</option>
    <option value="Abia">Abia</option>
    <option value="Adamawa">Adamawa</option>
    <option value="Akwa-Ibom">Akwa-Ibom</option>
    <option value="Anambra">Anambra</option>
    <option value="Bauchi">Bauchi</option>
    </select></td>
  <td width="94" align="left"><label for="year_of_record"><strong>Year:</strong></label></td>
  <td width="134" align="left"><select name="year_of_record" id="year_of_record" value="">
    <option value="Select All">Select All</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    </select></td>
  <td width="95" align="left"><label for="month_of_record"><strong>Month:</strong></label></td>
  <td width="210" align="left"><select name="month_of_record" id="month_of_record" value="">
  <option value="Select All">Select All</option>
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
  <option value="April">April</option>
  <option value="May">May</option>
  <option value="June">June</option>
  <option value="July">July</option>
  <option value="August">August</option>
  <option value="September">September</option>
  <option value="October">October</option>
  <option value="November">November</option>
  <option value="December">December</option>
</select></td>
</tr>
<tr>
  <td colspan="3" align="right"></td>
  <td colspan="3"></td>
</tr>

<tr>
<td colspan="3" align="right"></td>
<td colspan="3"></td>
</tr>

<tr>
  <td align="left"><label for="value_of_reading"><strong>Value of Reading:</strong></label>    </td>
  <td align="left"><input name="value_of_reading" maxlength="100" type="text" size="50" value="All Values"></td>
  <td colspan="5" align="left">&nbsp;</td>
  </tr>
<tr>
  <td colspan="3" align="right"></td>
  <td colspan="3"></td>
</tr>

<tr>
<td colspan="3" align="right"></td>
<td colspan="3"></td>
</tr>

<tr>
  <td colspan="6" align="left">&nbsp;</td>
  </tr>

<tr>  
<td colspan="6" align="left"><strong>Y-Axis:</strong></td>
  </tr>
  <tr>
  <td width="90" align="left"><label for="state"><strong>State:</strong></label></td>
  <td width="166" align="left"><select name="state" id="state" value="">
    <option value="Select All">Select All</option>
    <option value="FCT">FCT</option>
    <option value="Abia">Abia</option>
    <option value="Adamawa">Adamawa</option>
    <option value="Akwa-Ibom">Akwa-Ibom</option>
    <option value="Anambra">Anambra</option>
    <option value="Bauchi">Bauchi</option>
    </select></td>
  <td width="94" align="left"><label for="year_of_record"><strong>Year:</strong></label></td>
  <td width="134" align="left"><select name="year_of_record" id="year_of_record" value="">
    <option value="Select All">Select All</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    </select></td>
  <td width="95" align="left"><label for="month_of_record"><strong>Month:</strong></label></td>
  <td width="210" align="left"><select name="month_of_record" id="month_of_record" value="">
  <option value="** Select **">** Select **</option>
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
  <option value="April">April</option>
  <option value="May">May</option>
  <option value="June">June</option>
  <option value="July">July</option>
  <option value="August">August</option>
  <option value="September">September</option>
  <option value="October">October</option>
  <option value="November">November</option>
  <option value="December">December</option>
</select></td>
</tr>
<tr>
  <td colspan="3" align="right"></td>
  <td colspan="3"></td>
</tr>

<tr>
<td colspan="3" align="right"></td>
<td colspan="3"></td>
</tr>

<tr>
  <td align="left"><label for="value_of_reading"><strong>Value of Reading:</strong></label>    </td>
  <td align="left"><input name="value_of_reading" maxlength="100" type="text" size="50" value="All Values"></td>
  <td colspan="5" align="left">&nbsp;</td>
  </tr>

<tr>
  <td colspan="6" align="center"><input type="submit" value="Draw Graph"></td>
</tr>

</table>
</form>

Here is the current schematic of the database.


| First_Name | Last_Name | Class | State | Year | Month | Record | Marking_Scheme |

| | | | Osun | 2010 | March | 23 | Drudgery |

| | | | Edo | 2012 | April | 56 | Drudgery |

| | | | Osun | 2010 | June | 110 | Maxfield |

| | | | Niger | 2009 | July | 87 | Drudgery |

As from the schematic, there is only one database storing values for

  1. Different State
  2. Different year for each state
  3. The twelve months for each year
  4. Individual Records for each month
  5. Each record gotten with peculiar scheme

What i am hoping to achieve is a situation whereby the user can use the html form to generate a graph for a particular state and year using a particular marking_scheme whereby the graph of the months of the year against the records will be provided.

I know I have not been this explanatory from the beginning but I have been stressed of late as project submission deadline is fast approaching.

Many thanks in anticipation of your assistance.

I am stressed as well, and I don’t work for you. You should mention to your client/boss that you are not qualified to do this work and pass it on to someone who is – either that or get some books and start reading fast.

I am sorry if the earlier tone was commanding and offensive. I know you don’t work for me but please know that this is not a paid project. I am a part two student of comp. sci and this is a project given to me by my lecturer which represents 30% of the total pass mark.

Please any assistance will be greatly appreciated in any possible way I can.

Thanking you for your assistance.

Hi lanredoyes, welcome to the forums

Off Topic:

Ask the prof for a syllabus so you can plan ahead and get started on course reqs early. A lot less stress, believe me

Your form action points to itself. That could make for a big file that might be more difficult to work with, up to you.

The form looks pretty well done. I’m unfamilliar with either jpgraph or rpgraph but I imagine they’re similar to the PEAR package I’ve used.

As Cups explained, the form’s input values get sent to the handler upon submit.
The handler parses the values (and should sanitize and validate them) and passes them in a database query.
Code (somewhere, the handler?) then takes the returned values and passes them to the graph script.
The graph script generates an image and returns it.
I would use GET instead of POST, but again, up to you.
Where and how you display the graph image is also up to you, IMHO easiest would be in a window by itself.

As Cups also mentioned, do some var_dumps so you can see what’s getting passed around rather than simply trying something and being puzzled if it “doesn’t work”, it will be a big time saver in the long run.

Thanks sirs for your comments so far. @Mittineague, appreciate your advise greatly, but here in Nigeria, some lecturers believes they are demi-gods and won’t listen to any plea whatsoever.

About the project, I have been able to create a way to populate database data on the browser as in form a report whereby users can then query it and get the limited data they want on the browser through the help of some tutorials gotten.

With the graph, i then intend that the user enters the data from the query into the form themselves. However, I am having issues to get the script pull from the form. @Cups, I used the get method as suggested and without the graph script, the form is working with the exception of the textarea field.

Please i need help as to how to get this final stage to work as this is almost the final stage of my project.

Many Thanks. My code is below:


<?php
if(isset($_GET['submit']))
 {
	 $title = (int)$_GET['title']; 
     $legend = (int)$_GET['legend'];
 }
 
// content="text/plain; charset=utf-8"
// Example for use of JpGraph, 
// ljp, 01/03/01 20:32
require_once ('../jpgraph.php');
require_once ('../jpgraph_bar.php');

// We need some data
$datay=array(-0.36,0.25,-0.21,0.43,0.31,0.04,-0.23,0.031,0.29,-0.08,0.07,0.19);

// Setup the graph. 
$graph = new Graph(1000,400);	
$graph->img->SetMargin(60,150,30,50);
$graph->SetScale("textlin");
$graph->SetMarginColor("silver");
$graph->SetShadow();

// Set up the title for the graph
$graph->title->Set("$title");
$graph->title->SetFont(FF_VERDANA,FS_NORMAL,16);
$graph->title->SetColor("darkred");

// Setup font for axis
$graph->xaxis->SetFont(FF_VERDANA,FS_NORMAL,10);
$graph->yaxis->SetFont(FF_VERDANA,FS_NORMAL,10);

// Show 0 label on Y-axis (default is not to show)
$graph->yscale->ticks->SupressZeroLabel(false);

// Setup X-axis labels
$graph->xaxis->SetTickLabels($gDateLocale->GetShortMonth());
$graph->xaxis->SetLabelAngle(50);

// Set X-axis at the minimum value of Y-axis (default will be at 0)
$graph->xaxis->SetPos("min");	// "min" will position the x-axis at the minimum value of the Y-axis

// Create the bar pot
$bplot = new BarPlot($datay);
$bplot->SetWidth(0.6);
$bplot->SetLegend("$legend","blue");

// Setup color for gradient fill style 
$bplot->SetFillGradient("navy","steelblue",GRAD_MIDVER);

// Set color for the frame of each bar
$bplot->SetColor("navy");
$graph->Add($bplot);

// Finally send the graph to the browser
$graph->Stroke();
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p>
<form id="form1" name="form1" method="get" action="<?= $PHP_SELF ?>">
  <label for="title">Graph Title:</label><br/>
  <input type="text" name="title" id="title" /><br/><br/>
  <label for="legend">Graph Legend:</label><br/>
  <input type="text" name="legend" id="legend" /><br/><br/>
  <label for="values">Enter X values(seperate with comma):</label><br/>
  <textarea name="values" id="values" cols="45" rows="5"></textarea><br/><br/>
<input type="submit" name="generate" id="generate" value="Generate Graph" />
</form>
</p>
</body>
</html>

If you try

<?php
if(isset($_GET['submit']))
 {
/* For testing only */
var_dump($_GET);
/* end testing */
     $title = (int)$_GET['title'];
     $legend = (int)$_GET['legend'];
 }
.
.
.

do you see the textarea content?

Thanks very much sir, I have been able to come up with a solution. You have indeed been very helpful. I am sorry it took this long it was due to bad internet over here. Once again, thank you