marcoullis
asked on
Google multiple charts not showing... only one shows up
I have two scripts to load the image charts (radar) but only one shows up.
Any advice?
-hellenica
Any advice?
-hellenica
<table>
<tr>
<td width="300">
<div id="chart1"></div>
<div id="chart2"></div>
<script type="text/javascript">
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '-5,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: 'Congressional Scorecard'
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
</script>
</td>
<td width="300">
<script type="text/javascript">
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '-5,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
</script>
</td>
</tr></table>
ASKER
tried your suggestion, but same result.
here is the code as it stands now...
here is the code as it stands now...
<table>
<tr>
<td width="300">
<div id="chart1"></div>
<div id="chart2"></div>
<script type="text/javascript">
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '-5,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: 'Congressional Scorecard'
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
</script>
</td>
<td width="300">
<script type="text/javascript">
var queryString1 = '';
var dataUrl1 = '';
function onLoadCallback1() {
if (dataUrl1.length > 0) {
var query = new google.visualization.Query(dataUrl1);
query.setQuery(queryString1);
query.send(handleQueryResponse1);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
draw(dataTable);
}
}
function draw1(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '-5,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
};
vis.draw(dataTable, options);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
//google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback1);
</script>
</td>
</tr></table>
please provide a link to see your page
ASKER
Made another minor change with the <div> tags
but the result is the same...
basically its showing the data of the second with
the title of the first... very strange.
but the result is the same...
basically its showing the data of the second with
the title of the first... very strange.
<table>
<tr>
<td width="300">
<div id="chart1"></div>
<script type="text/javascript">
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '0,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: 'Congressional Scorecard'
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
</script>
</td>
<td width="300">
<div id="chart2"></div>
<script type="text/javascript">
var queryString1 = '';
var dataUrl1 = '';
function onLoadCallback1() {
if (dataUrl1.length > 0) {
var query = new google.visualization.Query(dataUrl1);
query.setQuery(queryString1);
query.send(handleQueryResponse1);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
draw(dataTable);
}
}
function draw1(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '0,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
};
vis.draw(dataTable, options);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
//google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback1);
</script>
</td>
</tr>
</table>
ASKER
line 97 : draw1(dataTable);
line 121 : vis.draw1(dataTable, options);
line 129 : draw1(response.getDataTable());
line 121 : vis.draw1(dataTable, options);
line 129 : draw1(response.getDataTable());
ASKER
Now it showing title and data from the first, but not the second chart at all.
<table>
<tr>
<td width="300">
<div id="chart1"></div>
<script type="text/javascript">
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '0,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: 'Congressional Scorecard'
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
</script>
</td>
<td width="300">
<div id="chart2"></div>
<script type="text/javascript">
var queryString1 = '';
var dataUrl1 = '';
function onLoadCallback1() {
if (dataUrl1.length > 0) {
var query = new google.visualization.Query(dataUrl1);
query.setQuery(queryString1);
query.send(handleQueryResponse1);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(7);
dataTable.addColumn('number');
dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
draw1(dataTable);
}
}
function draw1(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
var options = {
chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
chxp: '0,1,2,3,4,5,6',
chxr: '0,0,5',
chxs: '0,676767,10.5,0,lt,676767',
chxtc: '',
chxt: 'x',
chs: '250x250',
cht: 'r',
chco: 'FF0000',
chds: '0,5',
chd: 't:4,5,3,2,5,3,4',
chdl: '',
chls: '2,4,0',
chma: '0,5|5',
chm: 'B,FF000080,0,0,0',
chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
};
vis.draw1(dataTable, options);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw1(response.getDataTable());
}
//google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback1);
</script>
</td>
</tr>
</table>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
bingo!
Open in new window