Online Graph or Shape Drawing Tools

Online Graph or Shape Drawing Tools

by Kian Leong Goh -
Number of replies: 18
Hi, I would like to thank you all earlier in regards to the mathematical equation editor.

I don't know if this is the right place to post, but here goes...

I have a new problem in regards to finding such tools. Do you all know of any existing such tool that can be downloaded and be used by any user on the browser. After the user has finished drawing the image, the image will be uploaded onto the server automatically for use.

I have really done my google search for sometime, I could only find a few tools, but they are not free for example JPainter: http://www.izhuk.com/painter/.

I also understand you the ASCIISVG for drawing graphs. Is there any other alternative beside this one for editor because I understand IE does not have SVG inherently

Help would be greatly appreciated
Average of ratings: -
In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Jeff Forssell -
This may not be exactly what you are looking for, but it was more than I was looking for at a time when I was using a Java Paint Applet (that I had to pay for) that emailed the result to me for some Math/physics questions.

There is a free Java Applet Suite called "Physics applets for drawing" (PAD) that include a diagram applet and a vector(also line. point arrows) applet that can even determine if the submission is correct and give guiding feedback.

Here is an English example (My stuff has been in Swedish) of the vector version Tv on table

Here is one I haven't translated yet using the graph applet distance(Time) diagram
(In case you don't know swedish here is a Google (somewhat fixed up) translation:

You bicycle to a lake 6 miles away. It takes 13 minutes to pedal the first mile, which is uphill. Then you get a helping wind and a downhill stretch so the remaining route takes only 17 minutes.31
b) Plot the event of as an s(t) diagram.32

In brief, you can click the place you want to start the curve (you might have to Hold the mouse button until the little point appears) and then click on the points you want to add. When you have done the whole graph, click the Check button work to get your graph judged (the first time you press, it may take a while before feedback box will pop up. It is very fast next time if you have changed anything). The response will be to tell you either, that it is right, or say what you must do to make it right.35

There is no direct Moodle import for these. But there has been some sucess SCORM packaging them. "One of these days" I'd like to try and make a module for PAD in Moodle.

In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Marc Grober -
IE would require plugins to do mathml and svg, but the plugins are easily obtained, installed and used. Of course the underlying question is why look for additional software when clearly your major problem us your browser...

But that aside, there are a number of apps that would allow plotting, and as you might notice, one with some promise is WA.

If you looked in moodle docs re math you will also find info on a number of java apps such as javasketchpad and Descartes (the Spanish ed ministry has used moodle and at some point it is possible that they will move further in combining them). Both of those could be promising as applet parameters could be passes back and forth, but glue to do what you are looking for is in the future while you will most likely approximatd what you want with SEE- which will give your students the ability to plot....

SEE is running experimentally on Mauno's demo moodle ( see that thread in thus forum for more details)

you can also provide applet access and have students print their results to PDF and then upload the PDFs. You could then even open PDF in openoffice to markup.

If you are interested in Descartes I have been playing with it some as time allows and I can provide a URL where you CSM experiment a bit, or you can get ISO images from th ministry. There is also a similar applet developed at French universities.
In reply to Marc Grober

Re: Online Graph or Shape Drawing Tools

by Kian Leong Goh -
Hi, What is WA anyway? I never notice such graph plotting tool. In fact I having a real hard time googling such tools especially since these applications are more specialised
In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Mauno Korpelainen -

You could also check for example these online drawing discussions

http://moodle.org/mod/forum/discuss.php?d=119670

http://moodle.org/mod/forum/discuss.php?d=119477

http://moodle.org/mod/forum/discuss.php?d=110902

( not from maths but some good online drawing tools there )

Or for example http://webtools4u2use.wikispaces.com/Drawing,+Charting+&+Mapping+Tools

In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Kian Leong Goh -
Hi thanks for providing the links

I have checked the graph tools that you all have suggested. Most of them require functions as input and do not have the functionality to save as image. I was expecting a tool where user could click on the few points and form a line based on the points and if possible draw out a curvy line. Geogebra is the closest to what I require but unfortunately it can only be saved as gbb format

