Horizontale Statistikbalken

HTML-Einbindung
<!-- Script-Anfang --> <!-- www-java24.net - DIE Javascript - Ressource --> <!-- Diesen Code musst Du in den -head- einbauen --> <Style type="text/css"> .col1 {color:black;font-weight:bold} .col2 {color:#000099;font-weight:bold} .col3 {color:#990066;font-weight:bold} .labels {color:'blue';font-weight:bold} .total {font-weight:bold;color:blue;} .horBar {border:1px solid red;background-color:#0cc4ba;height:5px;} </style> <Script Language='JavaScript'> <!-- function line(col1, col2, col3){ this.col1 = col1 this.col2 = col2 this.col3 = col3 } //============================================================ var header = "TEST STATISTIK <br>Freier Text <br>HTML" var colHeader1 = "Commodity Group" var colHeader2 = "Amount" var colHeader3 = "%" list = new Array() list[0] = new line('Food',155.26) list[1] = new line('Alcohol and tobacco', 74.16) list[2] = new line('Clothing and footwear',47.12) list[3] = new line('Housing ',96.31) list[4] = new line('Household furnishings and services',71.47) list[5] = new line('Health',38.68) list[6] = new line('Transportation',139.15) list[7] = new line('Communication' ,24.25) list[8] = new line('Recreation',109.46) list[9] = new line('Education',22.78) list[10] = new line('Miscellaneous',113.81) scale = 10 //============================================================ var total = 0 function changeOrder(){ switch (document.formSelect.selectOrder.value){ case "alphabetical" : list.sort(alph) break; case "ascending" : list.sort(asc) break; case "descending" : list.sort(desc) break; } for (i=0;i<list.length;i++){ spcol1[i].innerHTML = list[i].col1 spcol2[i].innerHTML = list[i].col2 spcol3[i].innerHTML = list[i].col3 spBar[i].style.width = list[i].col3*scale } } function desc(a,b){ return b.col2 - a.col2 } function asc(a,b){ return a.col2 - b.col2 } function alph(a, b) { if(a.col1 < b.col1) return -1 if(a.col1 > b.col1) return 1 return 0 } list.sort(desc) col3 = new Array(list.length-1) for (i=0;i<list.length;i++){ total = total + list[i].col2 } function format (expr, decplaces){ var str = "" + Math.round (eval(expr) * Math.pow(10,decplaces)) while (str.length <= decplaces) { str = "0" + str } var decpoint = str.length - decplaces return str.substring(0,decpoint) + "." + str.substring(decpoint,str.length); } function writeHorBars(){ document.write("<form name=formSelect>") document.write("<table>") document.write("<tr><td colSpan=8 Align=center><H3>" + header + "</h3></td></tr>") document.write("<tr><td colSpan=8 Align=left><b><i>Order:</i></b>   ") document.write("<Select name = 'selectOrder' onChange = changeOrder();>") document.write("<Option Value = 'alphabetical';>alphabetisch") document.write("<Option Value = 'ascending';>Aufsteigend") document.write("<Option Selected Value = 'descending';>Absteigend") document.write("</Select></td></tr>") document.write("<tr><td colSpan=8 Align=center><HR></td></tr>") document.write('<TR>') document.write('<TD Align=Left><span class=labels>' + colHeader1 + '</span></TD>') document.write('<TD width=10></TD>') document.write('<TD align=right><span class=labels>' + colHeader2 + '</span></TD>') document.write('<TD width=10></TD>') document.write('<TD align=right><span class=labels>' + colHeader3 + '</span></TD>') document.write('<TD width=10></TD>') document.write('<TD align=left></TD>') document.write('<TD width=10></TD>') document.write('</TR>') document.write("<tr><td colSpan=8 Align=center><HR></td></tr>") var i for (i=0;i<list.length;i++){ document.write('<TR>') document.write('<TD><span name=spcol1 ID=spcol1 class=col1>' + list[i].col1 + '</span></TD>') document.write('<TD width=10></TD>') document.write('<TD align=right><span name=spcol2 ID=spcol2 class=col2>' + format(list[i].col2,2) + '</span></TD>') document.write('<TD width=10></TD>') list[i].col3 = format((list[i].col2/total*100),2) document.write('<TD align=right><span name=spcol3 ID=spcol3 class=col3>'+format(list[i].col3,2)+'</span></TD>') document.write('<TD width=10></TD>') document.write('<TD><span name=spBar ID=spBar class=horBar style=width:'+list[i].col3*scale+'px;></span></TD>') document.write('</TR>') } document.write("<tr><td colSpan=8 Align=center><HR size=5 color='blue'></td></tr>") document.write('<TR>') document.write('<TD Align=Left><span class=total>Total</span></TD>') document.write('<TD width=10></TD>') document.write('<TD align=right><span class=total>' + format(total,2) + '</span></TD>') document.write('<TD width=10></TD>') document.write('<TD align=right><span class=total>100.00</span></TD>') document.write('<TD width=10></TD>') document.write('<TD align=left></TD>') document.write('<TD width=10></TD>') document.write('</TR>') document.write("</table>") document.write("<form>") } //============================================== //Copyright. All rights reserved. //Alexander Babichev (babichev#telpacific.com.au). //Note antiSpam protection: To send me E-mail please replace "#" with "@" //Free for private use under a condition that a copyright notice is preserved. //A fee (US$10) is required to use this script commercially. //Script for the Netscape can be provided for a commercial use. //============================================== // --> </Script> <!-- Diesen Code musst Du in den -body- einbauen --> <Script> writeHorBars() </Script> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->