Code Monkey home page Code Monkey logo

jquery.ganttview's Introduction

jQuery.ganttView

The jQuery.ganttView plugin is a very lightweight plugin for creating a Gantt chart in plain HTML...no vector graphics or images required. The plugin supports dragging and resizing the Gantt blocks and callbacks to trap the updated data.

Sample Gantt A sample chart

Browser Compatibility

Currently the plugin has been tested, and is working in: FF 3.5+, Chrome 5+, Safari 4+, IE8+. There are minor issues in IE7 and I haven't even attempted to use it in IE6. If you encounter any issues with any version of Internet Explorer and would like to contribute CSS fixes please do so, several people have asked for IE6 support.

Dependencies

The plugin depends on the following libraries:

  • jQuery 1.4 or higher (obviously)
  • jQuery-UI 1.8 or higher
  • date.js

Documentation

Forthcoming...

Contribution Guidelines

The internal roadmap for the plugin is detailed in the project wiki. If you're interested in features outside of what's described there, we'd be interested to discuss pull requests that would add these features. If you like the plugin, feel free to fork it and submit your patches back.

Guidelines: If you'd like to offer a new feature please help us out by submitting the pull request with only the fewest changes necessary.

Ideal: Fork the project, apply just the individual changes to the individual files effected, submit pull request.

Those pull requests can usually be automatically merged and closed through the site here.

If your pull request includes things like:

  • changes to dependencies or where they're hosted
  • stylistic modifications
  • moving project files to different directories
  • more than one new feature / functional change

one of us will have to do the work of carving out just the feature being pulled. Your request is likely to sit unmerged for a while if that's the case.

License

The jQuery.ganttView plugin may be used free of charge under the conditions of the following license:

The MIT License

