codice:
<?php
print("<?xml version=\"1.0\"?>");;
?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<script>
<?php
print("<![CDATA[");
print("var mesi=new Array(1,2,3,4,5,6,7,8,9,10,11,12);");
print("var valori=new Array(13,24,36,25);");
?>
function max(vet,inizio,f)
{
var m
if(f>=vet.length)
f=vet.length-1;
if(inizio<0 || inizio>f)
return 0;
m=vet[inizio];
for(i=inizio+1;i<=f;i++)
if(m<vet[i])
m=vet[i]
return m;
}
function numcaso(min,mas)
{
var n=Math.round(min+Math.random()*(mas-min));
return n;
}
function colorecaso()
{
var s="rgb("+numcaso(0,255)+","+numcaso(0,255)+","+numcaso(0,255)+");";
return("fill:"+s);
}
function riempivetcaso(vet,n,min,mas)
{
var i;
for(i=0;i<n;i++)
vet[i]=numcaso(min,mas);
}
function aggiorna_isto(quadri)
{
riempivetcaso(valori,12,10,200);
hmax=document.getElementById("grafico").getAttribute("height")*.7;
scala=hmax/max(valori,quadri*4,quadri*4+3);
for(i=1;i<=4;i++)
{
rett=document.getElementById("r"+i);
yb=rett.getAttribute("y")*1;
yb+=rett.getAttribute("height")*1;
valore=valori[quadri*4+i-1];
y=yb-valore*scala;
rett.setAttribute("y",y);
rett.setAttribute("height",valore*scala);
document.getElementById("v"+i).setAttribute("y",y-3);
document.getElementById("v"+i).firstChild.replaceData(0,10,valore);
document.getElementById("l"+i).firstChild.replaceData(0,10,mesi[quadri*4+i-1]);
}
}
function init(n)
{
var h,l
h=document.getElementById("grafico").getAttribute("height")*1;
l=document.getElementById("grafico").getAttribute("width")*1;
b=l/(n+(n+1)*.5);
xb=b/2;
for(i=1;i<=n;i++)
{
ret=document.getElementById("r"+i);
ret.setAttribute("x",xb);
ret.setAttribute("width",b);
ret.setAttribute("y",h/2);
ret.setAttribute("height",h/2-20);
ret.setAttribute("style",colorecaso());
document.getElementById("l"+i).setAttribute("x",xb+5);
document.getElementById("v"+i).setAttribute("x",xb+5);
xb=xb+b*1.5;
}
q=numcaso(0,2);
aggiorna_isto(q);
}
]]>
</script>
</head>
<body onload="init(4)">
<h1></h1>
<svg:svg width="600" height="600">
<svg:g id="isto">
<svg:rect id="grafico" x="0" y="0" width="600" height="600" style="fill:#E0E0E0"/>
<svg:rect id="r1" x="10" y="500" width="30" height="400"/>
<svg:text id="l1" x="10" y="590">gen</svg:text>
<svg:text id="v1" x="10" y="590">gen</svg:text>
<svg:rect id="r2" x="10" y="500" width="30" height="400"/>
<svg:text id="l2" x="10" y="590">gen</svg:text>
<svg:text id="v2" x="10" y="590">gen</svg:text>
<svg:rect id="r3" x="10" y="500" width="30" height="400"/>
<svg:text id="l3" x="10" y="590">gen</svg:text>
<svg:text id="v3" x="10" y="590">gen</svg:text>
<svg:rect id="r4" x="10" y="500" width="30" height="400"/>
<svg:text id="l4" x="10" y="590">gen</svg:text>
<svg:text id="v4" x="10" y="590">gen</svg:text>
</svg:g>
</svg:svg>
</body>
</html>