Taartdiagram in SVG ?
Erik Baas
Ik redeneerde dat er, net zoals voor cirkels en ellipsen, ook wel een
code voor een cirkelsector zou bestaan, waarbij je dan de hoek in graden
(of radialen) zou kunne opgeven, maar ik kan het niet vinden...
--
Erik.
Warden Dave
Welnu, je kunt naar wens een 'path' definiëren
(http://www.w3.org/TR/SVG/paths.html - dat wil dus +- zeggen dat je van punt
naar punt lijnen 'trekken' kunt, ook krommen - zie 'arcTo' -, om zo tot een
vlak te komen dat je vullen kunt).
Een goed voorbeeld met uitleg:
http://www.codestore.net/store.nsf/unid/EPSD-5DTT4L
WD
Branko Collin
In Inkscape kun je makkelijk taartpunten maken door een cirkel te
maken, en een driehoek, en die twee objecten dan te intersecten (ben
even vergeten hoe dit in het Nederlands heet).
In code is dat waarschijnlijk nodeloos ingewikkeld, maar 't is een
manier.
--
branko collin
"I'm a little man, and I am also evil, also into cats,
... also into cats" - Fall Out Boy, This Ain't a Scene,
It's an Arms Race
Erik Baas
> > Kun je in SVG op een simpele manier een taartdiagram maken ?
> Welnu, je kunt naar wens een 'path' definiëren
> (http://www.w3.org/TR/SVG/paths.html - dat wil dus +- zeggen dat je van punt
> naar punt lijnen 'trekken' kunt, ook krommen - zie 'arcTo' -, om zo tot een
> vlak te komen dat je vullen kunt).
Had ik aan gedacht, maar ik dacht (en hoopte) dat het simpeler zou
kunnen; ook al omdat ik met die arcTo-dingen niet zo handig ben. ;-)
Ik ben dus met Branko's idee aan de slag gegaan, omdat een cirkel plus
een driehoek veel minder rekenwerk vergen. Jammer genoeg komt er in FF
niet uit wat je zou verwachten, met intersection zowel als union lijkt
iets mis te gaan.
Zie http://www.nsesoftware.nl/erikbaas/images/taart3.svg en
http://www.nsesoftware.nl/erikbaas/images/taart3.png (van een voorbeeld
van apike.ca ).
Ik heb het met Inkscape geprobeerd, daar is inderdaad ook een
"intersection" mogelijk, en ik dacht de geproduceerde code als voorbeeld
te kunnen gebruiken. Mis: Inkscape slaat het resultaat op als een
"path"...
Dus zal ik me eerst maar eens meer gaan verdiepen in paths met arcTo
etc... Dank aan beide voor het meedenken ! :-)
--
Erik.
Erik Baas
> Dus zal ik me eerst maar eens meer gaan verdiepen in paths met arcTo
> etc...
Valt mee: ik haalde "arc" en "Bézier curve" door elkaar... ;-)
--
Erik.
John Bokma
>
> On Tue, 01 Apr 2008 13:08:48 +0200, Erik Baas
> <ejb...@gmail.com.invalid> wrote:
>
>>Kun je in SVG op een simpele manier een taartdiagram maken ?
>>
>>Ik redeneerde dat er, net zoals voor cirkels en ellipsen, ook wel een
>>code voor een cirkelsector zou bestaan, waarbij je dan de hoek in graden
>>(of radialen) zou kunne opgeven, maar ik kan het niet vinden...
>
> In Inkscape kun je makkelijk taartpunten maken door een cirkel te
> maken, en een driehoek, en die twee objecten dan te intersecten (ben
> even vergeten hoe dit in het Nederlands heet).
doorsnede, geen idee of dat dan doorsnijden wordt :-D
--
John Bokma http://johnbokma.com/
Erik Baas
> > In Inkscape kun je makkelijk taartpunten maken door een cirkel te
> > maken, en een driehoek, en die twee objecten dan te intersecten (ben
> > even vergeten hoe dit in het Nederlands heet).
> doorsnede, geen idee of dat dan doorsnijden wordt :-D
Ik ook niet, maar gelukkig is mijn Inkscape naar het Engels vertaald.
;-)
De functie in kwestie werkt trouwens wel goed, maar als je dan een
svg-bestand opslaat blijken alle objecten vervangen door één path,
terwijl ik via die omweg juist hoopte uit te vinden hoe I. met
intersection (en union) omgaat...
--
Erik.
John Bokma
Dat weet je dan nu, het wordt omgezet in een pad. Het zal dan wellicht
onmogelijk zijn om de taartpunt op te slaan, terug te lezen, en de
intersection ongedaan te maken.
Erik Baas
> >> > In Inkscape kun je makkelijk taartpunten maken door een cirkel te
> >> > maken, en een driehoek, en die twee objecten dan te intersecten (ben
> >> > even vergeten hoe dit in het Nederlands heet).
> > De functie in kwestie werkt trouwens wel goed, maar als je dan een
> > svg-bestand opslaat blijken alle objecten vervangen door één path,
> > terwijl ik via die omweg juist hoopte uit te vinden hoe I. met
> > intersection (en union) omgaat...
> Dat weet je dan nu, het wordt omgezet in een pad. Het zal dan wellicht
> onmogelijk zijn om de taartpunt op te slaan, terug te lezen, en de
> intersection ongedaan te maken.
Inkscape kan het inderdaad niet, en ik ook niet. ;-)
Het geeft niet: ik ben goed op weg met het (ASP-)script, wat van een
reeks getallen het percentage van het totaal berekent, en daar een taart
van moet gaan bakken. Toch maar een path gemaakt, dan maar wat meer
gegoochel met gonio... :-)
--
Erik.
Inca
> Ik ook niet, maar gelukkig is mijn Inkscape naar het Engels vertaald.
> ;-)
Off-topic, maar juist Inkscape (samen met enkele andere progamma's die Gtk
gebruiken) wil enorm graag vanalles in het Nederlands doen, terwijl mijn
Windows toch hartstikke Engels is... Ik snap niet helemaal waarom maar vind
het toch wel vrij irritant.
Inca
--
There is no need for a lavalamp unless you're on drugs - Gilmore Girls
John Bokma
> Erik Baas wrote:
>> Ik ook niet, maar gelukkig is mijn Inkscape naar het Engels vertaald.
>> ;-)
>
> Off-topic, maar juist Inkscape (samen met enkele andere progamma's die
> Gtk gebruiken) wil enorm graag vanalles in het Nederlands doen,
> terwijl mijn Windows toch hartstikke Engels is... Ik snap niet
> helemaal waarom maar vind het toch wel vrij irritant.
Is het niet om te schakelen in het programma zelf?
Ik gok, overigens, dat dit komt omdat je tijd, valuta, e.d. wel in het
Nederlands weergeeft? (Ik heb hier een soortgelijk probleem, sommige
toetsnamen in menus staan nog vrolijk in het Spaans...).
Hans Konings
> Inca :
>> Off-topic, maar juist Inkscape (samen met enkele andere progamma's die
>> Gtk gebruiken) wil enorm graag vanalles in het Nederlands doen,
>> terwijl mijn Windows toch hartstikke Engels is... Ik snap niet
>> helemaal waarom maar vind het toch wel vrij irritant.
> Is het niet om te schakelen in het programma zelf?
> Ik gok, overigens, dat dit komt omdat je tijd, valuta, e.d. wel in het
> Nederlands weergeeft? (Ik heb hier een soortgelijk probleem, sommige
> toetsnamen in menus staan nog vrolijk in het Spaans...).
Dat is geen probleem, dat is juist goed, amigo. <G>
--
gr-hk
"Yo mis congas. Y así empezó: la la la la, doo doo... alone. So I do my
drums: tuc pac pac tuc..." - Jerry González
John Bokma
> John Bokma :
>
>> Inca :
>
>>> Off-topic, maar juist Inkscape (samen met enkele andere progamma's die
>>> Gtk gebruiken) wil enorm graag vanalles in het Nederlands doen,
>>> terwijl mijn Windows toch hartstikke Engels is... Ik snap niet
>>> helemaal waarom maar vind het toch wel vrij irritant.
>
>> Is het niet om te schakelen in het programma zelf?
>> Ik gok, overigens, dat dit komt omdat je tijd, valuta, e.d. wel in het
>> Nederlands weergeeft? (Ik heb hier een soortgelijk probleem, sommige
>> toetsnamen in menus staan nog vrolijk in het Spaans...).
>
> Dat is geen probleem, dat is juist goed, amigo. <G>
:-) Een toets met de opdruk "Pet Sis" is best verwarrend als je OS
Engelstalig is verder :-D
Branko Collin
<ejb...@gmail.com.invalid> wrote:
>Het geeft niet: ik ben goed op weg met het (ASP-)script, wat van een
>reeks getallen het percentage van het totaal berekent, en daar een taart
>van moet gaan bakken. Toch maar een path gemaakt, dan maar wat meer
>gegoochel met gonio... :-)
En dan kun je volgens mij net zo goed de boogfunctie gebruiken.
Anyway, het liet me niet los, dus:
---- begin ----
<?php
header('Content-type: image/svg+xml');
echo <<<END
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" version="1.0" width="600"
height="600" id="svg2">
<title>Pie chart</title>
<desc>Picture of a pie chart</desc>
END;
/* Test values */
$data[] = 27;
$data[] = 177;
$data[] = 15;
$data[] = 81;
$max = count($data);
$colours = array('red','orange','yellow','green','blue');
$sum = 0;
foreach ($data as $key=>$val) {
$sum += $val;
}
$deg = $sum/360; // one degree
$jung = $sum/2; // necessary to test for arc type
/* Data for grid, circle, and slices */
$cx = 300; // Center of the circle
$cy = 300;
$radius = 150;
$dx = $radius; // Starting point:
$dy = 0; // first slice starts in the East
$oldangle = 0;
/* Loop through the slices */
for ($i = 0; $i<$max; $i++) {
$angle = $oldangle + $data[$i]/$deg; // cumulative angle
$x = cos(deg2rad($angle)) * $radius; // x of arc's end point
$y = sin(deg2rad($angle)) * $radius; // y of arc's end point
$colour = $colours[$i];
if ($data[$i] > $jung) {
// arc spans more than 180 degrees
$laf = 1;
}
else {
$laf = 0;
}
$ax = $cx + $x; // absolute $x
$ay = $cy + $y; // absolute $y
$adx = $cx + $dx; // absolute $dx
$ady = $cy + $dy; // absolute $dy
print "\n";
print "<path d=\"M$cx,$cy "; // move cursor to center
print " L$adx,$ady "; // draw line away away from cursor
print " A$radius,$radius 0 $laf,1 $ax,$ay "; // draw arc
print " z\" "; // z = close path
print " fill=\"$colour\" stroke=\"black\" stroke-width=\"2\"
";
print " fill-opacity=\"0.5\" stroke-linejoin=\"round\" />";
$dx = $x; // old end points become new starting point
$dy = $y; // id.
$oldangle = $angle;
}
print "\n</svg>\n";
?>
---- einde ----
Arme alfa, ik. Als ik de wiskunde ook echt begrepen had, had dit een
half uurtje geduurd om te maken... Vandaar ook de absolute waarden;
van relatieve waarden werd ik op een gegeven moment horendol.
Helaas voor je heb ik niet ergens een ASP-server draaien, maar
misschien kun je het bovenstaande omkatten. PHP werkt alleen met
'gradiants', maar voor de rest is het rekenwerk natuurlijk hetzelfde.
Resultaat: <http://www.abeleto.nl/temp/piechart.php>.