How to connect mySQL to SVG using RaphaelJS? - php

Question

I am trying to link a MySQL DB to an SVG image to dynamically change the SVG elements with Raphael JS.
I have a MySQL DB where I query using PHP and display the results in table form to an html page: (The script below works and displays the username and a picture only when the condition of the timestamp is met.)
<?php
mysql_connect("","","");
mysql_select_db("");
$res=mysql_query("select username, picture from 'table' WHERE status > UNIX_TIMESTAMP(NOW()) - 300");
echo "<table>";
if (!$res) {
die("Query to show fields failed");
}
$fields_num = mysql_num_fields($res);
echo "<h1>Table:Status</h1>";
echo "<table border='1'><tr>";
for($i=0; $i<$fields_num; $i++)
{
$field = mysql_fetch_field($res);
echo "<td>{$field->name}</td>";
}
echo "</tr>\n";
while($row=mysql_fetch_array($res))
{
echo "<tr>";
echo "<td>"; echo $row["username"]; echo "</td>";
echo "<td>"; ?> <img src=" <?php echo $row["picture"]; ?>" height="50">
<?php
How can I take the similar concept above of displaying the results in table form to an SVG image where the SVG elements will change/update only when the query condition is met?
Here is my sample SVG image with 5 elements:
<polygon fill="#B2B2B2" points="150.3,8.8 203.8,31.7 169.8,91.4 133.4,75.8 "/>
<circle id="circleT3" circle fill="#FFFFFF" cx="163.1" cy="53.6" r="7.3"/>
<circle id="circle3_1" circle fill="#CCCCCC" cx="184.5" cy="82.4" r="7.3"/>
<circle id="circle3_5" circle fill="#CCCCCC" cx="136.6" cy="27.2" r="7.3"/>
<circle id="circle3_4" circle fill="#CCCCCC" cx="166.4" cy="7.3" r="7.3"/>
Can someone point me to some sample code or tutorial? Or is there a better way to do this? Thanks.
EDIT:
In MySQL DB I have a column for username, password and timestamp. When a user logs into webpage the timestamp updates. The PHP code above is used to query who has logged within 5 minutes ago from current time.
What I would like to do with this information with SVGs is create a graphical representation of the login.
So each username will have their own SVG element (a circle) associated with them and when they log in/out, that SVG element (code above) will change color.
Right now I do not know how to link the username with my SVG elements so the SVG element will dynamically update like my table I query from MySQL when the timestamp changes.

Answer 1

The answer will depend on further information that isn't really available until the rest is written.
You could combine Snap (to modify existing inline SVG or create it) or Raphael (to create new SVG only, you can't use it to modify inline SVG), or another SVG library of choice (eg svg.js or jquery.svg maybe).
Assuming you already have something to use on the page, that is showing the logged in user, you could do something like in pseudocode...
loop user;
if( document.getElementById( userId ) ) Snap('#' + userId + '_image').attr({ fill: 'green' });
(The svg reference may be the same as the circles, but somewhere you would need some type of lookup to know which circle is which userid)
This assumes the svg is on the page. If its not, you could create it with
paper.circle(x,y,r).attr({ fill: 'green' });
If you want it dynamic (so status changes without a refresh), you may need to tie ajax calls to get status from the mysql db, but if you already have a user name displaying on the page, I'm assuming that is already taken care of.

Answer 2

I have successfully update the svg element color to when the user logs in, the corresponding circle will change color. So I have my svg code from illustrator. I then put in this script in my php file:
window.onload = function () {
if(document.body.innerHTML.toString().indexOf('username') > -1){
circle1_1.setAttribute("fill", "yellow");
};
};
Whenever a user logs in, the info is populated on the table in the html from the MYSQL query and the script looks to see if that username is on the page and if it is, change color of SVG element.
So it basically links the SVG element to any value/variable.
Not the prettiest code or logic out there but for anyone else doing something similar, enjoy.