How to put multiple data
43 views
Skip to first unread message
Soulsurfer
Aug 19, 2011, 10:10:12 AM8/19/11
to Google Visualization API
Hey there,
I'm developing a php/mysql program which uses google chart. My problem
is : that I didn't manage to put several contents such as more than
one graphic on my page. I have all tables displayed with data but only
one graphic.
I understand that I have to declare several id chart, but how?
Does someone could help on my source code please?
here my source code :
foreach($_POST['admin'] as $categ){
// QUERY
echo "</br>$categ<br/>";
$sql = "select count(distinct `IDPat`) as Total, year, CIMO from
export where CIMO like '".$categ."' ;
$rows = mysql_query($sql);
$dbSize = 0;
$countrows = 0;
$html='';
// create graphic fields
while ($row = mysql_fetch_array($rows))
{
$html.="data.setValue(".$countrows.", 0, '".$row['year']."');
data.setValue(".$countrows.", 1, ".$row['Total']."); ";
$countrows++;
}
?>
<html>
<head>
<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', 'total');
data.addRows(<?php echo $countrows ?>);
<?php echo $html ?>
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { width: 500, height: 300, title: 'Espace de
stockage :', is3D:true });
}
</script>
</head>
<body>
<?php
$rows = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Total</th>
<th>year</th>
</tr>";
while ($rowz = mysql_fetch_array($rows))
{
echo "<td>" . $rowz['Total'] . "</td>";
echo "<td>" . $rowz['year'] . "</td>";
echo "</tr>";
}
echo "</table><br/>";
}//end foreach
echo '<div id="chart_div">';
?>
</body>
</html>
I'm developing a php/mysql program which uses google chart. My problem
is : that I didn't manage to put several contents such as more than
one graphic on my page. I have all tables displayed with data but only
one graphic.
I understand that I have to declare several id chart, but how?
Does someone could help on my source code please?
here my source code :
foreach($_POST['admin'] as $categ){
// QUERY
echo "</br>$categ<br/>";
$sql = "select count(distinct `IDPat`) as Total, year, CIMO from
export where CIMO like '".$categ."' ;
$rows = mysql_query($sql);
$dbSize = 0;
$countrows = 0;
$html='';
// create graphic fields
while ($row = mysql_fetch_array($rows))
{
$html.="data.setValue(".$countrows.", 0, '".$row['year']."');
data.setValue(".$countrows.", 1, ".$row['Total']."); ";
$countrows++;
}
?>
<html>
<head>
<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', 'total');
data.addRows(<?php echo $countrows ?>);
<?php echo $html ?>
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { width: 500, height: 300, title: 'Espace de
stockage :', is3D:true });
}
</script>
</head>
<body>
<?php
$rows = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Total</th>
<th>year</th>
</tr>";
while ($rowz = mysql_fetch_array($rows))
{
echo "<td>" . $rowz['Total'] . "</td>";
echo "<td>" . $rowz['year'] . "</td>";
echo "</tr>";
}
echo "</table><br/>";
}//end foreach
echo '<div id="chart_div">';
?>
</body>
</html>
asgallant
Aug 19, 2011, 12:39:23 PM8/19/11
to google-visua...@googlegroups.com
The javascript function "document.getElementById(id)" fetches the HTML element with the given id. In this case, you want to use div's to hold your charts, so you need one div for each chart you draw. You could do:
<div id="chart_div_1"></div>
<div id="chart_div_2"></div>
<div id="chart_div_3"></div>
to hold three charts. The chart objects would be created like this:
var chart1 = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div_2'));var chart3 = new google.visualization.ColumnChart(document.getElementById('chart_div_3'));
Reply all
Reply to author
Forward
0 new messages