title: How to connect mySQL to SVG using RaphaelJS?
body: <p>I am trying to link a MySQL DB to an SVG image to dynamically change the SVG elements with Raphael JS. </p>
  
  <p>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.)</p>
  
  <pre><code>    &lt;?php
      mysql_connect("","","");
      mysql_select_db("");
      $res=mysql_query("select username, picture from 'table' WHERE     status &gt; UNIX_TIMESTAMP(NOW()) - 300");
      echo "&lt;table&gt;";
      if (!$res) {
          die("Query to show fields failed");
      }
  
  $fields_num = mysql_num_fields($res);
  
  echo "&lt;h1&gt;Table:Status&lt;/h1&gt;";
  echo "&lt;table border='1'&gt;&lt;tr&gt;";
  
  
  for($i=0; $i&lt;$fields_num; $i++)
  {
      $field = mysql_fetch_field($res);
      echo "&lt;td&gt;{$field-&gt;name}&lt;/td&gt;";
  }
  echo "&lt;/tr&gt;\n";
  
  while($row=mysql_fetch_array($res))
  {
  echo "&lt;tr&gt;";
  
  echo "&lt;td&gt;"; echo $row["username"]; echo "&lt;/td&gt;";
  
  echo "&lt;td&gt;"; ?&gt; &lt;img src=" &lt;?php echo $row["picture"]; ?&gt;" height="50"&gt;  
  
  &lt;?php 
  </code></pre>
  
  <p>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?</p>
  
  <p>Here is my sample SVG image with 5 elements: </p>
  
  <pre><code>&lt;polygon fill="#B2B2B2" points="150.3,8.8 203.8,31.7 169.8,91.4       133.4,75.8 "/&gt;
  &lt;circle id="circleT3" circle fill="#FFFFFF" cx="163.1" cy="53.6" r="7.3"/&gt;
  &lt;circle id="circle3_1" circle fill="#CCCCCC" cx="184.5" cy="82.4" r="7.3"/&gt;
  &lt;circle id="circle3_5" circle fill="#CCCCCC" cx="136.6" cy="27.2" r="7.3"/&gt;
  &lt;circle id="circle3_4" circle fill="#CCCCCC" cx="166.4" cy="7.3" r="7.3"/&gt;
  </code></pre>
  
  <p>Can someone point me to some sample code or tutorial? Or is there a better way to do this? Thanks.</p>
  
  <p>EDIT:</p>
  
  <p>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. </p>
  
  <p>What I would like to do with this information with SVGs is create a graphical representation of the login. </p>
  
  <p>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.</p>
  
  <p>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.</p>