»
EnglishFrenchVietnamese

Print - Random Bar Chart - JavaScriptBank.com

Full version: jsB@nk » Graphic » Random Bar Chart
URL: http://www.javascriptbank.com/random-bar-chart.html

Random Bar Chart © JavaScriptBank.comClick 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: http://www.javascriptbank.com/random-bar-chart.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->