Share this page 

Generate a bar chartTag(s): Varia


Vertical bar 

<html>
<head></head>
<body>
<script>
  var data = [ 
      ['jan', 10], ['feb', 50], ['mar', 30] ,
      ['apr', 100], ['may', 50], ['jun', 110] ,
      ['jul', 40], ['aug', 50], ['sep', 70] , 
      ['oct', 80], ['nov', 20], ['dec', 80]
  
  ];
  document.write('<table border="0"><tr>');
  for (var i=0; i < data.length; ++i)
    document.write(
      '<td align="center" valign="bottom">'
          + data[i][1]
          + '<div style="background:red;width:20px;height:'
          + data[i][1] + 'px"> </div>'
          + data[i][0] +'</td>');
  document.write('</tr></table>');
</script>
</body>
</html>

Horizontal bar 

<html>
<head></head>
<body>
<script>
  var data = [ 
      ['jan', 10], ['feb', 50], ['mar', 30] ,
      ['apr', 100], ['may', 50], ['jun', 110] ,
      ['jul', 40], ['aug', 50], ['sep', 70] , 
      ['oct', 80], ['nov', 20], ['dec', 80]
  
  ];
  
  document.write('<table border="0">');
  for (var i=0; i < data.length; ++i)
    document.write( 
      '<tr><td>' + data[i][0]
          +'<td><hr id="red" style="height: .8em; '
          + 'background-color: red; color: red; '
          + 'margin-left: 0; text-align: left; '
          + 'width: ' + data[i][1] + 'px"/><td>' + data[i][1]);
  document.write('</tr></table>');               
  
</script>
</body>
</html>

See this HowTo to generate a bar chart using Google Chart API.

mail_outline
Send comment, question or suggestion to howto@rgagnon.com