Shapes drawing wise, chibipaint suggest by Mauno in another thread would be the closest to what I want. But the interface is too photoshoplike and does not have tools to draw perfect circles or ellipse. I was expecting a tool that is close to Microsoft Office in drawing out the shapes

If any of you found any tools that matches the description do place it here as I sort of need them urgently for my project that would be due soon big grin
In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Mauno Korpelainen -

"...the interface is too photoshoplike and does not have tools to draw perfect circles or ellipse. I was expecting a tool that is close to Microsoft Office in drawing out the shapes..."

Then why not use those offline tools like Microsoft Office, Open Office etc, save the results to your PC and simply upload the files to moodle? big grin

Paintweb that Mihai has developed http://docs.moodle.org/en/Development:Paint_tool may be closest to your requirements but it is not yet cross browser compartible and fully functional.

If you search just drawing tools http://www.sumopaint.com/ and http://www.sumopaint.com/app/ is one of the best free online drawing tools available and allows you to save your images to your local PC or embed paintings to your moodle but creating images online and loading images automatically to your server or moodledata is another story. I suppose no perfect tool exists...

In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Mauno Korpelainen -
Kian,

one online tool that might be useful for you is also Google docs. You can work online, share or publish your docs like in offline Office documents and for example add a link to Google docs or the published / editable resource inside iframe to your course. Most tools in Google docs are pretty similar like those you have seen in Microsoft Office... see for example this quick example (not editable by others than me)

http://spreadsheets.google.com/pub?key=twhqu_zjkD0tsXjBlHUwsnQ&output=html
In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Mauno Korpelainen -

Kian,

what kind of plots/graphs/images do you actually want to draw?

Can you explain the underlined parts of your first question "...any existing such tool that can be downloaded and be used by any user on the browser. After the user has finished drawing the image, the image will be uploaded onto the server automatically for use..." :

