Line chart map_div
17 views
Skip to first unread message
Darshana
Oct 29, 2011, 12:37:57 AM10/29/11
to Google Visualization API
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>
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>
hdufo
Oct 29, 2011, 1:51:05 AM10/29/11
to Google Visualization API
Hello,
Because i had a similar problem, can you check if you are a doctype
declaration at the beginning of your html*?
Is your problem come from with all browsers?
Sorry for my bad English.
*This solution (doctype) is not my solution...
Because i had a similar problem, can you check if you are a doctype
declaration at the beginning of your html*?
Is your problem come from with all browsers?
Sorry for my bad English.
*This solution (doctype) is not my solution...
Roni Biran
Oct 30, 2011, 4:28:13 AM10/30/11
to google-visua...@googlegroups.com
the problem is with the main table.
if you place the forms inside a div and not a table cell (just make sure that you set a width) and that's that.
the thing is that the charts API sets the div to be in relative positioning and thus sets a total width of 100% which overlaps the table itself. by placing the forms inside a div element, the chart div is placed relatively to each-other.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
asgallant
Oct 31, 2011, 8:51:43 AM10/31/11
to google-visua...@googlegroups.com
It probably isn't relevant to this problem, but, technically, putting forms inside a table is not valid HTML (unless, perhaps, the entire form is contained within a single TD).
Reply all
Reply to author
Forward
0 new messages