Open Source Javascript Gantt

Overview

Frappe Gantt

A simple, interactive, modern gantt chart library for the web

View the demo »

Install

npm install frappe-gantt

Usage

Include it in your HTML:

<script src="frappe-gantt.min.js"></script>
<link rel="stylesheet" href="frappe-gantt.css">

And start hacking:

var tasks = [
  {
    id: 'Task 1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20,
    dependencies: 'Task 2, Task 3',
    custom_class: 'bar-milestone' // optional
  },
  ...
]
var gantt = new Gantt("#gantt", tasks);

You can also pass various options to the Gantt constructor:

var gantt = new Gantt("#gantt", tasks, {
    header_height: 50,
    column_width: 30,
    step: 24,
    view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
    bar_height: 20,
    bar_corner_radius: 3,
    arrow_curve: 5,
    padding: 18,
    view_mode: 'Day',   
    date_format: 'YYYY-MM-DD',
    custom_popup_html: null
});

If you want to contribute:

  1. Clone this repo.
  2. cd into project directory
  3. yarn
  4. yarn run dev

License: MIT


Project maintained by frappe

Comments
  • Add hour view mode

    Add hour view mode

    This PR has been moved to #142

    This pull request is in with reference to issue #52. I have added the hour view mode. gantt_chart.change_view_mode('Hour')

    The date-time format should be as (YYYY:MM:DD HH:MM:SS) Eg:2018-03-24 00:00:00

    This is my first ever pull request. In case of any issues with it, please do let me know.

    opened by anto-christo 22
  • Few functions and fixes to the gantt

    Few functions and fixes to the gantt

    Hello,

    i added a few functions i needed for a project.

    • I made dependencies editable. You now can create new dependencies using the pop up and delete them by clicking on the arrows. These actions also fire events
    • Editing the tasks and dependencies is optional
    • The months in the pop up are now localized
    • The pop up don't overlay the bars anymore
    • Added german localization
    • changed mouse events while draging bars from offsetX to clientX
    opened by WurstMitBrot 12
  • Custom color in different tasks

    Custom color in different tasks

    Just an idea that good to have some custom color input for different tasks like below. This will help user to view chart as multiple or group tasks more clearly.

    let tasks = [ { id: 'Task 1', name: 'Redesign website', color: '#ff0033', start: '2018-7-1', end: '2018-7-30', progress: 20, }, { id: 'Task 2', name: 'website 2', color: '#ff0033', start: '2018-7-05', end: '2018-7-15', progress: 80, dependencies: 'Task 1' }, { id: 'Task 3', name: 'website 3', color: '#ffff33', start: '2018-7-10', end: '2018-7-20', progress: 50, dependencies: 'Task 2' }, { id: 'Task 4', name: 'website 4', color: '#ff0066', start: '2018-7-10', end: '2018-7-20', progress: 50, dependencies: 'Task 2' }, { id: 'Task 5', name: 'website 5', color: '#ff00ff', start: '2018-7-10', end: '2018-7-20', progress: 50, dependencies: 'Task 2' },

    opened by jukbot 7
  • Change mode view ... always in days in popup ?

    Change mode view ... always in days in popup ?

    Hello,

    First, I just begin to discover your effective and very user-friendly library :+1:

    Just a little feedback about the feature "change view mode" : the durations in the popup are always displayed in days regardless of the mode chosen... This may sound a bit wrong for the user and it's really damaging for your great job...

    Temporarily, I just changed that in the configuration file passing a variable for this action ...

    • line 1364 var line_1 = 'Duration:' + self.duration + 'days';
    • by var line_1 = 'Duration:' + Math.round(self.duration*100)/100 + ' ' + gt.config.view_mode;

    I also rounded the duration to be there;) Probably not ideal but it works well like that for now... what do you think about this?

    Thanks very much again for your work often there are still small developments to fix

    opened by jgorene 7
  • Dependencies: moment

    Dependencies: moment

    Now, the dependencies moment is not require in the source code, so we need to import moment.js by script tag in html.

    issues here on my project gantt-for-react, see below.

    opened by hustcc 7
  • The latest version does not work on Chrome

    The latest version does not work on Chrome

    The following error is thrown when I initialize a new Gantt

    Invalid argument passed for element at Gantt.setup_wrapper (frappe-gantt.js:948) at new Gantt (frappe-gantt.js:934)

    Error caused by the following code if (!(element instanceof HTMLElement)) { throw new Error('Invalid argument passed for element'); }

    The element parameter was a svg element and certainly it is an instance of SVGElement however library just accepts an instance of HTMLElement. Anyone else encounter this error also?

    opened by LinhTran1 6
  • What is wrong with this library? Did you update the source wrong?

    What is wrong with this library? Did you update the source wrong?

    The source is behaving COMPLETELY different from what you have in the demo at Demo

    I cloned downloaded the repo and ran the index file and changed index.html ["Redesign website", [-63, 7]] so that December would show up on the chart. And this is what I get Link.

    Next, I added gantt_chart.change_view_mode('Week') at the end of the script and this is what the result looked like this Link. Furthermore, once the view_mode is changed you can no longer drag the elements.

    I don't understand how the demo works perfectly and what you have here is completely messed up.

    opened by Raptor2277 5
  • use jalali date

    use jalali date

    hello thank you for amazing gantt chart, i need change date type to jalali with jalali-moment

    how i can integrate it with this

    https://github.com/jalaali/moment-jalaali

    opened by webineh 5
  • Updated for Webpack 3, and fixed bug of SVGSVGElement

    Updated for Webpack 3, and fixed bug of SVGSVGElement

    Hello, frappe team,

    I updated all packages to the latest versions, with Webpack 3 configuration ofc. There was some issues when the type of the element is SVGSVGElement, now it works without any problem.

    Now it's better with npm packages.

    Please remember to update package.json version when publishing to npm.

    Happy coding! 🥇

    opened by mohammed-io 5
  • Is this library being maintained or looking for maintainers?

    Is this library being maintained or looking for maintainers?

    I am using this library at my company and there are a few fixes we will be doing internally, and I would like to know if it is worth it creating PRs since I'm unsure if the current owner is maintaining it.

    opened by kaiomagalhaes 4
  • React build failed to minify file

    React build failed to minify file

    Hey,

    I use https://github.com/hustcc/gantt-for-react version 0.2.0 that is react wrapper of this package. But, when i build, i got error that react coudn't compile file svg_utils.js:9.

    Here's the full error messages.

    yarn run v1.7.0
    $ cross-env REACT_APP_BUILD_ENV=production react-scripts build
    Creating an optimized production build...
    Failed to compile.
    
    Failed to minify the code from this file: 
    
     	./node_modules/frappe-gantt/src/svg_utils.js:9 
    
    Read more here: http://bit.ly/2tRViJ9
    
    error Command failed with exit code 1.
    
    opened by gravitano 4
  • Bump terser from 5.13.0 to 5.16.1

    Bump terser from 5.13.0 to 5.16.1

    Bumps terser from 5.13.0 to 5.16.1.

    Changelog

    Sourced from terser's changelog.

    v5.16.1

    • Properly handle references in destructurings (const { [reference]: val } = ...)
    • Allow parsing of .#privatefield in nested classes
    • Do not evaluate operations that return large strings if that would make the output code larger
    • Make collapse_vars handle block scope correctly
    • Internal improvements: Typos (#1311), more tests, small-scale refactoring

    v5.16.0

    • Disallow private fields in object bodies (#1011)
    • Parse #privatefield in object (#1279)
    • Compress #privatefield in object

    v5.15.1

    • Fixed missing parentheses around optional chains
    • Avoid bare let or const as the bodies of if statements (#1253)
    • Small internal fixes (#1271)
    • Avoid inlining a class twice and creating two equivalent but !== classes.

    v5.15.0

    • Basic support for ES2022 class static initializer blocks.
    • Add AudioWorkletNode constructor options to domprops list (#1230)
    • Make identity function inliner not inline id(...expandedArgs)

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump minimatch from 3.0.4 to 3.1.2

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Error with Angular 15

    Error with Angular 15

    ./node_modules/frappe-gantt/src/gantt.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

    • ./node_modules/resolve-url-loader/index.js
    • ./node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

    .gantt .grid-background { | fill: none; | }

    With Angular 14 work with it: https://github.com/frappe/gantt/issues/203#issuecomment-1315502431

    opened by alvarosinmarca 0
  • Header Bug scroll and PDF download

    Header Bug scroll and PDF download

    Hi

    I have plugged in the Frappe Gantt chart in one of our project two view the task progress. In addition we have two requirement with the Frappe Gantt chart as following:

    a) To fix the Header of the displayed Gantt and the bars will scroll under the fix header b) To take a print out of the displayed Gantt in PDF or to download the displayed Gantt chart as JPG or PNG format

    Please help in this regards....

    opened by ErvisGuri 0
  • Providing a custom start date of the X-axis scale.

    Providing a custom start date of the X-axis scale.

    For any View mode I will choose, the x-axis will start far behind and then I can scroll back. I need to specify a minimum date in the x-axis where the graph will start. Please refer to this from chart3 js HERE

    opened by charity1475 0
IBM Gantt Chart Component, integrable in Vanilla, jQuery, or React Framework.

@ibm/gantt-chart IBM Gantt Chart Component, integrable in Vanilla, jQuery, or React Framework. Getting started Documentation and Examples are availabl

International Business Machines 169 Dec 20, 2022
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Dec 28, 2022
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

obsidian-echarts Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

null 23 Dec 26, 2022
An open source project management tool with Kanban boards

An open source project management tool with Kanban boards

Jordan Knott 3.5k Jan 4, 2023
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
Open source CSS framework for data visualization.

Charts.css Charts.css is an open source CSS framework for data visualization. Visualization help end-users understand data. Charts.css help frontend d

null 5.7k Jan 4, 2023
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
Gephi - The Open Graph Viz Platform

Gephi - The Open Graph Viz Platform Gephi is an award-winning open-source platform for visualizing and manipulating large graphs. It runs on Windows,

Gephi 5.1k Jan 4, 2023
The code base that powered India in Pixels' YouTube channel for more than 2 years - now open sourced for you to use on your own projects

India in Pixels Bar Chart Racing For over two years, this nifty code base powered India in Pixels' YouTube channel with videos fetching over millions

India in Pixels 141 Dec 4, 2022
JavaScript 3D library.

three.js JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current

Mr.doob 87.9k Jan 2, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
Highcharts JS, the JavaScript charting framework

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. Official website: www.highcharts.com D

Highsoft 10.9k Jan 9, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
JavaScript Vector Library

Raphaël: Cross-browser vector graphics the easy way Visit the library website for more information: http://raphaeljs.com https://dmitrybaranovskiy.git

Dmitry Baranovskiy 11.2k Jan 3, 2023
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Jan 3, 2023