I am trying to create a Timeline Grid for adding and managing tasks at specific times(seconds) on a timeline. Is there a way to be able to create such a timeline Javascript/jquery?
What I am trying to do it have a 0.5 sec. intervals on the timeline. Every item has a start and an end range on the timeline. The items can be draggable to change starting and ending range and also resizeable. Here is a sample mochup I have built:
Any suggestions or solutions will be highly appreciated.
Thanks,
Praney
Have a look at the chap links plugin timeline.
http://almende.github.io/chap-links-library/timeline.html
In Particular these demos
http://almende.github.io/chap-links-library/js/timeline/examples/example13_grouping.html
http://almende.github.io/chap-links-library/js/timeline/examples/example15_mobile.html
Iv used this plugin before to make a management system, adding editing, drag between groups.
Related
I want to develop a timeline like Slider Revolutions. for controlling objects sequentially over time. Every object has its own row in the timeline and will move while the player's vertical scroll is moving over its horizontal bar.
What is the best technology? (something like Reactjs or vis.js, etc.)
Do you know any sample code to facilitate the development process?
you can watch the playing live process through these links:
https://www.sliderrevolution.com/wp-content/uploads/2020/07/timelineplay.mp4
https://daybrush.com/scenejs/features.html#timeline
I'm a designer who uses JavaScript / jQuery mainly for prototyping. I'm currently evaluating the Shield UI library for a project, and am mainly interested in exploring the grid capabilities. I've only been exploring the library for the last several hours, but have hit a stumbling block with enabling draggable grouping. I followed the example on the product website (http://demos.shieldui.com/web/grid-grouping/grouping), and it works perfectly ONLY if I define a group in my data source. I can then delete this initial group, and drag any of the column headers to the drop region to create groups. However, if I don't have an initial group defined as part of my data source, the grouping drop region is present, but doesn't create a group when a column is dropped.
I tried adding an ungroup event after initially creating the grid, but that didn't solve the problem. Is it possible to drag-and-drop group creation without defining an initial group?
You can try using the ungroup() method to remove the groups right after the Grid has been rendered and data loaded.
I was looking for a solution where I could display live data coming through web sockets or simply by adding items through the console to the data array and when data exceeds lets say 20 points add scrollbar which would scroll data back and forth for analysis.
Can anyone help me and direct to which library is capable of doing that because it's time burning to find the one?
Thank you
Smoothie Charts does offer some live data themes.
We were able to create a demo with a data feed, a scroll bar in ZingChart. One thing you may not have realized yet is that if the data continues to feed, it could be difficult for your users to actually make use of the scroll bar.
In this demo, we added a link that alerts the user the feed is paused, and allows them to restart after they are finished using the scroll bar: http://jsbin.com/mutid/2/edit
I am on the team at ZingChart and I'd be happy to answer any questions about this demo or the library, but I thought that little UX morsel was also useful to your scenario.
Check out this library Smoothy Charts - A JavaScript Charting Library for Streaming Data. It is a simple, small and dependency-free library for displaying smooth live time lines.
You may take o look at Highcharts as well, even it's not free for commercial use.
If you like to try something from scratch Raphaeljs and Paperjs and just great vector graphics libraries.
I'm interested in creating a web interface where a user can break up a "timeline" into various chunks.
Start|-----------------------------|End
^marker one ^marker two
They would be able to add a marker (and label it), and then move the marker around adjusting its position.
All the sliders I've looked at so far only support one slider between a range of values
Is there any existing jQuery plugins or any other javascript libraries (or even HTML5 /SVG ) that have a good starting point for this feature already?
Sounds like you're talking about something akin to a slider with multiple handles, rather than a timeline as such. The SIMILE timeline is probably the best out there, but it doesn't allow for dynamic band creation as far as I know, so I think sliders are your best bet. Here's a jQuery UI slider demo, with two "handles":
jQuery UI range slider demo
I want to enable the user to drag a bar up/down to reveal/hide content in two contiguous panes. I also need to create some buttons that move the bar to some preset locations. I know this is all possible, but am not sure where to start.
I'm creating a prototype whose purpose is to figure out the right user experience, so it's OK if it's not going to scale to 300 million simultaneous users on IE6/Windows Millenium. ;-)
That's a rather complicated thing to do from scratch, so consider using a plugin. Wijmo is based on jQuery UI and has an open-source splitter widget. The documentation is decent as well.
While I don't see any methods to resize it, you may be able to add one and contribute it back to the project.