to dynamically populate bar chart

annmary

to dynamically populate bar chart
April 13, 2010 08:43PM

Registered: 14 years ago
Posts: 1

HI
I am very new to this. Just came across today.
I have used jquery.post() and got a jsonobject back from servlet. I want to use that to populate the bar chart. In the sample example its hard coded, like
var myData = new Array(['U.S.A.', 69.5], ['Canada', 2.8]);

how to get myData populated dynamically..can somebody explain me with a simple example maybe employee or salary stuff..

Reply Quote

user505841

Re: to dynamically populate bar chart
December 10, 2010 04:25PM

Registered: 13 years ago
Posts: 1

I was finally able to get PHP to output the Javascript necessary to generate a graph. Here's the gist.
1. Have PHP echo the first portion of javascript.
echo '<script type="text/javascript">
';
echo 'var myData = new Array(';

2.Build your query statement. ie. $Get=mysql_query("Select * from table where something=something)
3. Get the count. ie. $count=mysql_num_rows($Get);
4. Start Outer For Loop. ie. for($i=0; $i<=$count;$i++{
4. Start Inner While Loop. ie. while($row=mysql_fetch_assoc($Get)){
5. Echo the array's. ie. echo "['".$row['Date']."',".$row['Weight']."]";
6. THIS WAS THE PART THAT WAS DRIVING ME MAD. You have to be careful how many commas are output!!
if($i==$count){ echo "";} else {echo ",";}
7. Increment the count. ie. $i++;
8. Close both loops. ie. }}
9. Echo the closing portion of the javascript array. ie. echo " winking smiley

;";
10. Echo the rest of the javascript. ie. echo "
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.setLineColor('#8D9386');
myChart.setLineWidth(4);
myChart.setTitleColor('#7D7D7D');
myChart.setAxisColor('#9F0505');
myChart.setGridColor('#a4a4a4');
myChart.setAxisValuesColor('#333639');
myChart.setAxisNameColor('#333639');
myChart.setTextPaddingLeft(0);
myChart.draw();";
echo "
</script>";
You're done.

I wrote this page as an "include" page and called it "graphscript.php". Then I built a main page, called "graph.php" that has the <div id="chartcontainer"></div> BEFORE the include('graphscript.php') statement.
It finally works!

Reply Quote

user520416

Re: to dynamically populate bar chart
December 21, 2010 07:18PM

Registered: 13 years ago
Posts: 4

Why not just get the PHP to create the XML file on the fly

then get the page to read the XML file ?? smiling smiley

Reply Quote

user611826

Re: to dynamically populate bar chart
February 19, 2011 03:19PM

Registered: 13 years ago
Posts: 1

I am trying to use the coding provided by user 505841. But my graph doesn't comes out. Can you please check my coding for me?Thank you

<?php
$link = mysql_connect('localhost', 'root', '') or die('Could not connect: ' . mysql_error());
mysql_select_db('salestracking') or die ('Could not select database');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[www.w3.org];
<html xmlns="[www.w3.org];

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jchart</title>
<script type="text/javascript" src="jscharts.js"></script>
</head>

<body>

<?php
echo '<script type="text/javascript">';
echo "var myData = new Array(";
//$Get="SELECT * FROM salesgp";
$Get="SELECT year,COUNT(*) AS 'number' FROM salesgp GROUP BY year";
//$result= mysql_query($Get) or die('Query failed:'.mysql_error());
$count=mysql_num_rows($Get);
for($i=0; $i <= $count; $i++)
{
while($row=mysql_fetch_assoc($Get))
{
$year=$row['year'];
$number=$row['number'];
//echo "[' ".$row['year']." ', ".$row['count']." ]";
echo "['$year','$number']";
if($i== $count){echo"";}else{echo",";}
$i++;
}//close while loop
}//close for loop
echo " winking smiley

;";

echo "var myChart = new JSChart('graph', 'bar')";
echo "myChart.setDataArray(myData)";
echo "myChart.setBarColor('#42aBdB')";
echo "myChart.setBarOpacity(0.8)";
echo "myChart.setBarBorderColor('#D9EDF7')";
echo "myChart.setBarValues(false)";
echo "myChart.setTitleColor('#8C8383')";
echo "myChart.setAxisColor('#777E81')";
echo "myChart.setAxisValuesColor('#777E81')";
echo "myChart.draw()";
echo "</script>";

?>
</body>

</html>

Reply Quote