Hello
I got an HTML form on which i simply added the map_div to contain a
line chart. line chart codes have been copied directly from the API
with no modifications. Problem is with the positioning of the map_div.
the line chart displays correctly inconsiderate of where i put the
map_div. however if i place map_div after all my other html tags, my
html form elements are "frozen", drop downs etc do not work. if i just
change the structure and put the map_div before all form elements,
everything is just fine.. but for layout purposes it does not really
suit me.. Is there something that i am missing out? or got it wrong?
Thanks for the help :)
<html>
<head> <title>Foodcrop Production & Monitoring - Reports </title>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
<!--
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 860);
data.setValue(2, 2, 580);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company
Performance'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
<table align=left border=0 >
<tr>
<td>
<form id="report1">
<fieldset> <legend>Report:</legend>
<table border=0>
<tr><td>Parameter: <select name="parameter1"
id="parameter1"
onchange="load_year(this.value,'yr1','year1'); ">
<option value="0">-- Please Select
--</option>
<option value="AH">Area Harvested
(Ha)</option>
<option value="AP">Area Planted
(Ha)</option>
<option value="P">Production
(t)</option>
</select></td>
<td>Year:<div id="yr1"><select name="year1" id="year1"> <option
value="0">- - -</option> </select>
</div></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td colspan=3><input type=button value="Show Report"
onclick='show_rep1()'></td></tr>
</table>
<div id="rep1"></div>
</fieldset>
</form>
</td>
</tr>
<tr></tr>
<tr>
<td>
<form id="report2">
<fieldset> <legend> Report:</legend>
<table border=0>
<tr><td>Parameter: <select name="parameter2"
id="parameter2"
onchange="load_year(this.value,'yr2','year2'); ">
<option value="0">-- Please Select
--</option>
<option value="AH">Area (Ha)</option>
<option value="AP">Area P (Ha)</option>
<option value="P">Tonnes (t)</option>
</select></td><td></td>
<td>Region: <select name="region" id="region">
<option value="N">North</option>
<option value="S">South</option>
</select></td></tr>
<tr><td>Month: <select name="month" id="month">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
</select></td><td></td>
<td>Year: <div id="yr2"><select name="year2"
id="year2"> <option
value="0">- -
-</option> </select> </div></td></tr>
<tr><td colspan=3><input type=button value="Show Report"
onclick='show_rep2()'></td></tr>
</table>
<div id="rep2"></div>
</fieldset>
</form>
</td>
</tr>
</table>
<!-- PLACING DIV HERE DOES NOT WORK
<div id="chart_div"></div>
-->
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
