Full version: jsB@nk » Graphic » Random Bar Chart
URL: https://www.javascriptbank.com/random-bar-chart.html
Click on the ReDraw button and the bars in the graph are redrawn randomly. The total is calculated on the top. I used styles in conjunction with a JavaScript function that sets the height of the red single cell tables to a random amount anywhere between 1 pixel and 300 pixels. Use JavaScript to dynamically generate a bar chart
Full version: jsB@nk » Graphic » Random Bar Chart
URL: https://www.javascriptbank.com/random-bar-chart.html
<STYLE type=text/css>TD.blank {WIDTH: 66px; HEIGHT: 30px}TD.set {WIDTH: 108px; HEIGHT: 30px}TD.total {WIDTH: 108px; HEIGHT: 30px}TD.numbers {VERTICAL-ALIGN: bottom; WIDTH: 72px; HEIGHT: 50px; TEXT-ALIGN: right}TD.values {VERTICAL-ALIGN: bottom; WIDTH: 90px; HEIGHT: 297px; TEXT-ALIGN: center}TD.bars {WIDTH: 72px; HEIGHT: 30px; BACKGROUND-COLOR: #ffffff}TD.days {FONT-SIZE: 16px; VERTICAL-ALIGN: bottom; WIDTH: 90px; FONT-FAMILY: "arial"; HEIGHT: 24px; TEXT-ALIGN: center}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javascript type=text/javascript><!--var ids = new Array("b1","b2","b3","b4","b5","b6","b7");function graphIt() { var t = 0; for( i=0; i<ids.length; i++ ) { num = Math.floor(Math.random() * 300);document.getElementById(ids[i]).style.backgroundColor="#ff0040"; document.getElementById(ids[i]).style.height=num; t+=num; } document.getElementById("total").innerHTML = t;} --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE cellSpacing=0 cellPadding=3 border=0> <TBODY> <TR> <TD class=blank></TD> <TD class=set><INPUT style="BACKGROUND-COLOR: #c0c0c0" onclick=graphIt() type=button value=ReDraw td <> <TD class=total id=sum><B>Total: <SPAN id=total></SPAN></B></TD></TR></TBODY></TABLE><TABLE cellSpacing=0 cellPadding=0 border=0><!-- main table --> <TBODY> <TR> <TD><!-- beginning of left side --> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD class=numbers>250 _</TD></TR> <TR> <TD class=numbers>200 _</TD></TR> <TR> <TD class=numbers>150 _</TD></TR> <TR> <TD class=numbers>100 _</TD></TR> <TR> <TD class=numbers>50 _</TD></TR> <TR> <TD class=numbers>0 _</TD></TR></TBODY></TABLE></TD><!-- end of left side --> <TD vAlign=top><!-- beginning of right side, the chart --> <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR> <TD> <SCRIPT language=javascript type=text/javascript><!--var txt = "";txt += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\r <tr>";for( i = 1; i <= 7; i++ ) { txt += " <td class=\"values\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td id=\"b" + i + "\" class=\"bars\"><\/td><\/tr><\/table><\/td>";} txt += " <\/tr>\r <\/table>";document.write(txt);--></SCRIPT> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=72></TD> <TD class=days>Sunday</TD> <TD class=days>Monday</TD> <TD class=days>Tuesday</TD> <TD class=days>Wednesday</TD> <TD class=days>Thursday</TD> <TD class=days>Friday</TD> <TD class=days>Saturday</TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->