Cirkeldiagram met database gegevens

Door Jan Keizer op 27-05-2015 20:24 gewijzigd op 27-05-2015 22:26

1.971 views

Hallo allemaal,

Ik ben voor school bezig met een website en ik wil een zogenaamde 'pie chart' op mijn site hebben. Deze chart moet aangeven hoeveel procent van de gebruikers van het systeem mannelijk of vrouwelijk zijn. Dit staat aangegeven onder de table "geslacht' en als waarde heeft het m of v. Nu wil ik niet om een code vragen, maar om advies. Is zo'n dergelijke chart wel mogelijk als ik van 'count' gebruik moet maken, en moet ik hier google charts (of een ander soort) voor gebruiken?

Alvast bedankt.

Ward van der Put

27-05-2015 21:59

Google Charts ;)

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Maar de visualisatie is maar de helft van het probleem: je moet die grafiek ook nog van de juiste data voorzien. Als je die count() eenmaal op orde hebt, denk ik dat je de uitkomst daarvan voor een schoolopdracht best met Google Charts mag weergeven.

Johan K

27-05-2015 22:56 gewijzigd op 27-05-2015 22:58

Hoewel google charts makkelijk te gebruiken is, kijk ook nog eventjes naar Chart.js, iets lastiger in gebruik maar vind persoonlijk wel dat er mooiere grafieken uitkomen.

http://www.chartjs.org/docs/#doughnut-pie-chart

Thomas van den Heuvel

27-05-2015 22:57

database --[query]--> data in php --[data formatteren voor verdere verwerking]--> grafisch programma --[genereren/bouwen output]--> scherm.

Splits het op in deelproblemen.

Onbekende gebruiker

28-05-2015 10:59

D3.js

Of in PHP een image genereren met de GD library en die serveren.
http://php.net/manual/en/image.examples-png.php

Jan R

28-05-2015 14:41 gewijzigd op 28-05-2015 18:35

Ik heb 1tje zelf geschreven voordat ik library's vond.
De include is voor een array van kleuren te hebben.
$alleKleuren=imagecolors($im);
met deze link krijg je dan dit resultaat

vb:


<?php
	//maak een rondgrafiekje
	header("Content-Type: image/png");
	include_once ('../php/functions.php');
    
	$tekst = html_entity_decode($_GET['text'],ENT_QUOTES,"UTF-8");
	$value = $_GET['v'];
	$values= explode(',', $value);
	$totaal = 0;
	for($n=0;$n<count($values);$n++){
		$totaal+=$values[$n];
	}
	$im = @imagecreate(300, 320) or die("Cannot Initialize new GD image stream");
	$background_color = imagecolorallocate($im, 1, 1, 1);//eerste aanroep = achtergrond kleur
	$alleKleuren=imagecolors($im);
	imagecolortransparent($im, $background_color);//$background_color
	$text_color = $alleKleuren['black'];
	
	$kleuren=array(
		$alleKleuren['green'],//gewonnen
		$alleKleuren['yellow'],//remise
		$alleKleuren['red'],//verloren
		$alleKleuren['pink'],//forfait gekregen
		$alleKleuren['cyan']//forfait gegeven
	);
	for ($n=count($kleuren);$n<count($values);$n++){
		$kleuren[] = $alleKleuren[array_rand($alleKleuren)];
	}
	$einde=0;	
	$delta=pi()/180;	
	for($n=0;$n<count($values);$n++){
		if($values[$n]>0){
			$start=$einde;
			$taartHoek=(360/$totaal*$values[$n]);
			$einde=$start+$taartHoek; 
			imagefilledarc ($im, 150, 150, 250, 250,  $start, $einde, $kleuren[$n],IMG_ARC_PIE);
			$phi = $delta * ($einde-($taartHoek/2));
			$cx = 100+100*cos($phi);
			//helft (image/2) -50 marge van 25 per kant
			$cy = 100+100*sin($phi);
			imagestring($im, 5, $cx+50, $cy+50, $values[$n] , $alleKleuren['black']);
		}
	}
	imagettftext ($im,16,0,80,300,$text_color,'TIMES.TTF',$tekst);
	//imagestring($im, 5, 100, 300,  $tekst, $text_color); //param 2 = fontsize 1-5 
	imagepng($im);
	imagedestroy($im);
?>

Reageren

Inloggen om te reageren