[CSS / HTML] Grafiek lijnen

[robinm]

Voor een site wil ik een soort van grafiek tekenen die in gemaakt uit gegevens uit een database. Dat gegevens eruit halen en de punten uit de database neerzetten lukt me ook wel maar die punten moeten worden verbonden met lijnen.
Deze lijnen zijn soms horizontaal, niet verticaal en vaak schuin. Hoe kan ik dit doen?

Ik vind hier alleen maar suggesties voor php met gd maar de server waar deze site op gaat draaien (interne server) ondersteunt dit niet en er mag niets aan de configuratie worden veranderd.

robin

[Zoefff]

Grafiekjes maken met PHP zónder GDlib is toch wel een handicap hoor. "Vroeger" werden er nog wel eens staafdiagrammen gemaakt met tabellen door de cellen een bepaalde hoogte mee te geven, misschien dat je zoiets kan proberen. En anders hetzelfde idee, alleen dan met CSS. Waarbij je voor de data bijvoorbeeld een defenition-list kan gebruiken.

Een grafieklijn maken lijkt me vrijwel onmogelijk met CSS/HTML.

[NMe]

Wanneer je geen GD hebt, kun je eens kijken of ImageMagick aanwezig is op de server. Zie ook onze FAQ: P&W FAQ - Image Manipulation in PHP

[alienfruit]

Binnenkort schijnt het wel te kunnen als je deze specificatie leest: http://www.whatwg.org/specs/web-apps/current-work/#dynamic

[KnoppenSpook]

