We Keep Coding

JavaScript Drawing library for Flow charts and attaching data to the view dynamically

I am looking for a JavaScript Library where in I can make a simple flow chart, that includes,
A Start Point,
A End Point,
Few conditions,
Changing the data, and adding it to the view when you double click the box,
Can Fork the flow.
Went through few libraries.
D3.js is not suited very well for this kind of visualization.
Other libraries, JSplumb, Cytoscape, jointJS (And not rappid. Looking for an Open Source)
Any suggestions.

The solutions you listed are either generic graph theory libraries or generic Visio/Dia-like diagramming libraries. For each, you'll have to add your own logic on top for the restricted flow chart case.
Or, you'll have to do some in-depth searching to find something that's only for flow charts.

Bordered group of nodes in a network graph?

I am attempting to implement a network graph using Vis JS library and would like to implement a group of nodes that are inside a logical group (box). VisJS allows grouping of nodes but is not implemented in a visual way that I am looking for.
Another library that executes this perfectly is GoJS: http://gojs.net/latest/samples/basic.html
Another example from VisJS that shows network graph I would like to implement, but no example in documentation: http://visjs.org/docs/img/vis_overview.png
I would like to have nodes placed into larger boxes to represent the group of nodes.
Any ideas or suggestions for implementing this?

I'm the developer of the network module of vis. Our apologies for not seeing this issue sooner, but most of our communication is done through GitHub.
On the upside, since the release of v4 we support render events. You can use these to draw whatever you want on the canvas, including borders behind groups of nodes. Take a look at the example:
https://visjs.github.io/vis-network/examples/network/events/renderEvents.html
Keep in mind that this is aesthetic only. The physics engine will not compartmentalise these boundaries so the nodes may interact with the others.
We often hear this request from people who want to use vis network as a flow editor. Even though this is not your issue Id like to point out that this is not what we designed the network for. We may have a module for this in the future though.

algorithm for lines connecting rectangles

I am looking for an algorithm or sample solution for drawing connection lines between rectangles. In my case rectangles are elements Gantt chart and connections show depenedencies. I am using the Raphael JS library to draw rectangles and lines. So a solution in JavaScript would be the best, but an algorithm in meta language or other JS similar will be nice also.
I have found an example that looks nice but maybe someone knows something else.
In my case there are a few relevant requirements:
only horizontal and vertical lines are allowed
lines should not cross each other
lines should not cross rectangles
I hope to achieve something similar to this:

It's look like you are looking for javascript gantt charts. Check out this one's:
http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml
Editable chart
Full control with JavaScript API
Multi-browser/multi-platform support
Loading from XML
Serialization to XML
Movable/resizable activities
Built-in edit menu, plus custom dhtmlxMenu support
Extended properties pop-up
Optional tree view
Customizable task subscription
Percent-complete shadings
Dependency arrows
Fast and smooth rendering
Built-in constraint checking
Print-friendly mode
http://www.bryntum.com/products/gantt/
Built entirely on web standards - HTML/CSS/JavaScript
Use with any server (PHP, Java, ASP.NET)
Supports dependencies, lead/lag and critical path
Export to PDF/PNG, MS Project import
Project, task and resource calendars
Unit tested with Siesta
http://gxt-scheduler.com/
Built entirely on web standards - HTML/CSS/GWT
Integrates with any type of backend
Fully themeable, requiring only basic HTML/CSS knowledge
Drag & drop and resize items easily
Supports all major browsers
http://gantter.com/
google drive integration
FREE cloud-based project scheduling
http://gantt.twproject.com/
in-place editing
drag&drop
zooming
do/undo
multiple dependencies
full editing
dates shortcuts
css skin
multiple browser
resources editing
multiple assignment
milestones
export data in JSON format
resize & scroll

Any jQuery Gantt Chart with Treeview, Zoom and editing features?

I have to integrate a Gantt Chart like tool in a room booking solution using jQuery. The Gantt should be very interactive one rather than simply displaying data. It should respond to drag & drop, it should have a tree view on the left side to group the tasks, and it should have the zoom feature to zoom in and out of the timeline. I did a lot of research but all those available currently on the web is lacking atleast any one of the mentioned features.
Could anyone tell me if there is anything like this using jQuery?
I know this may sound crazy to have these many features in a single thing. So a subset of the mentioned features would also be very helpful.
Thank you

I developed this one: http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/
is a complete editor based on jQuery.
New release available: http://roberto.open-lab.com/2014/05/15/jquery-gantt-editor-collapsible-branches

I have been using this one on http://taitems.github.com/jQuery.Gantt/ - its not 100% perfect yet but for my needs which are basic presentation of time tracking - it works very well.

Take a look at dhtmlxGantt, it supports all mentioned features:
interactive Gantt chart - respond to drag-and-drop
a tree view at the left
zoom feature (customizable timescale)
easy integration with jQuery
It's free under GPL.
(Disclaimer: I work for DHTMLX)

Simple opensource javascript library for creating (stacked) line graph?

I need a lightweight javascript library to create a stacked line graph (a bit like what is used in financial graphs). The X axis will be dates and the Y axis will be ordinary float values.
There will be two sections of the graph:
Top graph which is a line graph. I want to be able to specify the color of a line segment (i.e. joining two dated points)
The bottom part is just a rectangle/bar which represents the value. Once again, I want to be able to specify the color of the bar for a particular date.
It would be cool if the library used JQuery (since I have used jQuery in the past) - but even plain old JS code library would be equally useful.

I recommend Google Chart API / Chart Tools (examples) and Google Visualization API (examples).
The former being less powerful than the latter, but also more low-tech, so possibly easier to use (and more portable across platforms. The basic Chart API generates static images for you).
But you can also use:
gRaphael
Bluff
PlotKit
CanvasGraphJS
Grafico
RGraph
Plotr
Or even use a more high-level library like ExtJS (examples).

look at JQPlot http://www.jqplot.com/

UPDATE: Here is a recent and very impressive chart library built by Baidu folks:
http://ecomfe.github.io/echarts/index-en.html
And this one is open source.
Another free option are the Google visualisations.
They could be an overkill for your needs. But you can provide to the users different kind of graphics as they all share the same dataset structure.
The good, you don't host them, they are on the Google's infrastructure and save you the bandwith. The bad, you don't host them... It is not opensource, you can't hack them if you want.
We use them in our web app and are quite happy from it.
Except they don't work with Android, as many use SVG/VML that is off by default for now.

Use raphaeljs and the complimentary charting library. The charting library link has a few examples that will show you what you can do - just view source them to see how easy it is.