Create timeline chart in HTML/JS/CSS - javascript

I need some help or concept from all of you. I want to create a timeline chart with web technology to display tasks that have start and end date on web browser. What technology or concept to create a timeline graphic chart on the browser would be helpful?

Using preexisting tools:
You could build a calendar using a number of calendar plugins that exist, like FullCalendar for jQuery, or any of these other plugins.
Timeline sliders exist, also for jQuery, like Timeline JS, jQuery Timelinr, Timeglider or Tiki-Toki, of which I think the last sounds more aptly suited to your cause.

you could try http://functionn.blogspot.com/2012/03/timeline-javascript-library-for.html
or any of the following:
http://functionn.blogspot.com/search/label/timelines
:)

If you want a super-simple, non-interactive, way of displaying timeline data in a few lines of HTML, you can use the Google Charts API to do it. Here's a self-contained example: https://gist.github.com/KorkyPlunger/16c540f7b622b8906c1351e44bf1bf3c

Related

Creating an interactive map in a web page

I would like to create an interactive map on my website where you can hover over a location and it will animate showing some links that are clickable and will take the client to another page displaying graphs about that location. What should I learn in order to achieve this? Thanks
I'm assuming you don't know much about web development yet, so start with some HTML tutorials (such as this, or this, or this) and Javascript tutorials (such as this, or this, or this). There's a number of ways of creating graphics on web pages (Chart.js is a great library that takes all the hard work out of it).
Then you might want to look into learning how the Google Maps API works. It's a pretty dang flexible API.

Javascript Flow Chart or Static Flow Chart?

Let's say that we have the following image:
I'm thinking of drawing this image with all the possible connections and then position some labels on their correspondent arrow... but this may not be the best approach, because the position of each label would be different depending on screen resolution. What do you think about this approach?
My question is: anyone knows any JavaScript library, jQuery plugin capable of drawing something like the image above? I mean, capable of doing multiple connections and that could be implemented with AngularJS ?
Here are some new details:
After I make some tests with JointJS, I think it is what I need, but...
the following link is an example of JointJS with a demo of connections/links between sources and targets that I would have on this project... The thing is: as you can see on this demo has alot of links and it's hard to interpret. Can anyone help me on how to make this look better? There's a better way of representing this? (on this example the link's are static but they would be done on a dynamically way).
You can check out below urls:
JSPlumb provides a means for a developer to visually connect elements on their web page
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://jsplumbtoolkit.com/demo/home/jquery.html
Wirekit looks good for creating custom wired flows:
http://neyric.github.com/wireit/
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
http://www.jointjs.com/
Here is a nice angular library
https://github.com/codecapers/AngularJS-FlowChart
and an example of it in action
https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html

Creating a complex interactive wheel as a web app

How would you do to create a chart like this, interactive (i.e. with links and tooltips), in an HTML page?
From what I know about SVG I think it's the right direction to take (no Flash anyway), but I'd like to know what would be the path you'd take first in order to have an interactive chart looking like this on a web page.
I'm not asking for the details but just where to begin to look. I know JavaScript quite well, but I have never dealt with any SVG libraries.
checkout d3.js examples, this example looks very close to your pic.
I offer to use Raphael library (http://raphaeljs.com/) and if you like to make more complex or using 3d objects you can use webgl with treejs library (http://threejs.org/) .. you can find example and demo for charts or other documents in websites..

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)

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