- zur homepage

Scalable Vector Graphics  



Latest update: 06.07.2002 
There will be more tutorials, if I have time.
 How I made the poll
This poll does not need a database. The interim results are simply written into
and stored in a textfile.
You should already have some experience with HTML, PHP and SVG (and possibly JavaScript), because this text is basically about the special feature of reading and showing the poll-results in an SVG-file with dynamically changing bars.
» the poll         » the results
The file containing the actual poll:
This is the form for the poll...
...and here is the PHP-code for the analysis of the submitted data:
PHP-code for the poll
The poll-results are now written into the text-file and at the same time a new window pops up:
"Thank you very much for your answer... - ... please click here to see the results"
The file showing the results:
With the following code the results are read from the text-file, converted into percent and inserted into the HTML-file:
PHP code which reads the results
And furthermore:
PHP code which inserts the results into the HTML file
The SVG-part:
Now to the interesting part, the presentation of the results using SVG.
I have embedded the SVG-file into the HTML-file for the results using:
code for the embedding of the PSVG file
As you can see, the suffix is not .svg but .psvg. In order to make .psvg-files readable, you will have to add a respective entry in the .htaccess-file on your server. How this is to be done, you can learn here on the interesting site of, where I also learned nearly everything for the following part.
Many thanks to the authors!
The .psvg-file begins with this code for the header:
Header of the PSVG file
Then follows the code for the filters for the bars, simply normal SVG-Code.
Then, here is the code, which reads the results from the text-file and converts the resulting number into percentage of the full length:
Finally, I replaced the usually fixed number for the width of each bar by the PHP-code that inserts the beforehand defined variable for the dynamic percental width of the bar:
Inserting the variable for the width of the bar
Note: In this particular file of mine the minimum length of each bar is 7 pixel, so that the very tip of the bar is also visible when there is no answer.
That was it.

© 2001-2004 Petra Kukofka E-Mail symbol back to topback to top