Graph Maker


Graph maker allows a user to place graphs on a wiki page using (and requiring on the server) GD2. There are three files. (1) graphentry.php is an action that creates a form on a wiki page that allows a user to easily create a wiki action call to embed on a page so that a graph might be placed there. It provides a preview of the graph so that the user does not have to embed the code on a wiki page to see the output. (2) graph.php is the action that reads the generated code and renders the graph on the page. Both previous actions should be placed in the actions directory. (3) Both of these previous reactions rely on class.graphic.php which should be renamed "graphmaker.php" and placed in a directory called scripts in the wiki root (no other alterations are necessary). http://gmbtst.msvu.ca/wikitest/graphmaker.jpg

graphentry.php
<?
// graphmaker.php Version 1 -- Jan 9, 2005
// Original parts of this script were developed by G. Michael Bowen for a SSHRC research project using wikka wiki.
// This action generates graph images & code that can be placed on a wikka page to place the image there.
// REQUIRES graph.php to place the code on a page as an action AND
// REQUIRES class.graphic.php (http://www.phpclasses.org/browse/package/1993.html)
// to be renamed graphmaker.php & placed in a directory called "scripts" in the wikka root.
// REQUIRES GD2 on the server
// Parts of the code on this page derive from class.graphic.php
// Non-derivative code copyright GMBowen. Released to public domain under GPL. Modify, improve, change as you wish.
// NOTE that implementation may require the value "16" to be changed 6 lines down.
// TODO - a save feature is forthcoming, "if" statements to reduce code output to only parameters with data

$site_base = $this->GetConfigValue("base_url");
// The CODE LINE below is assuming that your statement LIKE wakka.php?wakka= in the config file is 16 characters long
// IF IT IS NOT 16 CHARACTERS LONG, then count the characters & replace the 16 in the line below.
$site_base = substr($site_base,0,-16);
$site_base = $site_base."scripts/";
$url = $site_base."graphmaker.php";

