Posted By: Jovo () on 'CZwww'
Title:     Jak delat grafy v HTML
Date:      Mon Feb 10 16:12:11 2003

Ahoj.

  Tak jsme narazili na problem, jak delat grafy v HTML. Ja jsem delal grafy 
pouzitim HR a nebo pres TABLE (rowspan, colspan) - priklad je dole. Vim, ze 
pokud jde o platformy, tak pro PHP a jine je knihovna, ktera umoznuje kreslit 
na GIF, popripade nejaky renderer pro javove aplety (javove, nebo javovske?:)
  Nemate jeste nekdo nejaky tip?


Diky, Jovo.
PS: Jen jzem si neco ZKOUSEL. Nasledujici kod proto neberte vazne.
-------------------------------------------------------------------------------
<HTML>
<HEAD>
  <STYLE>
    TABLE { border: 3px solid black;  margin-top:10%; }
    TABLE TH    { border-bottom: 1px botted black; }
    .Graph0 { color: blue;   background-color: blue;}
    .Graph1 { color: gray;   background-color: gray;}
    .Graph2 { color: yellow; background-color: yellow;}
    .Graph3 { color: red;    background-color: red;}
  </STYLE>
  <SCRIPT>
    function WriteGraph1(title, values, texts) {
      var i,l, m;
      l = values.length;
      m = -1;
      for(i=0; i<l; i++)
        if (m < values[i]) m = values[i];
      document.write('<TABLE WIDTH="10%" border="0">');
      document.write('<TH colspan="2">' + title + '</TH>');
      for(i=0; i<l; i++) {
        document.write('<TR>');
          document.write('<TD>' + texts[i] + '</TD>');
          document.write('<TD align="left"><HR SIZE="25" class="Graph' + i + 
'" width="' + values[i] + '"></TD>');
          document.write('<TD>' + values[i] + '</TD>');
        document.write('</TR>');
      };
      document.write('</TABLE>');
    };

    function WriteGraph2(title, values, texts ) {
      var i,l, m;
      l = values.length;
      m = -1;
      for(i=0; i<l; i++)
        if (m < values[i]) m = values[i];
      document.write('<TABLE WIDTH="100%" border="0"  CELLPADDING="5" 
CELLSPACING="0">');
      document.write('<TH COLSPAN="100">' + title + '</TH>');
      for(i=0; i<l; i++) {
        document.write('<TR>');
          wd = Math.floor(values[i]/m * 100);
          document.write('<TD width="5%">' + texts[i] + '</TD>');
          document.write('<TD class="Graph' + i + '" align="left" COLSPAN="' 
+ wd +'">' + wd + '</TD>');
          document.write('<TD colspan=1>' + values[i] + '</TD>');
        document.write('</TR>');
      };
      document.write('</TABLE>');
    };


  </SCRIPT>
</HEAD>
<BODY>

  <SCRIPT>
      var a = new Array(100, 223 ,350 , 85);
      var b = new Array('pepa','manka','jana','pavel');
      var n = 'Vypis dluzniku';
      WriteGraph1(n, a, b);
      WriteGraph2(n, a, b);
  </SCRIPT>

</BODY>
</HTML> 

Search the boards