Hello!
Currently, I have a php form with various inputs, and a div where I am embedding an (initially) empty open flash chart object, here is the code for that (sorry it is so lengthy, I am using Jquery for sliders and the code for the chart is also rather lengthy):
Code:
<?php
//
// This is the code used to make the chart object:
//
include 'includes/ofc2/php-ofc-library/open-flash-chart.php';
$IinMinutes = array();
$avgExpectedTime = array();
$IinMinutes[] = '1983'; $avgExpectedTime[] = 36.7;
$IinMinutes[] = '1984'; $avgExpectedTime[] = 38.7;
$IinMinutes[] = '2008'; $avgExpectedTime[] = 103.9;
$chart = new open_flash_chart();
$d = new solid_dot();
$d->size(2)->halo_size(1)->colour('#80B646');
$area = new area();
$area->set_colour( '#2191c0' );
$area->set_values( $avgExpectedTime );
$area->set_default_dot_style( $d );
$chart->add_element( $area );
$x = new x_axis();
$x->set_steps( 4 );
$x->set_labels_from_array( $IinMinutes );
$chart->set_x_axis( $x );
$y = new y_axis();
$y->set_range( 0, 150, 30 );
$chart->add_y_axis( $y );
$chart->set_bg_colour( '#FCFDFD' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- ** Print the header data and include all our JQuery files ** -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web CFTSim</title>
<link type="text/css" href="includes/development-bundle/demos/demos.css" rel="stylesheet" />
<link type="text/css" href="includes/css/start/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="includes/development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="includes/js/formPlugin/jquery.field.js"></script>
<script type="text/javascript" src="includes/js/formPlugin/jquery.field.min.js"></script>
<script type="text/javascript" src="includes/development-bundle/external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript" src="includes/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="includes/development-bundle/ui/ui.draggable.js"></script>
<script type="text/javascript" src="includes/development-bundle/ui/ui.resizable.js"></script>
<script type="text/javascript" src="includes/development-bundle/ui/ui.dialog.js"></script>
<script type="text/javascript" src="includes/development-bundle/ui/ui.slider.js"></script>
<script type="text/javascript" src="includes/js/ofchart/json/json2.js"></script>
<script type="text/javascript" src="includes/js/ofchart/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "425", "250", "9.0.0");
</script>
<script type="text/javascript">
function open_flash_chart_data()
{
return JSON.stringify(data);
}
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
}
var data = <?php echo $chart->toPrettyString(); ?>;
// Prevent Jquery from conflicting with prototype
jQuery.noConflict();
jQuery.ui.dialog.defaults.bgiframe = true;
jQuery(document).ready(function(){
jQuery("#NFixedSlider").slider(
{
min: 0,
max: 100,
change: function(e, ui)
{
// Get slider value as a string
var currentNum = jQuery("#NFixedSlider").slider("value") + "";
// Split off decimal portion
var a = currentNum.split(".");
var i = document.getElementById("fixedNDisplay");
i.innerHTML = a[0];
jQuery("input[name='fixedN']").setValue(a[0]);
}
});
});
</script>
</head>
<body>
<!-- Here is the actual form -->
<div id = "checkpointDiv" style="width: 90%; margin-right: auto; margin-left: auto;">
<h3>Enter arguments for the simulator below:</h3>
<form action="args.php" method="post" name="checkpointForm">
<input type = "hidden" name = "formType" value = "checkpoint" />
Select an input set<br />
<?php
echo "<select name = 'inputSet' class='ui-state-default ui-corner-all select'>";
$inputConfig = "./inputConf.txt";
$fh = fopen($inputConfig, "r"); // Open the Input Config file for reading
$opt = fgets($fh); // Read the line corresponding to the option
while( !feof($fh) ) { // For each of the possible inputs within the config
parse_str($opt); // Parse the string returned
echo "<option value='" . $val . "'>" . $disp . "</option>"; // And print an option line for it
$opt = fgets($fh); // Read the line corresponding to the option
}
?>
</select><br /><br />
<table border=0>
<tr><td style="padding-right: 1em;">Specify N</td>
</table>
<input type="hidden" id="Ntype" name="Ntype" value="fixed">
<div id="N0" class="sliderDiv">
<div id="fixedNDisplay">No value for N currently selected.</div>
<input type="hidden" id="fixedN" name="fixedN" value="">
<div id='NFixedSlider' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>
</div>
</div>
<table border = 0 width = 90%><tr><td><center><input type="submit" class="ui-state-default ui-corner-all" value = "Run Checkpoint CFT"></center></td></tr></table>
</form>
</div>
</div>
<!-- Here is the chart div -->
<center><div id="my_chart" style="width:100%; margin-left: auto; margin-right: auto;"></div>
</center>
</body>
</html>
Right now, I am calling a php file on the submit of the form, which takes the form data, calls a python script to process the form data, and then creates another open flash chart object using the data the python script returns. Here is that file:
Code:
<?php
include 'includes/ofc2/php-ofc-library/open-flash-chart.php';
// Get all form fields and store them in variables
$formType = $_POST["formType"];
$inputSet = explode(" ", $_POST["inputSet"]);
$dRoot = $inputSet[0];
$iDataSet = $inputSet[1];
$Ntype = $_POST["Ntype"];
if( $Ntype == "fixed" ) {
$Nstart = $_POST["fixedN"];
$Nend = "none";
}
// Make the call to the python script which will calculate the correct points for our chart
$output = shell_exec("python ../../usr/lib/cgi-bin/args.py -i " . $iDataSet . " -d " . $dRoot . " --Nstart " . $Nstart . " --Nend " . $Nend . " --formType " . $formType);
// Here is where the return data is processed into a chart and embedded in an html page
// almost identical to the previous code so I will not duplicate it here
?>
There are a few problems with this:
1. When the submit on the form is called, it goes to a different page where the chart is displayed, when I would really just like to update the contents of the chart div where I embedded the original chart on the index page.
2. The processing of the form in the python code can take some time, so what I would really like is to have the chart "check" the output of the python script periodically and update the chart each time, adding the new data points to the old ones.
I know I can do all of these things with javascript and Ajax, I just can't seem to find any tutorials or examples that are exactly what I am looking for.
Thank you!
Mercie
Dev Articles Community Forums Sponsor:
June 7th, 2009, 01:58 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