I have been planning to create a new google charts plugin for tinymce (moodle 2.0) as a part of maths editor (moodle 2.0 will allow several configurations of editor although default core configuration will have only dragmath and tex filter for maths. The plugin might look something like http://www.tagarga.com/files/gcui/ where you should be able to copy the chart address using google chart api directly to img tag and this way you don't need to save any images of graphs to your server - you just save the code for image:

Example

Wolfram Alpha is using a similar approach and current asciisvg graphs created with asciisvg tinymce plugin do work in all browsers because the svg code has an image fallback script that renders an image with GD library if browser does not support svg - but that plugin does not yet support all graph types of asciisvg. I have also tested http://drupal.org/node/196059 (a little buggy) to render fallback graphs with javascript instead of GD - again to avoid saving any actual images but code like [graph]sin(x)[/graph]

In reply to Kian Leong Goh

Re: Online Graph or Shape Drawing Tools

by Ian Wild -
Picture of Plugin developers
Hi Kian,

If it's graphs of functions you need then I use GeoGebra. That comes with Moodle integration and it's interactive, too.

Hope this helps,

Ian.
In reply to Ian Wild

Re: Online Graph or Shape Drawing Tools

by Mauno Korpelainen -
Yes, Geogebra is a great tool and can be used pretty well with moodle (at least by teachers and administrators)

http://moodle.org/mod/data/view.php?d=13&rid=585

http://www.geogebra.org/cms/

You just need to first download and install Geogebra, create the graph in Geogebra applet and embed previously uploaded *.ggb
(Geogebra) files into a moodle online document (Geogebra filter enabled) and simply create a link to the .ggb file

Ian, Marc and others,

one idea to use graphs could be a special graph filter for moodle 2.0:

The same way as Mathfilter plugin of Drupal changes

[graph xmin="-7" xmax="11" ymin="-10" ymax="20"]x^2+4x[/graph] to

image

we could use a filter (a little like tex filter) that simply replaces different graph tags with some allowed parameters.

For example

[asgraph ... ] ... [/asgraph] for asciisvg (I did not write here agraph...)
[gograph ... ] ... [/gograph] for google charts
[wagraph ... ] ... [/wagraph] for WA graphs (if api available for common use)
and so on

and this filter could use different output for different browsers if some option is not supported.

Current asciisvg plugin is rendering embed tags that are not XHTML compatible and svg embed tags are automatically cut by current media plugin of tinymce if it is enabled or by full XHTML ruleset if it is used and not modified so the code is not ideal.

A filter could use different default values if they are not given inside graph tags so basicly if you would need to add a standard asciisvg graph of sin(x) to moodle you could use a plugin or just add tags like

[asgraph] sin(x) [/asgraph]

If wiki is still a problem in moodle 2.0 square brackets could be replaced with some other symbols. Any comments?


In reply to Mauno Korpelainen

Re: Online Graph or Shape Drawing Tools

by Kian Leong Goh -
Hi thanks for the suggestions. I was looking more into line graphs where user could freely draw the line in the graph they want rather than keying in a function. Bar chart would be useful too.

In short I do require tools that could minimise the possibility of user needing to upload images to depict their mathematical problem and instead use the plugins or application on browser to draw it... But from what I understand most of them are either non open source and not free or can only be used as a web service. Hence me opening up this thread to see if you all have come across any downloadable drawing softwares for use on browsers
In reply to Mauno Korpelainen

Re: Online Graph or Shape Drawing Tools

by Ian Wild -
Picture of Plugin developers
Hi Mauno,

I like the graph filter idea. I do use ASCIIMathML for graphs (and also recommend this for maths teachers here in the UK). Am I right in thinking this idea would mean I don't have to try and explain the use of back ticks and the begin{graph} and end{graph} commands - which can often be too much for some of the less computer literate teachers I train thoughtful ?

Cheers,

Ian.

In reply to Ian Wild

Re: Online Graph or Shape Drawing Tools

by Mauno Korpelainen -

Plugins and filters can make using of graphs simpler - or at least some things could be simpler and you should be able to use several script types - also the old style tags if you like. But this is only on idea level - not implemented yet to any filter or new plugins.

One more optional renderer for current asciisvg scripts that use SVG or in image fallback version png images with php and GD could be also raphael.js - see  http://raphaeljs.com/ and for example http://raphaeljs.com/pie.html

It is a very interesting small open source javascript that renders SVG or VML for IE with pretty simple and well documented syntax: http://raphaeljs.com/reference.html - cross-browser vector graphics without any actual images on server. I have not used VML before but it seems rather similar as SVG and the demo examples are visually really impressive.

And in addition to "stable and simple charts" Google charts have also Visualization API that allows more interactive graphs:

http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

and http://code.google.com/apis/visualization/documentation/index.html

In reply to Mauno Korpelainen

Re: Online Graph or Shape Drawing Tools

by Mauno Korpelainen -

Or maybe later HTML5 Canvas like in this interactive example

http://www.filamentgroup.com/examples/charting_v2/

And one more interesting javascript library to add partial (still very good) SVG support to IE without extra plugins - but flash fallback:

http://code.google.com/p/svgweb/

and some demos in

http://codinginparadise.org/projects/svgweb/samples/demo.html

In reply to Mauno Korpelainen

Re: Online Graph or Shape Drawing Tools

by Ian Wild -
Picture of Plugin developers
Hi Mauno,

Both of these examples look great. I especially like the Raphael library.

Cheers,

Ian.
In reply to Ian Wild

Re: Online Graph or Shape Drawing Tools

by Richard Griffiths -

Hi all,

Ive noticed that all the tools above are either graph related or are being used by the administrators to upload.

I was wondering if there was something out there that i could use with moodle, which allows students to draw diagrams. The type of diagrams im looking at, is the students producing something along the lines of concept maps.

I would be greatful if anyone had any ideas about this ?

Thanks

Rich

In reply to Richard Griffiths

Re: Online Graph or Shape Drawing Tools

by Marc Grober -
Try looking the the math tools page in docs. One of the more exciting options is to use Hackett with geonext. Mauno has been developing a package for Moodle 2, but I think Moodle 2 is as yet not ready for use. These tools can be used in 1.9 but require some manual hacking.