Copyright (c) 2010 JC Grubbs - [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

jquery.ganttview's People

Contributors

lutze avatar thegrubbsian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery.ganttview's Issues

You save me

Hi,
I send a email, but no received any answer, so I write this issue only to thank you.

You save me in the final work on the graduation.

Thank you so much!

How to clear the data

I need to update the chart dynamically on click of a button.
So first i need to clean the existing data and then update...

So how do i clean the data first

Plz help....

All blocks on one line

This would be fantastic for my needs anyone got any ideas or knowledge on how to make the blocks appear on one line for each data section

Would be willing t o play someone to do it

what will I add one More functionality Zooming.

Hi
Can I have add a Zooming functionality for user can see all tasks in hours, Dates and weeks. If he select hours then Gantt view show in hours . for now that is show months and dates in grid view. I want to show date as a month and hours as a dates in grid view.

Project activity

I see 125 forks of this project but no change in the main repository in the last 3 years.
Is there anyone still developing on this project?

If not, which of the forks is still being developed?

IE7 CSS

hello,

for jquery.ganttView.css

div.ganttview-slide-container {
position: relative;
overflow : auto;
border-left: 1px solid #999;
}

div.ganttview-blocks {
position: absolute;
top: 40px;
left : 0px;
}

and for jquery.ganttView.js
insert after "container.css("width", (w + 2) + "px");"

var h = jQuery("div.ganttview-slide-container", container).outerHeight();
slideDiv.css("height", (h + 20) + "px");

bars are positioned incorrectly under bootstarp 3

If used under bootstrap 3, bar horizontal and vertical positions are incorrect by some pixels.

reset.css does not fix this.

Using

    * {
        box-sizing: content-box;
    }

fixes this but it breaks bootstrap layout.

New implementations

Hi, I like very mutch your Gantt,

It would be nice to have :

  • Today bar or today column with different color
  • Horizontal bar with auto position to let today column visible
  • Let Horizontal bar always visible also Gantt height exceeds page height
  • To have also DAY style display with 1/4 hour instead day

I hope to help you to make a better project

Mark

bootstrap css fix

I had a problem using jQuery.ganttView, with bootstrap and I had some CSS problems.

I had to fix it.... And the CSS fix is :

< style >
/* bootstrap css fix - begin */
#ganttChart div,
#ganttChart div:before,
#ganttChart div:after {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
< /style >




When you use ...
< div id="ganttChart" > < /div >

< script >
$(function () {
$("#ganttChart").ganttView({ ...
...
< /script >

Dependencies between tasks

Hi!
Your Gantt-diagram is very likeable.
Do you have any plans to implement drawing relationships between tasks?

CSS Fix

More of a patch than a bug fix, to correct series being affected from inherited CSS text aligns.

div.ganttview-block-container {
height: 28px;
padding-top: 4px;
text-align: left;
}

Spent a day pulling my hair out!

cellWidth does not alter the width of the days in the header.

Repro:
In example\index.html, add cellWidth:42 to the $("#ganttChart").ganttView( initialisation

  • this doubles the cellWidth from the default 21

Issue:
After making this change, the gantt time series are correctly made wider, but the day numbers across the header of the gantt chart are not made wider, resulting in the periods looking like they are now double the length of time.

Timeline

Hello,

Could you please advice if it is possible to add time line under day line on the Gantt as seen on my attached chart? Or is there any sample similiar to this in jquery? If so can you please send ? I am looking for a week. Thank you in advance.

Sample:
http://c1110.hizliresim.com/11/10/5/10019.jpg

Zoom In and Zoom Out

How Add zoom in/out to gantt chart, i was tried to add zoom,but it reflecting on fonts only,not reflecting on gantt chart.
Please let me know .
Thanks

Readonly activities

Hi,
is there any chance to set the activities read only?
I want to use the component to show information but I don't want the user update the activities using this component.
Thanks for your help

Click on empty cell is not captured

It is not possible to add new bar by clicking in empty cell.
onClick event does not file since it is bound to bar using div.ganttview-block

Some event with clicked empty bar coordinates shoudl also fire if clicked outside bar

If gantt fork from https://github.com/GuillaumeSmaha/jquery.ganttView is used, this allows to implement online booking system where bookings can placed by clicking in empty cell.

How to change code so that click in empty cells can captured ?

Auto scrolling in the slider

Hi guys,

There was an issue put in a few years back here: #15

I would like to be able to auto scroll on page refresh (or event) to a certain date - e.g. today, I had a go at the modifications in that issue, but it seems something is missing.

Is this possible?

Many thanks,
Fayaaz

Empty Days

Hi..
How to implement a event when I click on empty day?
I can have the value of the day when I click on empty day?

Header fixed

Hi, is it possible to have an header fix in top while lateral bar scrolling the blocks ? I've modified the css file but if I insert "position" tag with "fixed" value, in header attribute, the result is terrible.

Thank you to all

ctrl+wheel css issue

When decreasing size with ctrl/wheel, the slide container goes under the vtheader.

Tried to fix it but didn't manage to ...

No prob when increasing size.

Repro : Well, ctrl+ wheeldown

(tried in FF and Google chrome)

Conflick with BootStrap

When I use your API with BootStrap, I guess It makes some conflict.

conflict

First, the block size is not same with cell's. Also, When I resize blocks, Its height getting thinner.

most of all, the whole ganttChart is broken.

Support hourly resolution

As mentioned in issue #22, this project intends to support events with hourly resolution. What is the status of this feature? Are there any near/long term plans to implement hourly resolution?

Timeline (linear calendar) type of view

Good day!

Sorry for asking a question here that might not be necessarily related to jquery.ganttView.
I am in the need of a timeline type view, where tasks follow each other on the same line. This is more like a resource view in project management, rather than a gantt view. I need to schedule work for employees one after another. The closest thing I could find is this wonderful plugin.

So the questions are:

  1. Can jquery.ganttView do what I am after?
  2. If not, could you please recommend a solution that can?

Thank you.

activity with time

There is the possibility of placing two activities the same day, one starting from 08:00 to 12:00 and another from 13:30 to 18:00 for example?

Its ignoring Saturdays and Sundays? Some property?

Add info before calendar

How can I add new lines before calendar? For example:

id: 1, name: "Name 1", desc: "Description 1", user: "Allef Gomes", series: [ { name: "planejado", start: Date.today, end: Date.today + 5 }, { name: "executado", start: Date.today, end: Date.today + 3, color: "#f0f0f0" } ]

In this case I added description and user.

Thanks.

FullCalendar API

Nice work on this project.

I'd like to ask that you examine a similar project ( http://arshaw.com/fullcalendar/ ) which does not have a gantt option, but does deal with similar scheduling data. It is a very popular project and used widely, so it would be extremely helpful if your code implemented a similar or identical API, particularly for the definition of json event data but also for other functions.

I've implemented fullcalendar in an open source project management system and am looking to add your implementation to that as well. Initially, I was hoping to add gantt as a plugin to fullcalendar but lacked the time (or CSS skills) to pursue that. (http://code.google.com/p/fullcalendar/issues/detail?id=150 )

Anyhow, thanks again, if I extend your code I'll certainly fork and contribute it back here.

Ari Maniatis
http://github.com/ari/clockingit/

how to generate datetime data from php

I try

 foreach ($activity as $key => $activity):
            $data[$key]['id'] = $activity->id;
            $data[$key]['name'] = $activity->name;
            foreach($activity->task as $key2 => $task):
                $data[$key]['series'][$key2]['name'] = $task->name;
                $data[$key]['series'][$key2]['start']  =  date( 'D M d Y H:i:s',strtotime($task->start_time)).' GMT+0700 (SE Asia Standard Time)';
                $data[$key]['series'][$key2]['end']  = date( 'D M d Y H:i:s',strtotime($task->stop_time)).' GMT+0700 (SE Asia Standard Time)';
            endforeach;
        endforeach;

got it

thank for answer

X-axis in numbers?

Hi, I don't want to use X-axis in days/months, but in numbers, for example, starting from 0, 1, 2, 3... up to 100. Can I do this with your library, or can you suggest me another one in which I can do this?

How to view big charts properly?

I have a chart with a size of 800 columns x 500 rows and i cannot figure out how to make it usable.

Problem is that there is not a vertical scroll bar and as there is a over 500 rows then it's really difficult to find correct position from chart.

  1. Is it someway possible to tell ganttView that graph size is example 1024x768 pixels? I could only find a horizontal size setting.
  2. is there possibly to remove horizontal scroll bar totally and use only browsers scroll bards? with this i lose series name information from screen when i scroll but i can live with it if needed.

Any hint or guidance is a lot appreciated as i'm not familiar with a html, css or even javascript

Btw. I'm using "Matthew Lutze Merge branch '0.8.9-dev-patch1" branch.

Display the gantt chart in weeks than days

I'm working on it but i don't make any progress, i'd like to ask if the documentation is coming or not and if there's an easy way to do my modification.

Thank you for your work.

how backgroundcolor change by item data

hi
how backgroundcolor changed by a certain item data column ?

how should we do ?
this is often met in gantt used times,if a task is delay,so this task's backgroundcolor whould change to red
so how ?

More item in row

I like more dev stages in one row. Because they get less place. I can use more color.
Example:
{ name: "Feature1", start: new Date(2010,00,01), end: new Date(2010,00,03), color: "#f0f0f0", start: new Date(2010,00,04), end: new Date(2010,00,08), color: "#fcf0f0" },

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.