I haven't create any variables for the rest because I'm not sure how it'll work?
Let me copy and paste the whole code for you.
Code:
<html>
<head>
<script src="201a.js" type="text/javascript"></script>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
background: #8B8878;
color: #fff;
height: 99%;
text-align: center;
}
#container {
position: relative;
width: 760px;
margin: 7px auto;
text-align: left;
background: #8B8878;
min-height: 99%; /* this is where inheritance stops */
}
/* if you remove this then the container disappears in IE */
* html #container {
height: 99%;
}
#footer
{
position: absolute;
bottom: 0;
margin: 0 0 0 0;
padding: 0 0 10px 0;
height: auto;
width: 760px;
background: #4c4c4c;
}
#top-row
{
margin: 0 0 0 0;
padding: 0 90px 60px 90px;
width: 580px;
color: #4c4c4c;
}
</style>
<script src="201a.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowInputs()
{
var idx=document.getElementById ( "menu1" ).selectedIndex-1;
var i=0;
var valuearray = new Array ();
for (i=0;i<=idx;i++) {
var inputid = "input"+i;
if ( document.getElementById ( inputid ) != null ) {
if ( document.getElementById ( inputid ).value != "" )
valuearray[i] = document.getElementById ( inputid ).value;
}
else
valuearray[i] = "Fill in value";
}
// reset container content before adding inputs
document.getElementById('container').innerHTML = '';
for (i=0;i<=idx;i++)
{
document.getElementById('container').innerHTML += '<input type="text" id="input'+i+'" value="'+valuearray[i]+'"/><br />';
}
}
</script>
<div style="float:right; left:70%;">
<TITLE>Our Final Year Project Assignment</TITLE>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//We store the XML data as a string
var strXML = "<graph animation='0' caption='Average Marks' showNames='1'><set name='Q1' value='72' color='AFD8F8'/><set name='Q2' value='72' color='AFD8F8'/><set name='Q3' value='72' color='AFD8F8'/><set name='Q4' value='72' color='AFD8F8'/><set name='Q5' value='72' color='AFD8F8'/><set name='Q6' value='72' color='AFD8F8'/><set name='Q7' value='72' color='AFD8F8'/><set name='Q8' value='72' color='AFD8F8'/><set name='Q9' value='72' color='AFD8F8'/><set name='Q10' value='72' color='AFD8F8'/></graph>";
var currentChartSWF;
/*
* updateChart method is called, when user clicks the button
* Here, we change the chart from Column to line
*/
function updateChart(chartSWF){
if ( chartSWF == undefined )
chartSWF = currentChartSWF;
//alert ( "chartSWF "+chartSWF+" currentChartSWF "+currentChartSWF );
//alert ( "strXML "+strXML );
//Create another instance of the chart.
var chart1 = new FusionCharts(chartSWF, "chart1Id", "500", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
currentChartSWF = chartSWF;
}
function generateGraph () {
alert ( document.getElementById ( "input_field_1" ).value );
if ( document.getElementById ( "input_field_1" ).value != "" )
color = document.getElementById ( "input_field_1" ).value;
else
color = "#AFD8F8";
strXML = "<graph animation='0' caption='Average Marks' showNames='1'>";
for ( i = 0; i < document.getElementById ( "menu1" ).value; i++ ) {
var inputid = "input"+i;
strXML += "<set name='Q"+(i+1)+"' value='"+document.getElementById ( inputid ).value+"' color='"+color+"'/>";
}
strXML += "</graph>";
updateChart ();
}
function resetGraph () {
strXML = "<graph animation='0' caption='Average Marks' showNames='1'><set name='Q1' value='0' color='AFD8F8'/><set name='Q2' value='0' color='AFD8F8'/><set name='0' value='0' color='AFD8F8'/><set name='Q4' value='0' color='AFD8F8'/><set name='Q5' value='0' color='AFD8F8'/><set name='Q6' value='0' color='AFD8F8'/><set name='Q7' value='0' color='AFD8F8'/><set name='Q8' value='0' color='AFD8F8'/><set name='Q9' value='0' color='AFD8F8'/><set name='Q10' value='1' color='AFD8F8'/></graph>";
updateChart ();
}
</SCRIPT>
</div>
</head>
<body>
<div id="colorpicker201" class="colorpicker201"></div>
<br>
<br><br>
<CENTER>
<h2>Our Final Year Project Assignment</h2>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/Frontpage.swf", "chart1Id", "500", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
</script>
<BR />
<div style="float:left; width:25%;">
<form name='frmUpdate'>
<b>Type of Graph</b><br>
<select name="mydropdown">
<option value='Column' onClick="javaScript:updateChart('../../FusionCharts/Frontpage.swf');"></option>
<option value="Bar Graph" value='Column' onClick="javaScript:updateChart('../../FusionCharts/FCF_Column3D.swf');" name='btnColumn' />Bar Graph</option>
<option value="Line Graph" value='Line' onClick="javaScript:updateChart('../../FusionCharts/FCF_Line.swf');" name='btnLine' />Line Graph</option>
<option value="Pie Graph" value='Pie' onClick="javaScript:updateChart('../../FusionCharts/FCF_Pie3D.swf');" name='btnPie' />Pie Graph</option>
</select></form>
<b>No of Inputs</b><br>
<form name="form1">
<select id="menu1" name="menu1" onChange="ShowInputs()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="container"></div>
<p align='center'><input type="button" value="Generate Graph" onclick="javascript:generateGraph ( '' )"></p>
<p align='center'><input type="button" value="Reset Graph" onclick="javascript:resetGraph ( '' )"></p></form>
<form action="" onsubmit="isThatAColor(this.elements[0].value); return false;">
<div id="colorpicker201" class="colorpicker201"></div>
<input type="button" onclick="showColorGrid2('input_field_1','sample_1');" value="..."> <input type="hidden" id="input_field_1" size="9" value=""> <input type="text" id="sample_1" size="1" value="" />
<br></br>
<div id="colorpicker201" class="colorpicker201"></div>
<input type="button" onclick="showColorGrid2('input_field_2','sample_2');" value="..."> <input type="hidden" id="input_field_2" size="9" value=""> <input type="text" id="sample_2" size="1" value="" />
</div>
</form>
<div id="container"></div>
</CENTER>
<br style="clear:both;" />
</body>
</html>
LinkBack URL
About LinkBacks
document.getElementById - Help needed
Reply With Quote
Originally Posted by ferrariboy21
Hopefully you have been reading my changes and understand what I was doing.
It works for me, but is it neat? And I can;t seem to put the input box next to each other? (
)
Bookmarks