i am searching for a library in javascript/html to enable my users to create, update and save basic flowcharts(start, end, task, decision, swimlane, fork and join) and create/edit some custom values of each task for later use in one ERP, similar like here!
I found RaphaelJS and GoJS, with those libraries can i make this interactive flowchart? I need others sugestions to evaluate.
If it weren't for the "interactive" part, I would suggest to take a look at this SO question and answers.
Since you are mentioning commercial libraries, I assume that this is in a commercial scenario, and thus I believe this interactive flow-chart demo is pretty much exactly what you are looking for. Maybe also this BPMN editing demo.
The demos are using the commercial yFiles for HTML Javascript/HTML5 diagramming library. The library provides (among other features) editing capabilities for flow-chart-like and BPMN diagrams, has robust support for (optionally hierarchical, two-dimensional) swim lanes and of course adding custom data and custom interaction logic is easily supported. The most advanced feature though is the ability to automatically arrange the elements on the screen according to the flow-chart logic:
Disclaimer: I work for the company that creates this library. I do not represent my employer on SO, though.
RaphaelJS deals with SVG shapes and generic functions relating to them.
It has no explicit support for creating/manipulating flowcharts.
You can use JointJS for flowcharts which
produces charts in SVG format, but the commercial license is not free
You can use also use
plumbJS which is
open source and pretty well documented. This library also has support
for a VML fallback if the browser is IE8 or below
So, I have thought about designing a WebGL Graphics Engine, which will facilitate designing 3D Interactive Graphics for web. Now, my question is :
WebGL is Javascript API, so in order to design an engine for WebGL graphics, do I need to have a JavaScript compiler or anything ? What I want is a system which will let users see what they are creating (for example, like blender workspace, if you draw up a scene you can see and make changes simultaneously)
You would have to create some kind of engine, or framework that you'll build your system onto.
Creating only framework/engine would take at least 2-3 months, and if you plan creating something really big and advanced, that supports various effects rather than simple rendering primitives, than that might come down to 5-6 months. After that you could start creating your web application. So 6-7 months time for that? That shouldn't be a problem.
I don't know how advanced you are, how many people are you working with, but that seems very plausible and doable. But is worth of it? In a year, many different things will change, maybe new openGL ES version for webGL, changing api, supported browsers (IE recently joined the game),... it's really questionable.
You wouldn't need any kind of JS compiler or anything like it, just knowledge of advanced JS and many different techniques used in 3d, and since you plan building system that is far beyond just-graphic-stuff, then it adds even more to overall complexity and time consumption.
So, to answer your question: yes, it's very doable in a year, but will it pay off?
Similar things already exist in some form:
http://errolschwartz.com/projects/threescene/
http://badassjs.com/post/12885773103/threenodes-js-a-visual-webgl-scene-editor
CopperLicht engine has its own real-time editor
there are more lab-playground-like editors
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
Would anyone recommend a particular JavaScript charting library - specifically one that doesn't use flash at all?
There is a growing number of Open Source and commercial solutions for pure JavaScript charting that do not require Flash. In this response I will only present Open Source options.
There are 2 main classes of JavaScript solutions for graphics that do not require Flash:
Canvas-based, rendered in IE using ExplorerCanvas that in turns relies on VML
SVG on standard-based browsers, rendered as VML in IE
There are pros and cons of both approaches but for a charting library I would recommend the later because it is well integrated with DOM, allowing to manipulate charts elements with the DOM, and most importantly setting DOM events. By contrast Canvas charting libraries must reinvent the DOM wheel to manage events. So unless you intend to build static graphs with no event handling, SVG/VML solutions should be better.
For SVG/VML solutions there are many options, including:
Dojox Charting, good if you use the Dojo toolkit already
Raphael-based solutions
Raphael is a very active, well maintained, and mature, open-source graphic library with very good cross-browser support including IE 6 to 8, Firefox, Opera, Safari, Chrome, and Konqueror. Raphael does not depend on any JavaScript framework and therefore can be used with Prototype, jQuery, Dojo, Mootools, etc...
There are a number of charting libraries based on Raphael, including (but not limited to):
gRaphael, an extension of the Raphael graphic library
Ico, with an intuitive API based on a single function call to create complex charts
Disclosure: I am the developer of one of the Ico forks on github.
If you're using jQuery I've found flot to be very good - try out the examples to see if they suit your needs, but I've found them to do most of what I need for my current project.
Additionally ExtJS 4.0 has introduced a great set of charts - very powerful, and is designed to work with live data.
Check out http://www.highcharts.com !
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
It maybe not exactly what you are looking for, but
Google's Chart API is pretty cool and easy to use.
There is another javascript library based on SVG. It is called Protovis and it comes from Stanford Visualization Group
It also allows making nice interactive graphics and visualizations.
http://vis.stanford.edu/protovis/ex/
Although it is only for modern web browsers
UPDATE: The protovis team has moved to another library called d3.js (Data Driven Documents) as they said:
"The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis"
The new library can now be found in:
http://mbostock.github.com/d3/
UPDATE 2:
"Rickshaw" is a JavaScript toolkit for creating interactive time series graphs. Based on d3.js that simplifies a lot the work with d3.js although is a little bit less powerful.
http://code.shutterstock.com/rickshaw/
I was recently looking for a javascript charting library and I evaluated a whole bunch before finally settling on jqplot which fit my requirements very well. As Jean Vincent's answer mentioned you are really choosing between canvas based and svg based solution.
To my mind the major pros and cons were as follows. The SVG based solutions like Raphael (and offshoots) are great if you want to construct highly dynamic/interactive charts. Or if you charting requirements are very much outside the norm (e.g. you want to create some sort of hybrid chart or you've come up with a new visualization that no-one else has thought of yet). The downside is the learning curve and the amount of code you will have to write. You won't be banging out charts in a few minutes, be prepared to invest some real learning time and then to write a goodly amount of code to produce a relatively simple chart.
If your charting requirements are reasonably standard, e.g. you want some line or bar graphs or perhaps a pie chart or two, with limited interactivity, then it is worth looking at canvas based solutions. There will be hardly any learning curve, you'll be able to get basic charts going within a few minutes, you won't need to write a lot of code, a few lines of basic javascript/jquery will be all you need. Of course you will only be able to produce the specific types of charts that the library supports, usually limited to various flavors of line, bar, pie. The interactivity choices will be extremely limited, that is to say non-existent for many of the libraries out there, although some limited hover effects are possible with the better ones.
I went with JQplot which is a canvas based solution since I only really needed some standard types of charts. From my research and playing around with the various choices I found it to be reasonably full-featured (if you're only after the standard charts) and extremely easy to use, so I would recommend it if your requirements are similar.
To summarize, simple and want charts now, then go with JQplot. Complex/different and not pressed for time then go with Raphael and friends.
jqPlot is great. If your requirements are fairly "normal" and you just want to draw some charts, you're probably overwhelmed by the quantity of js charting options. Assuming you don't want to do hours of research, just go with jqPlot as it's probably your best bet. It covers most use cases for most people well. Some of the alternatives are specialised on a certain type of chart or built with a certain use case in mind.
As some kind of late answer, try d3.js
http://mbostock.github.com/d3/
It's the continuation of protovis.
The big difference to flot is in the number of features supported.
Though flot may be simpler, d3.js is definitely more powerful.
Flotr is another, pure Javascript chart-library based on Prototype and inspired by Flot
Try PlotKit
I'd recommend gRaphaël for pure JavaScript charting along with the pure JavaScript vector graphics library it's built on (Raphaël).
gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
a framework: http://www.simile-widgets.org/
a basic: http://www.filamentgroup.com/examples/charting_v2/index_2.php
good looking: http://www.highcharts.com/
Another is RGraph: Javascript charts and graph library:
http://www.rgraph.net
Canvas based so it's fast and there's roughly 20 different chart types. It's free for non-commercial use too!
My favourite (flot) has already been mentioned.
But be sure to investigate Ortho.
It is excellent for tree charts and timelines.
There is a lot of activity in the dojo charting library, and what is great I am using it inside an AIR application without problems too, pretty cool!
See for example there http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
Check out Google Visualization API, which is kind of a generalization of the simpler Chart API
http://code.google.com/apis/visualization/documentation/gallery.html
Has very cool interactive options including maps, gauges, and charts.
We just bought a license of TechOctave Charts Suite for our new startup. I highly recommend them. Licensing is simple. Charts look great! It was easy to get started and has a powerful API for when we need it. I was shocked by how clean and extensible the code is. Really happy with our choice.
Try the MIT simile timeline which could be made into a chart - http://simile.mit.edu/timeline/
or the final one, http://code.google.com/p/gchart/
Not a Javascript library but it may be a suitable alternative - check out Google Charts where you can generate charts by passing querystring data to their web service.
Take a look at Bluff. It's a JavaScript port of the Gruff graphing library for Ruby.
Protochart is all you need
Sencha acquired Raphael and now their charts are pure javascript as of version 4. Emprise and HighCharts mentioned above are my two favorites.
http://www.sencha.com/
For the more unusual charts: http://thejit.org/
I can recommend ArcadiaCharts. A brand-new professional charting library for JavaScript and GWT. Runs in all browsers without plugins. Easy and fast to use: creates great looking charts with just a few lines of code.
Free for non-commercial use.
Fusion charts has a new javascript/jquery library that looks promising.
In case what you need is bar chart only. I published some code I've been using in an old project. Someone told me the VML implementation is broken on recent versions of IE, but the SVG should work just fine. Might be getting back to the project and release some serverside renderers I already have and maybe WebGL rendering layer. There's a link: http://blog.conquex.com/?p=64
Probably not what the OP is looking for, but since this question has become a list of JS charting library options: jQuery Sparklines is really cool.
Check out ZingChart HTML5 Canvas, SVG, VML and Flash Charts. Very powerful and compatible library. I'm on the Zing team - mention us on twitter #zingchart or shoot any questions to support#zingchart.com.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have been doing research on HTML canvas libraries and I came across this question. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? that was asked in 2010. The top answer was Fabric.js. After doing a bit more research I came across http://www.html5canvastutorials.com/ which features tutorials on KineticJs, that boasts having multiple canvases for speed. A bit more research later revealed that Canvas libraries seem to be all over the place when it comes to speed and features. What is the current state of JavaScript Canvas libraries and frameworks today? Has one come out on top?
EDIT: Since libraries are ever changing and a lot of people have recently been coming here for news and info on new libraries I changed the question to be more timeless.
Disclaimer: I'm the author of Fabric.js.
I would say that Easel.js, Fabric.js, and Paper.js are among the most used at the moment. I'm judging by the number of Github watchers for each repository, volume of discussion in their Google Groups, and how often I hear about them used as canvas libraries on Twitter.
These are also the ones with more or less decent documentation, examples/demos, discussion groups, and unit tests (the state of testing in most other canvas libraries is pretty sad).
I'm also maintaining this comparison table of various canvas libraries, where you can see how recently the library was updated, its size, support for IE<9 or node.js, and more.
EDIT: KineticJS is no longer being actively maintained.
Disclaimer: I created KineticJS
KineticJS is actually doing pretty well. You can find the source code at Github, where it is starred by 2180 people at the moment.
It can handle thousands of concurrent shapes:
10,000 drag and drop stress test: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/
10,000 shapes with tooltips:
http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/
It has very good event support, including mobile events, and it has a pretty solid suite of 100's of unit tests so the code base feels pretty solid.
kangax: P.S. awesome work with fabric.js! Other than KineticJS (of course), my other two favorite libraries are fabric and paper.
For recent readers, as of Jan 2013, I evaluated:
Kinetic
Fabric
Paper
Easel
By "evaluated", I did more than just read the docs; I created a prototype app.
I started with Fabric because it seemed to have the largest community and thought that it would be my solution. But, I gave up on Fabric for the following reasons:
weird and undocumented API inconsistencies that burned a lot of my time unnecessarily.
inconsistent pointer event support. Specifically, Fabric does not consider a "Path" to be a true shape object that is selectable and observable. This did not meet my needs since interactive Paths are a major requirement of my app.
behind the scenes additions of translations to the Canvas to position objects. For me, Fabric tries to be too clever in this regard without being clear to the developer what it's doing.
overly strong opinion on how move, resize and rotate interactivity works. In many ways, it's great to have this functionality built into the framework but, in my case, I didn't agree with the way it was implemented which meant essentially having to reimplement it myself anyway.
sparse documentation - lot's of those cases where the documentation of a method is of the form: "setX(Y) - set's the X to Y" :-)
I took a look at Paper and didn't get too far. It seemed overly obtuse to me and also falls between too stools IMO - it's too much of a visualization library to be a simple object model for Canvas but it's not enough of a visualization library to compete with D3. Plus, the documentation again was not particularly accessible.
I think Easel probably makes a lot of sense if you have a Flash/ActionScript background but I do not. Plus, it seemed overly game-focused for my requirements. The nail in the coffin was again documentation - not enough and presented in non-standard format.
So, I ended up going with Kinetic because:
really rich and clear tutorials and examples
API functions do what they're called and are largely guessable - faster productivity, shallower learning curve
is reasonably clear about what it does do and what it doesn't - it's not as rich as some of the others but that's a benefit; it does fewer things but does them better
Paths are first-class citizen Shapes, like any other Shape, which was essential for my requirements.
Kinetic is not perfect by any means and there have been a few times when I've had to dive deep into the source code to work out what's actually going on under the covers. Plus, I miss the SVG parsing and output of Fabric.
I would highly recommend pixijs. Its a high performance canvas library.
Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both desktop and mobile.
http://www.goodboydigital.com/pixi-js-is-out/
Here's a link to their demo. Basically, it's an online tool that implements a lot of the visio functionality.
I'm building an app that would require similar type of user interaction, dropping, moving, editing, resizing objects, interacting with grids and guides, etc.
Since the project is for my own learning purposes, I was wondering what are some of the things I should focus on or learn to be able to develop such high quality interfaces
Cheers
There's draw.io, a very similar tool, but with the source on github.
To build such a rich user interface is a big task.
Which is why there are lots of frameworks and libraries which have already developed rich user interface stuff such as:
Sproutcore
Cappuccino
ExtJS
Dojo
jQuery UI
Sproutcore and Cappuccino are for developing desktop style applications for the web and include very good user interface components. As well as maintaing application states and data models. ExtJS has a lot of these features and a very nice UI toolkit, as does Dojo.
Lucidchart I notice uses the Canvas drawing API as well so thats something you would need to look into for shape manipulation and creating flexible connections. Mozilla Developer Center has some good stuff on the canvas API.
I would start off by taking a look at the Raphael library.
It allows you to write pretty simple Javascript code to draw graphic elements in the browser, including pretty straightforward animations and draggable/clickable interfaces.
In all honesty, it's not going to be quick and easy to write something as complex as the site you linked to, but Raphael is the quickest way to get started with the basics.
And best of all, Raphael is even compatible with older versions of IE, so you don't have to worry about only being able to support the latest browsers (though of course you may want to do other stuff that does need other new features).
Hope that helps.