Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jsgantt-improved

Package Overview
Dependencies
Maintainers
1
Versions
104
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jsgantt-improved

jsgantt-improved

  • 1.8.6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
766
decreased by-43.96%
Maintainers
1
Weekly downloads
 
Created
Source

A fully featured gantt chart component built entirely in Javascript, CSS and AJAX. It is lightweight and there is no need of external libraries or additional images.

Build Status

Start using with including the files jsgantt.js and jsgantt.css that are inside demo/ folder.

Or install and use in JS

npm install jsgantt-improved

Import in your JS import {JSGantt} from 'jsgantt-improved';

For Angular use the component ng-gantt

Example

You can view a live example at

https://mariohmol.github.io/jsgantt-improved/demo

Easy to Use

<link href="jsgantt.css" rel="stylesheet" type="text/css"/>
<script src="jsgantt.js" type="text/javascript"></script>

<div style="position:relative" class="gantt" id="GanttChartDIV"></div>

<script>

var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');

g.setOptions({
  vCaptionType: 'Complete',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,     
  vQuarterColWidth: 36,
  vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
  vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to dates in the "Major" header of the "Day" view
  vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
  vLang: 'en',
  vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
  vShowEndWeekDate: 0,  // Show/Hide the date for the last day of the week in header for daily
  vUseSingleCell: 10000, // Set the threshold cell per table row (Helps performance for large data.
  vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers
});

// Load from a Json url
JSGantt.parseJSON('./fixes/data.json', g);

// Or Adding  Manually
g.AddTaskItemObject({
  "pID": 1,
  "pName": "Define Chart API",
  "pStart": "",
  "pEnd": "",
  "pClass": "ggroupblack",
  "pLink": "",
  "pMile": 0,
  "pRes": "Brian",
  "pComp": 0,
  "pGroup": 1,
  "pParent": 0,
  "pOpen": 1,
  "pDepend": "",
  "pCaption": "",
  "pNotes": "Some Notes text"
});

g.Draw();

</script>

Features

  • Tasks & Collapsible Task Groups
  • Dependencies
  • Task Completion
  • Task Styling
  • Milestones
  • Resources
  • Dynamic Loading of Tasks
  • Dynamic change of format: Hour, Day, Week, Month, Quarter
  • Load Gantt from XML and JSON
    • From external files (including experimental support for MS Project XML files)
    • From JavaScript Strings
  • Support for Internationalization (all hard coded strings can be overridden)

Documentation

See the Documentation wiki page or the included demo/index.html file for instructions on use.

Project based on https://code.google.com/p/jsgantt/.

Want to Collaborate?

Clone this repo and run npm run demo-full, this will start a localhost:8080 with a live example. Do your change in src and restart this command to test.

For testing use npm run test with e2e tests.

FAQs

Package last updated on 20 Nov 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc