lijn-grafiek-php html | lijn-grafiek-svg html | lijn-grafiek-javascript html
Ongeveer alle laatste versies van de browsers zijn nu in staat om, op een HTML5 pagina, SVG te parsen. Dit houdt in dat het nu wel heel erg eenvoudig wordt om poly-lines te gebruiken. En omdat een grafiek bij uitstek geschikt is om poly-lijnen bij te gebruiken, is op deze pagina een opzet(je) gegeven. Ter verduidelijking: verwacht dus niet dat in IE7 of Opera 8 etc. etc. opeens deze procedure op het scherm gezet wordt. Alléén de állerlaatste versies kunnen overweg met "inline" SVG. Zo gauw bezoekers (in het algemeen) afstand gaan nemen van hun "middeleeuwse" browsers (IE6, IE8 etc.etc.) zal het steeds beter gaan met HTML5. Omgekeerd geredeneerd kan het zo zijn dat als bezoekers er achter komen dat hun "oude" browser echt wel aan een upgrade toe is (omdat ze geen HTML5 kunnen "draaien"), de invoer van HTML5 in een "stroomversnelling" zal raken.
Kijk even in de onderstaande html-code hoe de SVG procedure in elkaar zit. Het is uitermate prettig dat er geen enkel stukje script of zelfs maar een stylesheet aan te pas hoeft te komen om de grafiek weer te geven.
<div>
<svg width="400px" height="130px" font-size="12" xmlns="http://www.w3.org/2000/svg">
<rect x='00' y='0' stroke="grey" width='400' height='100' fill='gainsboro'/>
<text x="0" y="120">01</text>
<text x="20" y="120">02</text>
<text x="40" y="120">03</text>
<text x="60" y="120">04</text>
<text x="80" y="120">05</text>
<text x="100" y="120">06</text>
<text x="120" y="120">07</text>
<a xlink:href="/manuals/html/html-grafiek.html">
<polyline points=" 0,12 30,65 50,10 70,81 90,34 110,88 130,12"
stroke="blue" stroke-width="3" fill="transparent"
onmouseover="evt.target.setAttribute('stroke-width','4');"
onmouseout="evt.target.setAttribute('stroke-width','3');">
</polyline>
</a>
<a xlink:href="/manuals/html/html-grafiek.html">
<polyline points=" 0,33 30,55 50,33 70,10 90,66 110,44 130,88"
stroke="green" stroke-width="3" fill="transparent"
onmouseover="evt.target.setAttribute('stroke-width','4');"
onmouseout="evt.target.setAttribute('stroke-width','3');">
</polyline>
</a>
</svg>
</div>