$grftitle = $_POST["title"];
$xaxis = $_POST["axis_x"];
$yaxis = $_POST["axis_y"];
$vartitle1 = $_POST["graphic_1"];
$vartitle2 = $_POST["graphic_2"];
$grftype = $_POST["type"];
$grfskin = $_POST["skin"];
$grphc2val = $_POST["graphic_2_values"];
$grfx0 = $_POST["x0"];
$grfy0 = $_POST["y0"];
$grfz0 = $_POST["z0"];
$grfx = array($_POST[x0], $_POST[x1], $_POST[x2], $_POST[x3], $_POST[x4], $_POST[x5], $_POST[x6], $_POST[x7], $_POST[x8], $_POST[x9], $_POST[x10], $_POST[x11], $_POST[x12], $_POST[x13], $_POST[x14], $_POST[x15], $_POST[x16], $_POST[x17], $_POST[x18], $_POST[x19]);
$grfy = array($_POST[y0], $_POST[y1], $_POST[y2], $_POST[y3], $_POST[y4], $_POST[y5], $_POST[y6], $_POST[y7], $_POST[y8], $_POST[y9], $_POST[y10], $_POST[y11], $_POST[y12], $_POST[y13], $_POST[y14], $_POST[y15], $_POST[y16], $_POST[y17], $_POST[y18], $_POST[y19]);
$grfz = array($_POST[z0], $_POST[z1], $_POST[z2], $_POST[z3], $_POST[z4], $_POST[z5], $_POST[z6], $_POST[z7], $_POST[z8], $_POST[z9], $_POST[z10], $_POST[z11], $_POST[z12], $_POST[z13], $_POST[z14], $_POST[z15], $_POST[z16], $_POST[z17], $_POST[z18], $_POST[z19]);
$numrowsx = $_POST["amountofdata"];
if (empty($numrowsx)) {$numrowsx=9;}
$numcolsx = $_POST["numcols"];
if (empty($numcolsx)) {$numcolsx=1;}
if ($numcolsx==1){$_POST[z0]=""; $_POST[z1]=""; $_POST[z2]="";  $_POST[z3]=""; $_POST[z4]=""; $_POST[z5]=""; $_POST[z6]=""; $_POST[z7]=""; $_POST[z8]=""; $_POST[z9]=""; $_POST[z10]=""; $_POST[z11]=""; $_POST[z12]=""; $_POST[z13]=""; $_POST[z14]=""; $_POST[z15]=""; $_POST[z16]=""; $_POST[z17]=""; $_POST[z18]=""; $_POST[z19]="";}
$urlstrng="title=".$grftitle."&axis_x=".$xaxis."&axis_y=".$yaxis."&graphic_1=".$vartitle1."&graphic_2=".$vartitle2
    ."&type=".$grftype."&skin=".$grfskin."&graphic_2_values=".$grphc2val."&x0=".$_POST[x0]."&x1=".$_POST[x1]."&x2=".$_POST[x2]
    ."&x3=".$_POST[x3]."&x4=".$_POST[x4]."&x5=".$_POST[x5]."&x6=".$_POST[x6]."&x7=".$_POST[x7]."&x8=".$_POST[x8]."&x9=".$_POST[x9]
    ."&x10=".$_POST[x10]."&x11=".$_POST[x11]."&x12=".$_POST[x12]."&x13=".$_POST[x13]."&x14=".$_POST[x14]."&x15=".$_POST[x15]
    ."&x16=".$_POST[x16]."&x17=".$_POST[x17]."&x18=".$_POST[x18]."&x19=".$_POST[x19]."&y0=".$_POST[y0]."&y1=".$_POST[y1]
    ."&y2=".$_POST[y2]."&y3=".$_POST[y3]."&y4=".$_POST[y4]."&y5=".$_POST[y5]."&y6=".$_POST[y6]."&y7=".$_POST[y7]."&y8=".$_POST[y8]
    ."&y9=".$_POST[y9]."&y10=".$_POST[y10]."&y11=".$_POST[y11]."&y12=".$_POST[y12]."&y13=".$_POST[y13]."&y14=".$_POST[y14]
    ."&y15=".$_POST[y15]."&y16=".$_POST[y16]."&y17=".$_POST[y17]."&y18=".$_POST[y18]."&y19=".$_POST[y19]."&z0=".$_POST[z0]
    ."&z1=".$_POST[z1]."&z2=".$_POST[z2]."&z3=".$_POST[z3]."&z4=".$_POST[z4]."&z5=".$_POST[z5]."&z6=".$_POST[z6]."&z7=".$_POST[z7]
    ."&z8=".$_POST[z8]."&z9=".$_POST[z9]."&z10=".$_POST[z10]."&z11=".$_POST[z11]."&z12=".$_POST[z12]."&z13=".$_POST[z13]
    ."&z14=".$_POST[z14]."&z15=".$_POST[z15]."&z16=".$_POST[z16]."&z17=".$_POST[z17]."&z18=".$_POST[z18]."&z19=".$_POST[z19];
?>
<style type="text/css">
<!--

table {
    font-size: 14px;
    font-family: verdana;
    color: #666666;
}
input, select {
    font-size: 12px;
    font-family: verdana;
    color: #333333;
    border: 1px solid #aaaaaa;
}

