[CSS / HTML] Grafiek lijnen

Pagina: 1
Acties:
  • 1.080 views sinds 30-01-2008
  • Reageer

  • robinm
  • Registratie: Oktober 2003
  • Laatst online: 25-12-2025
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
  • Registratie: September 2001
  • Laatst online: 05-05 22:25

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.


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


  • NMe
  • Registratie: Februari 2004
  • Laatst online: 15-04 22:07

NMe

Quia Ego Sic Dico.

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 :)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • alienfruit
  • Registratie: Maart 2003
  • Laatst online: 00:59

alienfruit

the alien you never expected

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

  • KnoppenSpook
  • Registratie: Augustus 2000
  • Laatst online: 04-09-2023
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)

/me weet geen leuke quote voor in zijn signature


  • Zoefff
  • Registratie: September 2001
  • Laatst online: 05-05 22:25

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 :)


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


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.

  • sjroorda
  • Registratie: December 2001
  • Laatst online: 10:23
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
  • Registratie: Oktober 2003
  • Laatst online: 25-12-2025
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
  • Registratie: Februari 2004
  • Laatst online: 15-04 22:07

NMe

Quia Ego Sic Dico.

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?

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • BreeeZe
  • Registratie: Februari 2000
  • Laatst online: 09:17

BreeeZe

Devt

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:
1
2
3
4
5
6
$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
  • Registratie: Oktober 2000
  • Laatst online: 04-05 08:30

chem

Reist de wereld rond

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 ;)

Klaar voor een nieuwe uitdaging.


  • Zoefff
  • Registratie: September 2001
  • Laatst online: 05-05 22:25

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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 :D

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


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


  • robinm
  • Registratie: Oktober 2003
  • Laatst online: 25-12-2025
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
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   +-----+<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 :P

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


  • NMe
  • Registratie: Februari 2004
  • Laatst online: 15-04 22:07

NMe

Quia Ego Sic Dico.

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

PW>>WG

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • sanderb
  • Registratie: November 2000
  • Laatst online: 09:03
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.

" A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools. " - Douglas Noel Adams


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
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Je kan eventueel naar Border Slants kijken :)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
Ja, dat bedoelde ik dus :P had alleen de link niet meer :)

  • chris
  • Registratie: September 2001
  • Laatst online: 11-03-2022
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é
  • Registratie: Maart 2002
  • Laatst online: 11:13

André

Analytics dude

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
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
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 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Pagina: 1