Dynamically changing an svg image element depending on data from mySQL DB

Question

I am trying to change an svg element depending on data from a mySQL DB.

For example, I have created an svg image in adobe illustrate that has a rectangle for a table and 4 circles as chairs around the table.

I would like to denote each chair as a 'person' and when that 'individual' logs in, the chair would change to a different color and change back when they log out.

I have used php and mySQL for the login aspect and that all works. This would be a graphical representation of the login.

When the data is changed in mySQL (I have a login time-stamp), the image element would also change. I need javascript to do this but I am stumped.

I would like to know if the above scenario is even possible and if so which direction should I take or are there any other alternatives?

I have looked at jquery and raphael js but this is the first time I am working with vector images and any assistance is greatly appreciated.

EDIT ~ I have taken a good look at Raphael JS and I made a php query to MySQL and display the filtered results onto an html page.

How do I link up MySQL DB with my SVG image so each SVG element will change according to my filtered results?

Answer 1

There are completely no limitations to what you want to achieve, it is actually quite common when using svg . If you have no experience with svg you could take a look at thirt party library such as d3 or RaphaelJS

Answer 2

This is indeed possible, although from the way you phrased the question it seems like you may be missing some steps:

1. When your MySQL data changes, the server must notify the client (browser) of this event somehow. Options for this include server-sent events (SSE), websockets, and long-polling. I recommend using SSE, and this looks like a useful question about using them: Server-sent events and php - what triggers events on the server?
2. When the browser receives notification of the change from the server, it must update the graphic. This is where you want to use a tool like d3 or Raphaël (I think you will find the latter a bit easier to use in this case). You should be able to formulate a more specific question once you get to this point, if needed.