Hej,
Jeg har længe ledt efter et eksempel på at tegne almindelige
liniegrafer via HTML.
I mellemtiden fik jeg så skrevet nedenstående stump kode, der kan
tegne søjlediagrammer.
Koden udnytter, at et image kan strækkes vha. tag'en height.
Har i nogle gode ideer til at tegne en almindelig graf via HTML?
En anden (og væsentlig) detalje er at få kategoriaksen (X-aksen) til
at skalere korrekt for f.eks. "huller" mellem dagene (hvis det altså
er datoer, som nedenfor).
Alle indspark er velkomne
/Peter
<html>
<head>
<title>Diagrammer med HTML/ASP</title>
</head>
<body>
<%
'### Søjlediagram med HTML/ASP!
'### Grafen tegnes fast med 7 aksemærker på værdiaksen!
'### Sæt en fast højde på grafen, for at kunne beregne søjlernes
absolutte højde
FixedGraphHeight = 400
FixedBarWidth = 3
Set Conn = Server.CreateObject("ADODB.Connection")
'### Opret forbindelse til databasen diagram.mdb
'### Tabellen tbKurser indeholder kolonnerne Kurs og Dato.
strDSN = "DRIVER={Microsoft Access Driver
(*.mdb)};DBQ="&Server.MapPath("diagram.mdb")
Conn.Open strDSN
'### Find største og mindste værdi blandt dataene
strSQL = "SELECT MIN(Kurs) AS dbMinKurs, MAX(Kurs) AS dbMaxKurs FROM
tbKurser"
Set rs = Conn.Execute(strSQL)
MinKurs = rs("dbMinKurs")
MaxKurs = rs("dbMaxKurs")
'### Mindste og største værdi bør tegnes 5% fra yderpunkterne
Lavest = MinKurs * 0.95
Hoejest = MaxKurs * 1.05
'### Hvor langt er der mellem hvert mærke på værdiaksen?
Xstep = (Hoejest - Lavest) / 6
'### Beregn værdierne for de inderste 5 mærker (x1 er lavest)
x1 = Lavest + (Xstep * 1)
x2 = Lavest + (Xstep * 2)
x3 = Lavest + (Xstep * 3)
x4 = Lavest + (Xstep * 4)
x5 = Lavest + (Xstep * 5)
'### Hvor mange pixels fylder en enhed på værdiaksen?
PixelsPerTick = (FixedGraphHeight / (Hoejest - Lavest))
'### Læs den første record
strSQL = "SELECT * FROM tbKurser ORDER BY Dato"
Set rs = Conn.Execute(strSQL)
%>
<center>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td valign="top"><font face="verdana" size="1"><
%=FormatNumber(Hoejest, 3)%></td>
<td rowspan="7"><img src="black-dot.gif" width="1" height="<
%=FixedGraphHeight%>" border="0"></td>
<td rowspan="7">
<table border="0" cellspacing="0" cellpadding="0" height="<
%=FixedGraphHeight%>" bgcolor="white">
<tr>
<%
If Not (rs.BOF Or rs.EOF) Then
Do While Not rs.EOF
'### Beregn højden på den aktuelle søjle
'### Filen black-dot.gif er en sort prik på 1x1 pixel
hoejde = Int((rs("Kurs") - Lavest) * PixelsPerTick)
%>
<td valign="bottom">
<table border="0" cellspacing=0 cellpadding=1>
<tr><td valign="bottom"><img src="black-dot.gif" width="<
%=FixedBarWidth%>" height="<%=hoejde%>" border="0"></td></tr>
</table>
</td>
<%
rs.MoveNext
Loop
End If
rs.Close
Set rs = Nothing
Conn.Close
Set Conn = Nothing
%>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="center"><font face="verdana" size="1"><
%=FormatNumber(x5, 3)%></td>
</tr>
<tr>
<td valign="center"><font face="verdana" size="1"><
%=FormatNumber(x4, 3)%></td>
</tr>
<tr>
<td valign="center"><font face="verdana" size="1"><
%=FormatNumber(x3, 3)%></td>
</tr>
<tr>
<td valign="center"><font face="verdana" size="1"><
%=FormatNumber(x2, 3)%></td>
</tr>
<tr>
<td valign="center"><font face="verdana" size="1"><
%=FormatNumber(x1, 3)%></td>
</tr>
<tr>
<td valign="bottom"><font face="verdana" size="1"><
%=FormatNumber(Lavest, 3)%></td>
</tr>
</table>
</center>
</body>
</html>