Pagina 1 van 1

Online Grafieken tekenen

Geplaatst: 19 mar 2011, 13:35
door meneer van Hoesel
Soms is het wel eens handig om een grafiekje te kunnen laten zien. Dat kan natuurlijk door eerst zelf met je eigen middelen een grafiek op de computer te tekenen en die dan ergens op het internet te plaatsen (bijvoorbeeld op het forum) en dan het plaatje te 'embedden' in de post. Maar dat moet dus mooier kunnen en gelukkig zijn er online 'graphers' of 'plotters' die 'on-the-fly' de grafiek voor je tekenen.

Graag zou ik samen met de forumleden een overzicht opstellen van een aantal goede plotters en hoe ze gebruikt kunnen worden op het forum.

Hieronder staat een voorbeeld:

Afbeelding
f₁(x)=sin(x); f₂(x)=cos(x); f₃(x)=tan(x)

En ja, in de code staat een hoop 'abracadabra' maar met een beetje puzzelen komt iemand er wel uit.

Code: Selecteer alles

[img]http://graphsketch.com/render.php?
eqn1_color=1&eqn1_eqn=sin(x)&
eqn2_color=2&eqn2_eqn=cos(x)&
eqn3_color=3&eqn3_eqn=tan(x)&
eqn4_color=4&eqn4_eqn=&
eqn5_color=5&eqn5_eqn=&
eqn6_color=6&eqn6_eqn=&
x_min=-6&x_max=6&y_min=-4&y_max=4&
x_tick=1&y_tick=1&x_label_freq=3&y_label_freq=1&
do_grid=0&do_grid=1&
bold_labeled_lines=0&bold_labeled_lines=1&
line_width=3&image_w=480&image_h=320
[/img]
Mijn streven is naar 'non-flash' en 'non-java', puur en alléén embedded afbeeldingen, in png het liefst

Jullie reakties zijn van harte welkom om tot een mooi overzicht te komen van wat er is en welke opties in de URL worden gebruikt

Re: Online Grafieken tekenen

Geplaatst: 19 mar 2011, 23:17
door Sjoerd Job
Non-Flash, Non-Java, Non-Javascript heeft ook mijn voorkeur. De voorbeeldgrafiek ziet er wel gaaf uit.

Het liefst zou ik iets willen hebben wat op deze server draait, maar ik denk niet dat dat gaat lukken...

Re: Online Grafieken tekenen

Geplaatst: 20 mar 2011, 12:11
door meneer van Hoesel
Kijk op Bewijs logaritmische ongelijkheid voor een mooie demo.

De breedte van 624 is een veelvoud van 12 dat dicht bij de 'code-box' afmetingen komt (622 +3 pixels rondom). Daaruit mag al voorzichtig worden opgemaakt dat het kiezen van een horizontale afmeting even een beetje aandacht behoeft; de verticale afmeting is uiteraard afhankelijk van de grafiek.

Re: Online Grafieken tekenen

Geplaatst: 20 mar 2011, 14:22
door op=op
Afbeelding
"root(x,3)^2+/-root(4-x^2,2)"

Re: Online Grafieken tekenen

Geplaatst: 20 mar 2011, 14:29
door arno
@op=op: Het is jammer dat Valentijnsdag inmiddels al voorbij is, anders zou jouw grafiek zeer toepaselijk zijn geweest.

Re: Online Grafieken tekenen

Geplaatst: 20 mar 2011, 15:31
door op=op
Dan maar een scheef hartje
Afbeelding

Re: Online Grafieken tekenen

Geplaatst: 22 mar 2011, 01:51
door David
Dit ziet er erg mooi en nuttig uit!

Voor als je zelf de code van de grafiek wilt construeren.
Ik heb het in ieder geval voor mezelf duidelijker proberen te krijgen, te ontrafelen, maar ik ben er niet helemaal uit.

Er kunnen 6 vergelijkingen worden gemaakt. Je kan er meer geven, dan worden ze niet meer getoond.
Met "grafiek" bedoel ik het geheel, dat opgesplitst is in verschillende eigenschappen.

Afbeelding

Code: Selecteer alles

[img]http://graphsketch.com/render.php?eqn1_color=1&eqn1_eqn=sin(x)&eqn2_color=10&eqn2_eqn=cos(x)&eqn3_color=3&eqn3_eqn=tan(x)&eqn4_color=4&eqn4_eqn=x&eqn5_color=5&eqn5_eqn2x=&eqn6_color=6&eqn12_eqn=3x&eqn6_eqn=9x&eqn7_eqn=4x&eqn8_eqn=5x&eqn9_eqn=6x&eqn10_eqn=7x&eqn11_eqn=8x&x_min=-6&x_max=%2B6&y_min=-4&y_max=%2B4&x_tick=1&y_tick=1&x_label_freq=3&y_label_freq=1&do_grid=0&do_grid=1&bold_labeled_lines=0&bold_labeled_lines=1&line_width=3&image_w=480&image_h=320[/img]
In de code worden 12 vergelijkingen opgeroepen.

