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
  • 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
  • new feature for customize

    new feature for customize

    This pr contains below:

    1. add three attributes for customize
    2. update index.html for new feature
    3. update readme
    4. modify some code indent
    5. update webpack.config.js (let) for old nodejs version

    #11 solved. Review is needed. Compatible with older versions.

    opened by hustcc 4
  • 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 163 Nov 16, 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 Nov 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 3.9k Nov 28, 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.2k Nov 20, 2022
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 22 Nov 27, 2022
An open source project management tool with Kanban boards

An open source project management tool with Kanban boards

Jordan Knott 3.5k Nov 22, 2022
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.6k Nov 30, 2022
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 18.9k Nov 30, 2022
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.2k Nov 21, 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 Nov 29, 2022
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 140 Sep 7, 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 87k Nov 21, 2022
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.3k Nov 20, 2022
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 Nov 29, 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 Nov 22, 2022
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.4k Nov 25, 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.1k Nov 25, 2022
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 Nov 28, 2022