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>