Over de code:
meneer van Hoesel schreef:eqn1_color=1&eqn1_eqn=sin(x)&
De grafiek
Hier wordt grafiek van de vergelijking 1 weergegeven als "eqn1" (eqn is de afkorting voor "equation", het engelsetalige woord voor vergelijking).
Die grafiek heeft verschillende eigenschappen. Die eigenschappen staan als "subscript*" achter de vergelijking (eqn).
*Een subscript is een karakter in bijv. een variabele dat lager in de regel staat. In is 1 het subscript, omdat die lager staat in de regel.

De kleur van de grafiek
Een van de eigenschappen is de kleur van de grafiek van de vergelijking/functie. Die wordt gegeven door het engelstalige woord "color" (kleur). De kleuren kunnen vaker dan 1 keer gebruikt worden, tot hoogstens 6 keer, omdat er 6 grafieken gemaakt kunnen worden.

Je kan kleur als variabele zien, die waarden 1 tot en met 6 kan hebben.
Bij elke waarde hoort een kleur. Zie afb. hieronder.

Afbeelding
Onder het getal 1 is de kleur blauw gegeven. Dus als color de waarde 1 krijgt wordt de lijn blauw etcetera voor de waarden 2 tot en met 6.

De vergelijking van de grafiek
Een andere eigenschap van de vergelijking is de vergelijking zelf. Die staat achter "eqnm_eqn=" met m het nummer van de vergelijking (geheel, van 1 t/m 6)
Voor een aantal vergelijkingen is de code hetzelfde als je gewend kan zijn bij het opschrijven. Denk aan bijv.
goniometrische formules, logaritmische formules en lineaire functies (evt onderling vermenigvuldigd).

Voor een aantal functies kan het anders zijn dan gewend.
Voor functies of getallen met machten, 2^x, 3^5, wordt, net als ik hier deed, een dakje gebruikt voor de exponent. Dat is ook zo in LateX. Voor de constanten pi en e, typ pi en e.

Voor de (gehele >1?) machtswortels wordt root(x,y) gebruikt, met als resultaat een grafiek van

Het domein van de grafiek
Wordt gegeven door "x_min=" voor de laagste x-waarde van de grafiek en "x_max=" voor de hoogste x-waarde van de grafiek.

Het bereik van de grafiek
Wordt gegeven door "y_min=" voor de laagste y-waarde van de grafiek en "y_max=" voor de hoogste y-waarde van de grafiek.

De dikte van de lijn van de grafiek
De dikte van de lijn van de grafiek staat aangegeven achter "line_width=" waar de dikte wordt gegeven in pixels. Het aantal pixels in de grafiek is het dubbele aantal van het getal achter "line_width=". Dus de grafiek onder "line_width=4" is 2*4=8 pixels dik.

Nummering van de assen
De nummering van de assen wordt bepaald door het getal achter "x-tick=" en "y-tick=" voor de x- en y- as respectievelijk. Het getal, bijv. 2 geeft aan na hoeveel stappen de waarde van het x-coördinaat op de x-as en het y-coordinaat op de y-as wordt weergegeven. In het voorbeeld om de 2, dus ...., -4, -2, 0, 2, 4, .... als ze in het domein resp. bereik zijn opgenomen. Frequenties voor het geven van waarden op de x- en y-as kunnen onafhankelijk ingesteld worden.

definities achter elkaar
In de code worden verschillende eigenschappen van de grafiek gedefinieërd. Die definities worden gescheiden door het symbool voor "en", "&"
Voorbeeld:

Code: Selecteer alles

eqn1_color=1&eqn1_eqn=0.5
De definitie voor de eigenschap "kleur" en de definitie voor de eigenschap "vergelijking" worden gescheiden door "&".

Url
Let op: de code die geschreven wordt, wordt een url. Urls bevatten geen spaties, gebruik tussendoor dus niet de enter-toets en de spatiebalk op het toetsenbord; dan wordt geen grafiek weergegeven. Zet om de url heen de img-tags.

Code: Selecteer alles

[img][/img]
Om wat typwerk te besparen, kan worden gekopiëerd uit code. Maak eventueel een lijstje om uit te kopiëren.

Re: Online Grafieken tekenen

