Graf s využitím VML a JavaScriptu

Nyní vytvoříme sloupcový graf (4 sloupce) pomocí VML a JavaScriptu, který bude podobný tomuto:
graf
Zdrojový kód
<form name="form_graf">
<label>a:</label><input type="text" value="0" name="a" /><br />
<label>b:</label><input type="text" value="0" name="b" /><br />
<label>c:</label><input type="text" value="0" name="c" /><br />
<label>d:</label><input type="text" value="0" name="d" /><br />
<input type="button" onClick="graf()" value="vytvoř"/>
</form>
<script language="JavaScript" type="text/javascript">
function graf(){
document.all.a_graf.innerHTML= "<v:rect style=\"width:20px;height:"+document.form_graf.a.value+"px\" fillcolor=\"yellow\"><v:textbox>a</v:textbox></v:rect>"
document.all.b_graf.innerHTML= "<v:rect style=\"width:20px;height:"+document.form_graf.b.value+"px\" fillcolor=\"green\"><v:textbox>b</v:textbox></v:rect>"
document.all.c_graf.innerHTML= "<v:rect style=\"width:20px;height:"+document.form_graf.c.value+"px\" fillcolor=\"blue\"><v:textbox>c</v:textbox></v:rect>"
document.all.d_graf.innerHTML= "<v:rect style=\"width:20px;height:"+document.form_graf.d.value+"px\" fillcolor=\"red\"><v:textbox>d</v:textbox></v:rect>"
}
</script>
<span id="a_graf"></span>
<span id="b_graf"></span>
<span id="c_graf"></span>
<span id="d_graf"></span>
Po kliknutí na tlačítko se vyvolá funkce graf(), která zapíše pomocí document.all 4 obdélníky o výšce definované ve formuláři.

Fuknční ukázka

Tento skript funguje jen v prohlížeči Microsoft Internet Explorer 5.0 a vyšším