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

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)

Related

How to create a topology diagram using Javascript

I need to create a topology (network) diagram, which will be integrated with my extJS application. Is anyone familiar with some Javascript packages with APIs for creating such a diagram, taking care of: positioning the nodes in the diagram, zooming, and dragging the nodes?
In addition I want to use some custom icons for the nodes in the diagram.
You might look into yEd/yFiles (https://www.yworks.com/products/yed) It's Java, not JavaScript, but it will definitely run as an applet since it does so from their site as a demo. Might work if this is for an intranet to just embed it in the middle of an ExtJS panel. Otherwise I recommend you read and re-read the drag and drop API for ExtJS and review the source code for them as well if you intend to code it yourself. Also from a google search:
https://github.com/jgraph (commercial)
https://www.jointjs.com/ (MIT Licenses)

Where to find open source 3d charts available?

I am looking for opensource or unlicensed 3D charts.
if you have some link please share them.
Have you tried Google Charts?
https://developers.google.com/chart/
The only real open source(MIT license) 3D charts that I know of are these two
https://github.com/bkuzmic/raphael-charts-plugin
https://github.com/PuffyCoffee/3D-Pie-chart
The first one offers both a pie & bar option. The author is still actively working on it so it should improve over time.
There are other 3D charting tools that claim to be "free" and "open source". But their license is extremely restrictive. Basically, they only allow you to use their tool for free only if you use it for a personal websites with no ads and zero commercial purpose.
Try Highcharts. IBM, NASA, Siemens and others use it according to their Web site. It's pure JavaScript. I searched the Web quite a while for it. I am not quite sure if 3D charts are possible, however it should serve most needs.
Not really 3D, but you could use Flex SDK's data charts: http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/charts/
I don't recall what the status is on the data vis components - they weren't able to open them when they released the rest of the SDK, and I can't find anything on their current status.
I still have yet to come across any other package, Open Source or not, JS or Flash, that will do log-log plots as easily as I could with Flex Charting - some will do y axis, but not x and y.
Coming a little late to the party perhaps - but RGraph can be used under the MIT license and produces some nice 3D charts:
http://www.rgraph.net/docs/3d-javascript-charts.html

Generating graphs on-the-fly with JavaScript with mouseover "captions"

I am developing a backend that requires to have graphs with information associated in a javascript why. The idea is to reproduce something similar to Google Analytics/Webmaster Tools:
I also like to reproduce the "hover" caption when someone moves throw the days.
Does anybody knows if this is possible to do it with JavaScript? It's not allowed to use jQuery, so no "use jQuery" replies please.
Thank you in advance
There are loads of svg-based javascript libraries for drawing charts that support custom tooltips among other features.
My personal favourite is Highcharts which is a full-feautured stand-alone library.
The charting libraries of Dojo, ExtJS and YUI3 are also very good and support custom tooltips if you don't mind them being not standalone.
All of these libraries support at least IE7+, mobile devices and all other major browsers.
I suggest using them instead of making your own javascript code for charts. They are all amazingly customizable and unless you need a very special kind of charts these will work great for you.
Google Analytic's graphs are Flash, not JavaScript.
To draw graphs using JavaScript you can use SVG (Scalable Vector Graphics) and I suggest Raphael. Take a look at it.

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.

JavaScript Charting library - Google Analytics Style

I'm searching for a Javascript library to create line charts like the ones of Google Analytics. When the mouse is over a point, a box shows you the data.
An example is at http://wikirank.com/en
No Flash or Air, only JS and client-side Canvas...
Better if Free...
Edit: If you want a free library, try Flot.
Emprise Charts is a commercial library that I've seen featured on news sites.
Another option is to use Google's visualization APIs.It's pretty easy to use, and they have a several options for displaying data. One thing to keep in mind is some of the visualizations require you to send your data to their server, though none of the canvas/svg ones have this requirement.
There's JS-Charts which looks pretty awesome.
Or, if you fancy rolling your own you can create your own charting component using this library...
As an alternative to Flot, if you are using Prototype.js as JS framework, you can use Flotr.
Dojo also has something similar, though the example shown doesn't have similar functionalities but can be implemented to behave like the one you want,
http://dojocampus.org/explorer/#Dojox_Charting_2D_Lines,%20Markers,%20No%20Axes,%20Purple%20Theme,%20Custom%20Min%20Max
Raphael.js is pretty good at making graphs with svg/vml, you have to write some custom code though, but you can make some really nice animation with it, next to that it's compatible with ie6+ (only not with android 2 browsers).

Categories