Geplaatst: 22 mar 2011, 10:39
door meneer van Hoesel
Helaas.... FooPlot.com is wel mooi om mee te werken, en doet heel veel rekenwerk in de browser, maar uiteindelijk biedt het de mogelijkheid om het plaatje op de computer te bewaren nadat het door de server met 'te veel' data is gevoed.

De zoektocht gaat verder

Re: Online Grafieken tekenen

Geplaatst: 22 mar 2011, 19:32
door David
Dan bent u wel snel van mening veranderd over http://graphsketch.com/render.php.
Ik vind het wel prettig om mee te werken, maar ik ben benieuwd naar verdere mogelijkheden.

Veel plezier met zoeken

Re: Online Grafieken tekenen

Geplaatst: 23 mar 2011, 00:19
door meneer van Hoesel
David schreef:Dan bent u wel snel van mening veranderd over http://graphsketch.com/render.php.
Ik vind het wel prettig om mee te werken, maar ik ben benieuwd naar verdere mogelijkheden.

Veel plezier met zoeken
Mijn mening over Graph Sketch is nog ongewijzigd. Het is goed en voor uiteenlopende doelstellingen geschikt, maar het wil niet zeggen dat het het enige en beste middel is. FooPlot is dus niet geschikt voor het 'dynamisch' opnemen van afbeeldingen.

De speurtocht naar alternatieven blijft nog even doorgaan. Als anderen toevallig ook nog goede links weten waarbij de afbeelding 'on the fly' gegenreerd wordt, laat het svp horen.

Re: Online Grafieken tekenen

Geplaatst: 23 mar 2011, 15:55
door David
Ok, dan heb ik u verkeerd begrepen. Wat misschien nuttig is, is een lijstje waarop staat wat gewenst is van de plotter. Dat kan ook helpen met het zoeken; door de zoektermen.

Re: Online Grafieken tekenen

Geplaatst: 29 mar 2011, 23:05
door FlorianK
Ik blijf groot fan van Geogebra (http://www.geogebra.org) (Java). Die is zowel als webapplicatie (applet start) te starten, als te 'installeren' op de computer (webstart). En is helemaal gratis.

Waarom ben ik fan? Omdat je zowel meetkundige figuren als grafieken kunt laten plotten. Je kunt er ook variabelen in opgeven, met een schuifbalkje. Als je dan in een functie die variabele opneemt kun je door eenvoudig te schuiven in het schuifbalkje de functie aanpassen. (kan erg handig zijn om te 'zien' wat een bepaald getal nou eigenlijk doet in een functie)

Wat kun je qua meetkunde? Voor de kenners; dit is vergelijkbaar met Cabri, maar dan netter, gebruiksvriendelijker en iets uitgebreider.
Je kunt dus in het platte vlak tekenen en alle constructies maken die je normaal gesproken ook met passer en lineaal kunt maken.

Wil je meetkundige figuren in 3d maken, waarbij je de tekening wilt kunnen draaien, dan raad ik Google SketchUp aan.

Re: Online Grafieken tekenen

Geplaatst: 30 mar 2011, 10:31
door meneer van Hoesel
Het gaat mjn niet zozeer om een programma of een hulpmiddel waarmee ik een plaatje kan maken. Daar zijn middelen genoeg voor. Wat ik wil is een overzicht van 'services' die 'on the fly' een grafiek voor mij tekenen. Zoals bijvoorbeeld 'CodeGogs' doet voor het omzetten van 'elementaire LaTeX' naar een afbeelding in .png of .gif; als je wil laten zien, dan is dat ook niks anders dan:

Code: Selecteer alles

http://latex.codecogs.com/png.latex?\lim_{h\to0}\frac{f(x+h)-f(x)}{h}
Zo wil ik dus ook onderstaande afbeelding kunnen maken, 'on the fly' [img]http://graphsketch.com/render.php?eqn1_ ... mage_h=320[/img]

Code: Selecteer alles

http://graphsketch.com/render.php?
eqn1_eqn=-1/3x^2+2x-1
Simpel, gewoon een 'render URL' + de formule ... eventueel gevolgd door 'meta data' voor het aansturen van de plotter, zodat je weet waar er getekend moet worden
[img]http://graphsketch.com/render.php?eqn1_ ... x^2%2b2x-1[/img]

Dat is vooral handig op een forum, of andere web pagina's waar 'even een afbeelding' ingevoegd moet worden.

Nog mooier zou het zijn... een BB-Plugin die in HTML5-Canvas (géén Java, géén Flash) tekent en nog enige interactie mogelijk maakt zoals een grafische rekenmachine... in- en uit zoomen, tracen van een grafiek, dat is beter voor leerlingen