Misschien VML ( http://www.microsoft.com/mind/0100/VML/VML.asp ) een optie? Soort voorloper van SVG en wordt prima gerenderd in Internet Explorer (FF weet ik niet)

[Zoefff]

Wat je ook kan doen (bedenk ik me nu ineens) is, zoals ik al eerder zei, een staafdiagram maken, alleen dan met een interval van maar 1 pixel. Als je het element waarmee je de "staven" maakt dan alleen een border-top geeft, lijkt het net alsof je een lijn hebt

[Verwijderd]

Je zou kunnen denken aan een actionscript/flash oplossing http://www.blinex.com/ verkoopt zelfs componenten om ze te maken. Maar zelf programmeren is ook niet al te moeilijk.

[Skaah]

JPGraph: http://www.aditus.nu/jpgraph/index.php

[sjroorda]

Skaah schreef op zondag 03 juli 2005 @ 20:28:
JPGraph: http://www.aditus.nu/jpgraph/index.php

Quote van die website:

Support for both GD1 and GD2 The library will autodetect which library is installed.

En tja, dat draait er dus niet

[robinm]

Zoefff schreef op zondag 03 juli 2005 @ 20:10:
Wat je ook kan doen (bedenk ik me nu ineens) is, zoals ik al eerder zei, een staafdiagram maken, alleen dan met een interval van maar 1 pixel. Als je het element waarmee je de "staven" maakt dan alleen een border-top geeft, lijkt het net alsof je een lijn hebt

Ja, daar had ik ook aangedacht maar de grafiek loopt over tijden 8uur, 13uur, 22uur

In die tijden zijn er waarden en hij moet daar tussen dus vloeiend lopen. Hoe kan ik dat dan doen, want als ik per uur doe wordt het nog een blokkenlijn

[NMe]

robinm schreef op zondag 03 juli 2005 @ 21:24:
Ja, daar had ik ook aangedacht maar de grafiek loopt over tijden 8uur, 13uur, 22uur

In die tijden zijn er waarden en hij moet daar tussen dus vloeiend lopen. Hoe kan ik dat dan doen, want als ik per uur doe wordt het nog een blokkenlijn

Als je geen images kan tekenen met een van de tools die hierboven genoemd zijn, dan kan het niet voor zover ik weet. Heb je die tools al eens opgezocht? Gekeken of er iets ondersteund wordt door je host?

[BreeeZe]

robinm schreef op zondag 03 juli 2005 @ 21:24:
[...]


Ja, daar had ik ook aangedacht maar de grafiek loopt over tijden 8uur, 13uur, 22uur

In die tijden zijn er waarden en hij moet daar tussen dus vloeiend lopen. Hoe kan ik dat dan doen, want als ik per uur doe wordt het nog een blokkenlijn

Als je tussen 2 punten die je uit de database hebt nog 10 staafjes ofzo zet waarvan je de waarde zelf uitrekend wordt het vloeiender, hoe meer je er tussen plant hoe mooier natuurlijk.

PHP:

$verloop = (($waarde1 - $ waarde2) % 10);
$i = 1;
while ($i <= 10){
tussenwaarde[$i] = ($1 * $verloop);
$i++;
}

_{Weet niet of de php code helemaal goed is maar het gaat om het idee}

[chem]

robinm schreef op zondag 03 juli 2005 @ 21:24:
[...]


Ja, daar had ik ook aangedacht maar de grafiek loopt over tijden 8uur, 13uur, 22uur

In die tijden zijn er waarden en hij moet daar tussen dus vloeiend lopen. Hoe kan ik dat dan doen, want als ik per uur doe wordt het nog een blokkenlijn

So?

Je moet niet de illusie wekken dat je metingen hebt verricht die je niet hebt gedaan; laat duidelijk zien wat je meetpunten zijn en trekt evt. een berekend gemiddelde ter indicatie voor de gebruiker.

Maar een vloeiende lijn tekenen omdat het mooier is klopt natuurlik niet

[Zoefff]

robinm schreef op zondag 03 juli 2005 @ 21:24:
[...]


Ja, daar had ik ook aangedacht maar de grafiek loopt over tijden 8uur, 13uur, 22uur

In die tijden zijn er waarden en hij moet daar tussen dus vloeiend lopen. Hoe kan ik dat dan doen, want als ik per uur doe wordt het nog een blokkenlijn

Dan moet je er gewoon waarden bijverzinnen, zie een paar posts hierboven.

Je krijgt dan zoiets:

Cascading Stylesheet:

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
dl {
    width:480px;
    height:300px;
    background-color:#EEEEEE;
    position:relative;
}
dt {
    position:absolute;
    bottom:0px;
    width:20px;
    height:18px;
    text-align:center;
}
dd {
    position:absolute;
    bottom:20px;
    margin-left:0px;
    width:1px;
    
    border-top:1px solid black;
}
.x_01 {
    left:0px;
}
.x_02 {
    left:20px;
}

HTML:

<dl>
    <dt class='x_01'>01</dt>
    <dd style='left:0px; height:150px;'></dd>
    <dd style='left:1px; height:151px;'></dd>
    <dd style='left:2px; height:152px;'></dd>
    <dd style='left:3px; height:153px;'></dd>
    <dd style='left:4px; height:154px;'></dd>
    <dd style='left:5px; height:155px;'></dd>
    <dd style='left:6px; height:156px;'></dd>
    <dd style='left:7px; height:157px;'></dd>
    <dd style='left:8px; height:158px;'></dd>
    <dd style='left:9px; height:159px;'></dd>
    <dd style='left:10px; height:160px;'></dd>
    <dd style='left:11px; height:161px;'></dd>
    <dd style='left:12px; height:162px;'></dd>
    <dd style='left:13px; height:163px;'></dd>
    <dd style='left:14px; height:164px;'></dd>
    <dd style='left:15px; height:165px;'></dd>
    <dd style='left:16px; height:166px;'></dd>
    <dd style='left:17px; height:167px;'></dd>
    <dd style='left:18px; height:168px;'></dd>
    <dd style='left:19px; height:169px;'></dd>
    <dt class='x_02'>02</dt>
    <dd style='left:20px; height:170px;'></dd>
    <dd style='left:21px; height:171px;'></dd>
    <dd style='left:22px; height:172px;'></dd>
    <dd style='left:23px; height:173px;'></dd>
    <dd style='left:24px; height:174px;'></dd>
    <dd style='left:25px; height:175px;'></dd>
    <dd style='left:26px; height:176px;'></dd>
    <dd style='left:27px; height:177px;'></dd>
    <dd style='left:28px; height:178px;'></dd>
    <dd style='left:29px; height:179px;'></dd>
    <dd style='left:30px; height:180px;'></dd>
    <dd style='left:31px; height:181px;'></dd>
    <dd style='left:32px; height:182px;'></dd>
    <dd style='left:33px; height:183px;'></dd>
    <dd style='left:34px; height:184px;'></dd>
    <dd style='left:35px; height:185px;'></dd>
    <dd style='left:36px; height:186px;'></dd>
    <dd style='left:37px; height:187px;'></dd>
    <dd style='left:38px; height:188px;'></dd>
    <dd style='left:39px; height:189px;'></dd>
</dt>

Maarja, het word wel een shitload aan code dan natuurlijk, voor 1 simpel kutgrafiekje

T werkt wel: http://zoefff.gotdns.com/got/grafiek_creatief.htm

[robinm]

chem schreef op zondag 03 juli 2005 @ 22:05:
[...]

So?

Je moet niet de illusie wekken dat je metingen hebt verricht die je niet hebt gedaan; laat duidelijk zien wat je meetpunten zijn en trekt evt. een berekend gemiddelde ter indicatie voor de gebruiker.

Maar een vloeiende lijn tekenen omdat het mooier is klopt natuurlik niet

De grafiek is een verloop van klachten. die nemen toe of af en in de benadering proportioneel evenredig.

[r0bert]

Als je een gevulde grafiek wilt maken, dus met onderkant een andere kleur dan de bovenkant, dan kun je het met elementen icm borders doen:
afhankelijk van de rc van de grafiek, voorbeeld is > 0 =stijgend
lh = linkerhoogte = bijv 100 ( \/ )
rh = rechterhoogte = bijv 150 (px voor het gemak, normaal natuurlijk naar verhouding berekenen)

code:

   +-----+<rh
   | div |
   |rh-lh|
   | 50px|
lh>+-----+
   | div |
   | lh  |
   |100px|
   +-----+

bijhorende css (ong):

*
    {   box-sizing          :   border-box;
    -moz-box-sizing     :   border-box;
    }

    div.stlBovenste
    {   width   : [X];     height  : [Y];
       _width   : 0px;     _height  : 0px;
        border-left     : [X] rgb(240,28,0)    solid; /* kleur vervangen door achtergrondkleur */
        border-bottom   : [Y] rgb(255,193,10)  solid; /* kleur vervangen door opvulkleur */
    }
en de onderste gewoon de opvulkleur natuurlijk

edit: maar serverside zou imo netter zijn

[ Voor 8% gewijzigd door r0bert op 04-07-2005 01:13 ]

[NMe]

Als iedereen dan toch de clientside kant op gaat, dan kan ik dit topic beter even een tikje over de schutting geven.

PW>>WG

[sanderb]

als snelste en makkelijkste clientside oplossing zou ik dan toch voor flash kiezen.
met de drawing api kun je heel simpel grafieken genereren aan de hand van data.
database -> php --> flash
van php naar flash kan op meerdere manieren. afhankelijk van de vorm en hoeveelheid van je data zou je kunnen kiezen voor xml bijvoorbeeld.

[Verwijderd]

wat me dan een mooie oplossing lijkt is flash die xml inleest, of eigenlijk xhtml tabellen

- je maakt een html pagina, met daarin alle data in tabellen, waarvan je degene die grafiek moeten worden op een een of andere manier markeert (class ofzo)
- met js zoek je al die tabellen op en vervangt ze door een flashfile waar je de tabeldata (xml) als parameter doorgeeft

[BtM909]

Je kan eventueel naar Border Slants kijken

[r0bert]

Ja, dat bedoelde ik dus had alleen de link niet meer

[chris]

Dit lijkt me prima iets voor PEAR/ImageGraph. Mooie grafieken, en output voor veel verschillende formaten, behalve jpg/gd/png is er ook support voor PDF en SWF. Daarvoor heb je ook libraries nodig, maar misschien dat je die wel hebt?

[André]

Door het dyanmisch schrijven van layers kun je lijnen uiteraard wel faken. Kijk voor een voorbeeld maar eens hier:

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

[RobIII]

http://www.maani.us/xml_charts/
Gratuit en maakt allerlei mooie graphs. Het enige wat je moet doen is XML uitpoepen.

Check vooral even de Gallery: http://www.maani.us/xml_charts/index.php?menu=Gallery

[ Voor 48% gewijzigd door RobIII op 04-07-2005 16:00 ]