Søjlediagram

Hej :-)

Jeg har før med succes benyttet html tabeller og fyldt dem med farve afhængig af værdien.

Dvs. du opretter en tabel som sådan:

<table>
<tr>

<% IF værdi = negativ Then %>
<td bgcolor="#ff0000" width="<% dynamisk ifht. din værdi %>">&nbsp;</td>
<% ELSE %>
<td bgcolor="EN anden farve">&nbsp;</td>
<% END IF %>

<% IF værdi = positiv Then %>
<td bgcolor="#00ff00" width="<% dynamisk ifht. din værdi %>">&nbsp;</td>
<% ELSE %>
<td bgcolor="EN anden farve">&nbsp;</td>
<% END IF %>

</tr>
</table>

Lidt simplificeret, men jeg håber du forstår hvad jeg mener :-)

Denne liggger ned, men konceptet er det sammen ved lodrette. Dette virker og er virkelig simpelt og virker derfor også i alle browsere.

Du kan evt. vælge at benytte en ligge gif og så strække den...

/Kristian

Den anden farve er selvfølgelig neutral så man ikke kan se der er en TD

Den viser jo blot en anden farve når søjlen skal være negativ eller positiv. Det jeg er ude efter er at når værdien er positiv skal søjlen bevæge sig opad eller til højre. Er værdien negativ så skal søjlen bevæge sig nedad eller til venstre. Altså alt efter om det er vandrette eller lodrette søjler jeg anvender.
Ligesom når man ser en rigtigt diagram med x,y

Det gør den jo også:

<td bgcolor="#00ff00" width="<% dynamisk ifht. din værdi %>">&nbsp;</td>

Værdien som du sætter inde i width vil jo ekspandere (få den til at bevæge sig op eller ned til venstre eller til højre) td.

Den værdi har beregnet søjlerne skal flytte sig efter skal du indsætte der. DVs. response.write dinværdi inde i width. Du skal evt. benytte en faktor så søjlerne for den rigtige størrelse. Eks.: dinværdi * 10

Lav et farvet gif-billede på f.eks. 10x300px
Her efter kan du lave dit søjlediagram således:

<img src="billede.gif" height="45">
<img src="billede.gif" height="72">
<img src="billede.gif" height="13">

Osv...

Hvad så når feks. height="-123" vil den så bevæge sig den modsatte vej?

Det skal selvfølgelig være absolute tal! Du vælger et punkt på din side som udgør 0 herfra udvide du op og ned med absolute tal det vil således fungere som et søjlediagram.

........|

eller

        |.........

Det virker! Jeg ved det jeg har brugt det mange gange til at vise den slags grafik i gamle netscape browsere. Men som jeg også skrev i mit første indlæg kan man også benytte en gif som strækkes henholdsvis. Som desuden vil fungere på samme måde...Du havde jo hellere ikke ikke tænkt dig at skrive :<img src="billede.gif" height="-13"> vel? :-)

he he <img src="billede.gif" height="-13"> - nej det havde jeg nok ikke.
Jeg prøver lige...hvis det går helt i ged vender jeg tilbage.

Hvis du har konkrete kode spørgsmål til det du sidder og roder med så huske lige at smide koden med i spørgsmålet

Skal jeg nok

Så har jeg fået det lavet, men det er lodrette søjler. Det fungere udemærket, men det ville være kanon med vandrette søjler istedet for. Er der en af jer 2 der lige har en løsning på dette?

hmm..jammen er det ikke sådan som jeg har skrevet det når du laver det med td er det da vandret? Ellers forstår jeg dig ikke...

<img src="blank.gif" width="200"><img src="farve.gif" width="100"><br>
<img src="blank.gif" width="70"><img src="farve.gif" width="130"><br>
<img src="blank.gif" width="20"><img src="farve.gif" width="180">

Billedet "blank.gif" har samme farve som din baggrund. Farve.gif har en anden farve.

Ved at kombinere de to billeder kan du let lave negative vandrette søjler.
Eks. 1 angiver en positiv værdi på 100
Eks. 2 angiver en negativ værdi på 130
Eks. 3 angiver en negativ værdi på 180

Det virker :)

Nu kan jeg husker hvad problemet med giffer er...de er længere om at loade. Frem for den rene html. Løsningerne er i princippet ens, du skal nok bare teste hvad der virker bedst for dig. Fordelen ved htm er at du kan benytter mange forskellige farver dynamisk uden at skulle lave små giffer i det uendelige. Det kunne f.eks. være at du havde lyst til at have et interval fra 10-20 som skulle være gul og et andet fra 20-30 blåt osv osv. Hvis værdien er en sammensætning af flere værdier.

/Kristian :-)

Jeg har opdaget at jeg har skrevet forkert kl. 11:26:42.
Det er med vandrette søjler jeg har lavet og det fungere nemlig. Men det er de lodrette søjler jeg har problemer med...det må i undskylde  ;-)

Det er samme princip:

<table>
<% IF værdi = positiv Then %>
<tr>
<td bgcolor="black" height="5"></td>
</tr>
<% End IF %>
<% IF værdi = negativ Then %>
<tr>
<td bgcolor="black" height="5"></td>
</tr>
<% End IF %>
</table>

Dvs.:

.
.
.
.
.
-

eller

-
.
.
.
.
.

Du skal bare bruge <tr> istedet

/Kristian

krsk> hvordan vil du så lave flere lodrette søjler? Jeg skal bruge 11 stk. ialt.

Jeg tror nu ikke et højkomprimeret gif-billede på 1x10 pixels tager længere tid at lægge i cachen end en halv side html-tags.
Desuden er der jo den fordel ved billeder, at du f.eks. kan lave dine grafer til runde pinde eller stiblede linier.

Ikke for at nedgøre din løsning, krsk. Jeg foretrækker det bare selv sådan ;)

Jeg har lavet begge :-) Jeg kan lide begge, men jeg ville bare forsøge at forklare leasing fordele og ulemper. Men >good point< med striperne og den ekstra grafik! Så har han lidt at vælge mellem.

Så bruger du den første løsning med vandrette TD'er men du benytter <height> istedet for width. Så vil de ændre størrelse opad.

Måske skulle du finde en guide til html tabeller, eller bruge MS Frontpage til at lave tabellerne og kopiere dem over i det program du sidder med, så er det nemmere at overskue TD og TR i store mængder :-)

Jeg prøver lige at lave et eksempler...

krsk> Du må meget gerne lave et eksempel.

Hej leasing

Her er et eksempel, jeg har smækket styles på ret hurtigt så der er nok nogle af dem som er overflødige, men prøv dig frem og find det du bedst kan lide:

Her er et link til hjælp med stylesheet:

http://www.webguild.org/tech/tips/css2html.php
http://hotwired.lycos.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
TABLE
{
    BORDER-RIGHT: none;
    PADDING-RIGHT: 0px;
    BORDER-TOP: none;
    PADDING-LEFT: 0px;
    FONT-SIZE: 12px;
    BACKGROUND-IMAGE: none;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    BORDER-LEFT: none;
    COLOR: black;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: none;
}

TD
{
    BORDER-RIGHT: none;
    PADDING-RIGHT: 2px;
    BORDER-TOP: none;
    PADDING-LEFT: 2px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    BORDER-LEFT: none;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: none;
}

TD.POSITIV
{

}

TD.NEGATIV
{

}

TD.SJPOS1
{
    HEIGHT: 10px;
    BACKGROUND-COLOR: green
}

TD.SJPOS2
{
    HEIGHT: 20px;
    BACKGROUND-COLOR: Lime
}

TD.SJPOS3
{
    HEIGHT: 30px;
    BACKGROUND-COLOR: Lime;
    VISIBILITY: hidden;
}

TD.SJPOS4
{
    HEIGHT: 40px;
    BACKGROUND-COLOR: fuchsia;
    VISIBILITY: hidden;
}

TD.SJNEG1
{
    HEIGHT: 10px;
    BACKGROUND-COLOR: fuchsia;
    VISIBILITY: hidden;
}

TD.SJNEG2
{
    HEIGHT: 75px;
    BACKGROUND-COLOR: fuchsia;
    VISIBILITY: hidden;
}

TD.SJNEG3
{
    HEIGHT: 175px;
    BACKGROUND-COLOR: fuchsia
}

TD.SJNEG4
{
    HEIGHT: 50px;
    BACKGROUND-COLOR: fuchsia
}

TR.NEGATIV
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
        vertical-align: TOP
}

TR.POSITIV
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
        VERTICAL-ALIGN: BOTTOM
}


</style>

</head>
<body>



<table summary="">
<tr class="POSITIV">
        <td>
                <table summary="">
                <tr>
                        <td class="SJPOS1"></td>
                </tr>
                </table>
        </td>
        <td>
                <table summary="">
                <tr>
                        <td class="SJPOS2"></td>
                </tr>
                </table>
        </td>
        <td>
                <table summary="">
                <tr>
                        <td class="SJPOS3"></td>
                </tr>
                </table>
        </td>
        <td>
                <table summary="">
                <tr>
                        <td class="SJPOS4"></td>
                </tr>
                </table>
        </td>
</tr>
<tr class="NEGATIV">
        <td>
                <table summary="">
                <tr>
                        <td class="SJNEG1"></td>
                </tr>
                </table>
        </td>
        <td>
                <table summary="">
                <tr>
                        <td class="SJNEG2"></td>
                </tr>
                </table>
        </td>
        <td>
                <table summary="">
                <tr>
                        <td class="SJNEG3"></td>
                </tr>
                </table>
        </td>
        <td>
                <table summary="">
                <tr>
                        <td class="SJNEG4"></td>
                </tr>
                </table>
        </td>
</tr>
</table>

</body>
</html>