-->
</style>
<script type="text/javascript">
<!--
function numbers() {
    key = event.keyCode;
    if ((key >= 48 && key <= 57) || key == 46 || key == 13) { return true; } else { return false; }
}
//-->
</script>
<FORM ACTION="" METHOD=POST name="form_data" id="form_data">
   <P><TABLE BORDER=0>
      <TR>
         <TD WIDTH=334>
            <P># of data sets: 5
            <INPUT TYPE=radio NAME=amountofdata VALUE=4 <? if (($numrowsx==4)||($numrowsx=="")){echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;10<INPUT TYPE=radio NAME=amountofdata VALUE=9 <? if ($numrowsx==9) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;15<INPUT TYPE=radio NAME=amountofdata VALUE=14 <? if ($numrowsx==14) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;20<INPUT TYPE=radio NAME=amountofdata VALUE=19 <? if ($numrowsx==19) {echo "CHECKED";} ?> style="border-width: 0px;">
            &nbsp;<BR># of columns of data: 1 column<INPUT TYPE=radio NAME=numcols VALUE=1 <? if (($numcolsx==1)||($numcolsx=="")) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;2 columns<INPUT TYPE=radio NAME=numcols VALUE=2 <? if ($numcolsx==2) {echo "CHECKED";} ?> style="border-width: 0px;"></P>
         </TD></TR><TR>
         <TD>
            <P><INPUT TYPE=submit NAME=dataform VALUE="Submit table rules" style="cursor: pointer; margin: 10px 0px 0px 60px;"></P>
         </TD>
      </TR>
   </TABLE>
<br>
<table><tr><td ROWSPAN=2 valign="top">
  <div style="margin-bottom: 10px;">
    Title: <input type="text" name="title" id="title" size="30" value="<? echo $grftitle; ?>" style="margin: 0px 0px 0px 11px;" />
  </div>
  Axis X: <input type="text" value="<? echo $xaxis; ?>" name="axis_x" id="axis_x" size="30" /> <br />
  Axis Y: <input type="text" value="<? echo $yaxis; ?>" name="axis_y" id="axis_y" size="30" /> <br />

  <div style="margin: 10px 0px 10px 0px;">
    Variable 1: <input type="text" name="graphic_1" value="<? echo $vartitle1; ?>" id="graphic_1" style="width: 172px;" /> <br />
    Variable 2: <input type="text" name="graphic_2" value="<? echo $vartitle2; ?>" id="graphic_2" style="width: 172px;" /> <br />
  </div>

Type: Vertical Bars <INPUT TYPE=radio NAME=type VALUE=1 <? if (($grftype==1)||($grftype=="")){echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;Horizontal Bars<INPUT TYPE=radio NAME=type VALUE=2 <? if ($grftype==2) {echo "CHECKED";} ?> style="border-width: 0px;"><br>&nbsp;&nbsp;Dots<INPUT TYPE=radio NAME=type VALUE=3 <? if ($grftype==3) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;Lines<INPUT TYPE=radio NAME=type VALUE=4 <? if ($grftype==4) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;Pie<INPUT TYPE=radio NAME=type VALUE=5 <? if ($grftype==5) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;Donut<INPUT TYPE=radio NAME=type VALUE=6 <? if ($grftype==6) {echo "CHECKED";} ?> style="border-width: 0px;"><br \>
<!--            <OPTION VALUE=1>Vertical Bars
            <OPTION VALUE=2>Horizontal Bars
            <OPTION VALUE=3>Dots
            <OPTION VALUE=4>Lines
            <OPTION VALUE=5>Pie
            <OPTION VALUE=6>Donut</select> <br />
-->
Color:&nbsp;Office<INPUT TYPE=radio NAME=skin VALUE=1 <? if (($grfskin==1)||($grfskin=="")) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;Matrix<INPUT TYPE=radio NAME=skin VALUE=2 <? if ($grfskin==2) {echo "CHECKED";} ?> style="border-width: 0px;">&nbsp;&nbsp;Spring<INPUT TYPE=radio NAME=skin VALUE=3 <? if ($grfskin==3) {echo "CHECKED";} ?> style="border-width: 0px;"><br \>

<!--<select name="skin" id="skin">;
   <OPTION VALUE=1>Office
   <OPTION VALUE=2>Matrix
   <OPTION VALUE=3>Spring
</select>
-->
<? echo '

  <div style="margin-top: 20px;" id="parameters">
    <span style="margin-left: 30px;">Label</span>
    <span style="margin-left: 102px;">Variable 1</span>'
;
if ($numcolsx==2) {echo '<span id="value_2" style="margin-left: 15px;">Variable 2</span>';}
       for ($i = 0; $i <= $numrowsx; $i++) {
            echo '<div style="margin-left: 8px;"> '.($i+1).'. <input type="text" value="'.$grfx[$i].'" name="x'.$i.'" id="x'.$i.'" size="20" /> ';
            echo ' <input type="text" name="y'.$i.'" id="y'.$i.'" size="10" value="'.$grfy[$i].'" onkeypress="return numbers();" /> ';
if ($numcolsx==2) {echo ' <input type="text" name="z'.$i.'" id="z'.$i.'" size="10" value="'.$grfz[$i].'" onkeypress="return numbers();" />';}
         echo '</div>';
        }

echo ' <input type="submit" value="Create Graph" style="cursor: pointer; margin: 10px 0px 0px 60px;" /></form>';
?>
</td>
<td valign="top" TD HEIGHT="220">
<?
$urlstrng = trim($urlstrng); // Get rid of space on left/right side if any
$urlstrng = str_replace(' ', ' ', $urlstrng); // Make a double space a single space (just in case)
$urlstrng = str_replace(' ', '+', $urlstrng); // Make a single space a '+'
if(((!empty($_POST[y0]))||(!empty($_POST[z0])))&&(!empty($_POST[x0]))) {print "<img src=".$url."?".$urlstrng.">";}
?>
</td>
</tr>
<TR><TD valign="top">
<? if(((!empty($_POST[y0]))||(!empty($_POST[z0])))&&(!empty($_POST[x0]))) {$enterstrng="{{graph&nbsp;code=\"".$urlstrng."\"}}";} else {$urlstrng="";}
?>
<TEXTAREA NAME=codeoutput ROWS=11 COLS=65 WRAP=virtual value="5"><? echo $enterstrng; ?> </TEXTAREA><br>
Copy & paste this code into your wiki page to have this graph appear on that page.<br>
</TD
</tr></table>

    1. All input seems to be accepted without any kind of validation (security risk!)
    1. You don't seem to be using the class (which provides a method to generate the form) at all.
    1. You cannot embed a stylesheet in the body of a page.
    1. The code for the form isn't XHTML-compliant (form and table code): at the very least all tags and attributes need to be in lowercase, all attribute values must be enclosed in quotes, and all tags must be closed (input, option, br ...)

graph.php
<?php
// graph.php Version 1 -- Jan 9, 2005
// This script was developed by G. Michael Bowen for a SSHRC research project using wikka wiki.
// Contributions by JavaWoman (I can't close tags worth a darn in php apparently)
// This action generates graph images by calling on the class.graphic.php (renamed)
// REQUIRES class.graphic.php (http://www.phpclasses.org/browse/package/1993.html)
// to be renamed graphmaker.php & placed in a directory called "scripts" in the wikka root.
// REQUIRES GD2 on the server
// Code copyright GMBowen. Released to public domain under GPL. Modify, improve, change as you wish.
echo '<img src="./scripts/graphmaker.php?'.$code.'" /><br />';
?>


REMEMBER to place a copy of class.graphic.php in a directory in wikka root called scripts after renaming the file to graphmaker.php. (you will probably have to register with phpclasses to access the file...I've not had any negative consequences arise from doing so myself)

FUTURE DEVELOPMENT: (i) a graph save feature is forthcoming in the next while (using a copy of class.graphic.php altered by its author Carlos Reche for use in wikka). (ii) "if" statements to reduce code output to only parameters which contain data. (iii) I'm considering adding code to save data to a database table so that users may re-load their code to re-factor the graph. This would necessitate another action to list a users graphs. Another, and perhaps simpler, possibility, is a parser so that code can be placed in the textbox and parsed into the data boxes. I think this latter method is almost preferable, but don't have a clue how to implement it. (iv) any alterations others deem necessary. ;)
Future plans for class.graphic.php: Carlos Reche has indicated to me in e-mail conversations that he is further developing this code so that it will accept more than two variables (columns of data) and so that it will render true scatterplots as a charting/graphing option.

{{makegraph title="The sexes" x="gender" y="number" type="horbar" skin="matrix" g1="2004" g2="2003" data="male:50:51|female:55:53|neuter:2:1" credits="1"}}
{{makegraph x="gender" y="number" g1="2004" g2="2003" data="male:50:51|female:55:53|neuter:2:1"}}

CategoryUserContributions PluginsInDevelopment
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki