grafiek maken

[slabbetje]

Ik ben bezig voor een project om een grafiek te tekenen.
Alleen hoe kan ik nu het beste de lijnen gaan neerzetten?
Want ik wil dus dat de hoogste waarden altijd boven hebben en dat hij de rest zelf berekent hoeveel % hij ongeveer van het 0 punt zit en de tussen waardes van mijn X en Y as.

<?php
ob_start();
include"includes/config.php";
header ("Content-type: image/png");

$maxWidth = 700; //IMAGE WIDTH
$maxHeight = 200; //IMAGE HEIGHT;
$grid_space = 25;
$grid_startX = 45;
$grid_startY = 5;

$im = @ImageCreate ($maxWidth + 50, $maxHeight + 50) or die ("Cannot Initialize new GD image stream"); //DONT TOUCH
$background_color = ImageColorAllocate($im, 0, 0, 0); //BACKGROUND COLOR
$grid_color = ImageColorAllocate ($im, 255, 255, 255);

//DONT TOUCH THIS ANYMORE!
$qt=mysql_query("select * from stat_graph");
//GRID
for ($i=0; $i <= $maxHeight/$grid_space; $i++) {
	//imageline($im, 25, $i*$grid_space, 25+$maxWidth,$i*$grid_space,$grid_color); // Drawing Horizontal lines
	imageline($im, $grid_startX, $grid_startY + $i*$grid_space, $grid_startX+$maxWidth, $grid_startY + $i*$grid_space, $grid_color); // Drawing Horizontal lines
}
for ($j=0; $j <= $maxWidth/$grid_space; $j++) {
	//imageline($im, $j*$grid_space, 0, $j*$grid_space, $maxHeight,$grid_color); // Drawing Vertical lines
	imageline($im, $grid_startX+$j*$grid_space, $grid_startY, $grid_startX+$j*$grid_space, $grid_startY+$maxHeight, $grid_color); // Drawing Horizontal lines
}



ImagePNG ($im);
ob_end_flush;
?>

 

[Frats]

Zoek een library. Je wil echt niet zelf met al die dingen rekening te gaan houden

Je kunt het beste een javascript library nemen, of een in Flash... die zijn het veelzijdigst.

 

[ErikBooy007]

Het hoeft niet persé een JavaScript lib te zijn. Ik heb wel eens met pChart (PHP) gewerkt en dat loopt als een trein. Vrijwel het enige wat je moet doen is je dataset definiëren, maar je kunt vrijwel alles aanpassen.

Mocht je dan toch een JavaScript lib willen gebruiken, dan vind ik persoonlijk Flot wel een goede. Voorbeelden, download

 

[slabbetje]

Oke ik ben nu aan het kijken naar flot maar ik snap geen ruk van die coordinaten

 

[ErikBooy007]

Als ik het me goed herinner, is het heel makkelijk. Je neemt een div, je geeft die wat styles (als ik me niet vergis moet dit met inline styles (style="width: .. " etc, en niet in een stylesheet).

Vervolgens krijg je het JavaScript stukje (je moet jquery.js en jquery.flot.js al "geinclude" hebben in de head) en je schrijft deze code:

[JS]
$(document).ready(function () {
var dataset = [[0,1], [1,3], [2,4], [3,8]];

$.plot($("#idvanjediv"), dataset);
});

[/JS]

En die coördinaten zijn heel gemakkelijk.

Je begint met een "square-bracket" ( [ ) daarmee geef je aan JavaScript aan dat je een array maakt (of een object eigenlijk ).

Vervolgens maak je in dat object voor elk punt in je grafiek weer objecten aan die je scheidt met komma's. In deze object geef je eerste een x-waarde aan (plek op de horizontale as), dan een komma en dan een y-waarde (plek op de verticale as).

Tenslotte sluit je af met een sluitbracket ( ] ).

Schematisch ziet het er dus zo uit:

[JS]

var dataset = [ [ eerste-x-waarde, eerste-y-waarde ], [ tweede-x-waarde, tweede-y-waarde ] ];

[/JS]

Dit is dus de syntax waar je je aan houden moet.

Deze blokken ( [ eerste-x-waarde, eerste-y-waarde ] ) kunnen er zoveel zijn als je zelf wilt.

[EDIT]
Mocht je nou meerdere dataset willen gebruiken, dan doe je dat zo:

[JS]
var dataset = [[0,1], [1,3], [2,4], [3,8]];
var dataset2 = [[0,2], [1,4], [2,5], [3,9]];
var dataset3 = [[0,0], [1,2], [2,3], [3,7]];

$.plot($("#idvanjediv"), [ dataset, dataset2, dataset3 ]);

[/JS]
[/EDIT]

[EDIT]
Spit ook eens de bron door van de voorbeelden, ik heb de link naar de voorbeelden in mijn bericht aangepast, die leidde eerst naar één specifiek (ingewikkeld) voorbeeld, maar nu kun je er nog meer vinden.
[/EDIT]

 

[slabbetje]

Het is al gelukt, ik ben nu bezig met de koppeling aan de database iedergeval bedankt!