[PHP] Wat voor grafiek is dit en hoe teken ik hem?

[Reveller]

Neem als voorbeeld de statistieken van T.net:



In deze grafiek kan ik zien dat het totale aantal pageviews op 4 mei om 16:00 uur, 23.351 was. Ook kan ik bijvoorbeeld zien dat ongeveer een vierde van deze pageviews werd geleverd door Adrastos.

Ik heb over deze grafiek 2 vragen:

• hoe heet zo'n grafiek waar meerdere "lagen" op elkaar liggen (dan weet ik waar ik op moet Googlen)?
• hoe maak je zo'n grafiek? Dat wil zeggen: hoe maak ik met de functies van php zo'n gekleurd vlak? Ik gebruik de volgende code om een lijndiagram te tekenen:

PHP:

/**
 * @param $graph Resource image
 * @param $img Image variables (i.e. width, height)
 * @param $y_values Graph values
 * @param $y_max The highest value in $y_values
 * @param $color Color of the line
 */
function linechart($graph, $img, $y_values, $y_max, $color) {
  $x_offset = 50;
  $odd = 1;
  foreach ($y_values as $key => $value) {
    imageantialias($graph, true);
    if ($odd % 2) {
      $from = (150 - ($value / $y_max * 150)) + 30;
      if ($odd != 1) {
        imageline($graph, $x_offset - $img->unitwidth, $to, $x_offset, $from, $color);
      }
    }
    else {
      $to = (150 - ($value / $y_max * 150)) + 30;
      imageline($graph, $x_offset - $img->unitwidth, $from, $x_offset, $to, $color);
    }
    imageantialias($graph, false);
    $x_offset = $x_offset + $img->unitwidth;
    $odd++;
  }
}

Moet ik deze code aanpassen m.b.v. imagefilledpolygon of is er een andere manier?

[moto-moi]

rrdtools kan zo'n grafiek maken, bijvoorbeeld:

[genosis]

JP Graph kan ook allerlei grafieken, deze moet er ook bij staan (http://www.aditus.nu/jpgraph/)

Edit: Gevonden...
Edit2: Je moet dan natuurlijk wel zelf even wat profi kleurtjes in stellen standaard is nogal goedkoop...



http://www.aditus.nu/jpgraph/img/gallery/gradient2fill.png

[ Voor 61% gewijzigd door genosis op 06-05-2007 16:37 . Reden: Plaatje gevonden :) ]

[Reveller]

moto-moi schreef op zondag 06 mei 2007 @ 16:31:
rrdtools kan zo'n grafiek maken

Maar RDD Tools is geen PHP applicatie, dus moeilijk om bij te "spieken" hoe ze die grafiek maken

genosis schreef op zondag 06 mei 2007 @ 16:33:
JP Graph kan ook allerlei grafieken, deze moet er ook bij staan (http://www.aditus.nu/jpgraph/)

JP Graph is een mooi stukje software, maar bevat ontzettend veel features die ik nooit zal gebruiken. Ik houd er niet van om maar een hoop classes te verzamelen en die te bundelen binnen een pakket dat je dan weer uitgeeft als "van jou". Ik snap dat je niet het wiel opnieuw moet gaan uitvinden, maar ik vind het ook interessant om een beetje hiermee te prutsen...houdt je van de straat

Dus bedankt voor je reply, maar ik wil nog steeds erg graag weten wat de naam van zo'n soort grafiek is en of je hem maakt met imagefilledpolygon (ik zal ook even de source van JP Graph doorploeteren om te kijken hoe zij het doen )

[ Voor 14% gewijzigd door Reveller op 06-05-2007 17:07 ]

[Janoz]

Je denkt veel te moeilijk. Een dergelijke grafiek is niks meer dan een staaf grafiek. Die staafjes kun je keurig tekenen met img line of img rectangle. Als je eerst dat voor elkaar gekregen hebt kun je vervolgens gaan stapelen. Dat is niks meer dan een paar verschillende rectangles op elkaar te stapelen.

[Reveller]

Janoz schreef op zondag 06 mei 2007 @ 17:12:
Je denkt veel te moeilijk. Een dergelijke grafiek is niks meer dan een staaf grafiek. Die staafjes kun je keurig tekenen met img line of img rectangle. Als je eerst dat voor elkaar gekregen hebt kun je vervolgens gaan stapelen. Dat is niks meer dan een paar verschillende rectangles op elkaar te stapelen.

Nu ik eens goed naar die grafiek uit de startpost kijk, zie ik dat je gelijk hebt. Maar bijvoorbeeld bij deze grafiek is het wel degelijk een lijn ipv diverse staafjes, toch?



ik ben er trouwens achter dat het een "stacked line chart" is die ik wil maken. Janoz heeft het, conform de openingspost, over een "stacked bar chart", maar dat is dus niet wat ik zoek

[ Voor 13% gewijzigd door Reveller op 06-05-2007 17:39 ]

[Onno_Devine]

Volgens mij is het wel degelijk die grafiek die jij wilt hebben.
Alleen is er veel meer data in verwerkt, en wat dan vrij vergelijkbaar met elkaar is.
Dus neem de getallen 1 en 10, hier tussen zitten dat 1,1; 1,1; 1,2; 1,1 etc 1 tot 10 lijkt klein, maar als er heel veel verschillende datagetallen gegeven worden, wat dicht bij elkaar ligt, krijg je idd een effect als staafjes.
Oftewel hoe meer informatie je probeert te laten zien in een relatief kleine afbeelding.
Volgens mij is dit wat zich voordoet bij de stats van T.net

[ Voor 9% gewijzigd door Onno_Devine op 06-05-2007 17:56 ]

[dEUSdude]

Reveller schreef op zondag 06 mei 2007 @ 17:37:
[...]

Nu ik eens goed naar die grafiek uit de startpost kijk, zie ik dat je gelijk hebt. Maar bijvoorbeeld bij deze grafiek is het wel degelijk een lijn ipv diverse staafjes, toch?

[afbeelding]

Op het oog wel, maar zoom maar eens ver in op het plaatje, dan zie je vanzelf dat het eigenlijk allemaal hele dunne staafjes zijn, heel dichtbij elkaar geplaatst/tegen elkaar aan.
Uiteindelijk maken al die dunne staven tegen elkaaraan gezamelijk een mooie vloeiend lijn.

[Reveller]

dEUSdude schreef op zondag 06 mei 2007 @ 17:58:
[...]
Op het oog wel, maar zoom maar eens ver in op het plaatje, dan zie je vanzelf dat het eigenlijk allemaal hele dunne staafjes zijn, heel dichtbij elkaar geplaatst/tegen elkaar aan.
Uiteindelijk maken al die dunne staven tegen elkaaraan gezamelijk een mooie vloeiend lijn.

Mja, toch lijkt het me onzinning om 1000-en bars te tekenen als het ook met een lijn kan. Ik ken het verschil tussen concreet en continue, maar dat maakt voor een overzicht als uit de startpost toch niet zoveel uit. Enfin, het is nogal provosorisch, maar hiermee is het gelukt:

PHP:

function polygon($graph, $img, $y_values, $y_max) {
  $x_offset = 50;
  $odd = 1;
  $points[] = 50;
  $points[] = 180; // oorsprong
  foreach ($y_values as $key => $value) {
    $points[] = $x_offset;
    if ($odd % 2) {
      $from = (150 - ($value / $y_max * 150)) + 30;
      $points[] = $from;
    }
    else {
      $to = (150 - ($value / $y_max * 150)) + 30;
      $points[] = $to;
    }
    $x_offset = $x_offset + $img->unitwidth;
    $odd++;
  }
  $points[] = 450;
  $points[] = 180; // eindpunt
  imagefilledpolygon($graph, $points, count($y_values) + 2, $img->gridcolor);
}

Nu nog verschillende lijnen stacken (!) Misschien ga ik nog terugkomen op dit polygoon verhaal en het toch met bars doen, maar dan ben ik toch mooi even bezig geweest

[ Voor 6% gewijzigd door Reveller op 06-05-2007 18:08 ]

[SchizoDuckie]

is php/swf charts niet iets voor je?

Don't re-invent the wheel enzo

[Reveller]

SchizoDuckie schreef op zondag 06 mei 2007 @ 19:37:
is php/swf charts niet iets voor je?

Don't re-invent the wheel enzo

Reveller schreef op zondag 06 mei 2007 @ 16:48:
JP Graph is een mooi stukje software, maar bevat ontzettend veel features die ik nooit zal gebruiken. Ik houd er niet van om maar een hoop classes te verzamelen en die te bundelen binnen een pakket dat je dan weer uitgeeft als "van jou". Ik snap dat je niet het wiel opnieuw moet gaan uitvinden, maar ik vind het ook interessant om een beetje hiermee te prutsen...houdt je van de straat

Dus dank je voor de link, maar ik re-invent graag...

[Janoz]

Tja, als je graag reinvent is het misschien ook handig wanneer je ook daadwerkelijk zelf eens wat harder gaat nadenken en probeert overeenkomsten te vinden. Probeer eerst gewoon maar eens een stacked bar chart te maken. Als je dit voor elkaar gekregen hebt dan is het helemaal niet zo moeilijk meer om 1 met schuine lijntjes te maken. Het enige verschil is dat je per sample moment niet een rechthoek tekent (per groep), maar een ruitje met twee verticale zijden tussen twee samples.

[Verwijderd]

Niet om bijdehand te zijn, maar op een pixel scherm, als je de breedte van de "rechthoekjes" 1px maakt, is het volgens mij om het even of je een stacked-line of stacked-bar diagram neemt. Stacked bar lijkt me namelijk in PHP icm GD wat eenvoudiger te maken nl.

[pietje63]

Verwijderd schreef op maandag 07 mei 2007 @ 10:25:
Niet om bijdehand te zijn, maar op een pixel scherm, als je de breedte van de "rechthoekjes" 1px maakt, is het volgens mij om het even of je een stacked-line of stacked-bar diagram neemt. Stacked bar lijkt me namelijk in PHP icm GD wat eenvoudiger te maken nl.

Maar als er een 'makkelijke' manier voor ee stacked-line chart ben ik er van overtuigd dat dit de performance ten goede komt. Wat je daarbij namelijk eigenlijk doet is een lijntje tekenen en daarna een fill van alles eronder. Tegenover het tekenen van honderderden lijntjes.

[Janoz]

Wat denk je dat een fill is .. Lijntjes tekenen is zelfs efficienter dan een fill. In computer graphics is het tekenen van een horizontale rechte lijn het efficients, gevolgd door een vertikale lijn (de reden voor deze opvolging is de memory mapping). Een fill daarintegen is een erg dure vaak recursieve actie waarbij bij elke pixel gekeken moet worden of er al een rand gevonden is.

De implementatie van het renderen van een polygon is vaak opgebouwd uit het opsplitsen in convex polygonen, het goed sorteren van de edges en vervolgens van boven naar beneden (of omgekeert) verticale lijntjes tekenen.

[Grijze Vos]

pietje63 schreef op maandag 07 mei 2007 @ 11:04:
[...]

Maar als er een 'makkelijke' manier voor ee stacked-line chart ben ik er van overtuigd dat dit de performance ten goede komt. Wat je daarbij namelijk eigenlijk doet is een lijntje tekenen en daarna een fill van alles eronder. Tegenover het tekenen van honderderden lijntjes.

Euhm, (versimpeld) een lijntje tekenen is een rechthoek van 1 bij X tekenen, en dat doe je dan voor Y lijntjes.
Een fill doet een rechthoek van X bij Y tekenen. Zelfde complexiteit hoor. Zal echt bar weinig schelen.
Is je figuur al niet meer zo eenvoudig, dan wordt het zelfs complexer om een fill te doen. (Zie Janoz' post hierboven.)

Als je krommen gaat tekenen dan zal je met anti-aliasing e.d. moeten gaan pielen om het netjes uit te laten zien, denk ik zo. (Doe je dat niet dan teken je effectief ook gewoon stacked-lines.)

[ Voor 7% gewijzigd door Grijze Vos op 07-05-2007 11:19 ]