null
.string
to your data (after the Task ID
and Task Name
columns), and make sure any tasks that should be grouped into a resource have the same resource ID. Resources will be grouped by color.Start | End | Duration | Result |
---|---|---|---|
Present | Present | Present | Check that duration is consistent with start/end times. Throws error if inconsistent. |
Present | Present | Null | Computes duration from start and end times. |
Present | Null | Present | Computes end time. |
Present | Null | Null | Throws error as unable to compute duration or end time. |
Null | Present | Present | Computes start time. |
Null | Null | Present | Computes start time based on dependencies. In conjunction with defaultStartDate , enables chart to be drawn using only durations. |
Null | Present | Null | Throws error as unable to calculate start time or duration. |
Null | Null | Null | Throws error as unable to calculate start time, end time, or duration. |
criticalPathStyle
options. You can also turn off the critical path by setting criticalPathEnabled
to false
.gantt.arrow
options:innerGridHorizLine
, innerGridTrack
, and innerGridDarkTrack
. By setting only the innerGridTrack
, the chart will calculate a darker color for the innerGridDarkTrack
, but by setting only the innerGridDarkTrack
, the innerGridTrack
will use its default color and will not calculate a lighter color.google.charts.load
package name is 'gantt'
.google.visualization.Gantt
.Column 0 | Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | |
---|---|---|---|---|---|---|---|---|
Purpose: | Task ID | Task Name | Resource ID (optional) | Start | End | Duration (in milliseconds) | Percent Complete | Dependencies |
Data Type: | string | string | string | date | date | number | number | string |
Role: | domain | data | data | data | data | data | data | data |
Name | Type | Default | Description |
---|---|---|---|
backgroundColor.fill | string | 'white' | The chart fill color, as an HTML color string. |
gantt.arrow | object | null | For Gantt Charts, gantt.arrow controls the various properties of the arrows connecting tasks. |
gantt.arrow.angle | number | 45 | The angle of the head of the arrow. |
gantt.arrow.color | string | '#000' | The color of the arrows. |
gantt.arrow.length | number | 8 | The length of the head of the arrow. |
gantt.arrow.radius | number | 15 | The radius for defining the curve of the arrow between two tasks. |
gantt.arrow.spaceAfter | number | 4 | The amount of whitespace between the head of an arrow and the task to which it points. |
gantt.arrow.width | number | 1.4 | The width of the arrows. |
gantt.barCornerRadius | number | 2 | The radius for defining the curve of a bar's corners. |
gantt.barHeight | number | null | The height of the bars for tasks. |
gantt.criticalPathEnabled | boolean | true | If true any arrows on the critical path will be styled differently. |
gantt.criticalPathStyle | object | null | An object containing the style for any critical path arrows. |
gantt.criticalPathStyle.stroke | string | null | The color of any critical path arrows. |
gantt.criticalPathStyle.strokeWidth | number | 1.4 | The thickness of any critical path arrows. |
gantt.defaultStartDate | date/number | null | If the start date cannot be computed from the values in the DataTable, the start date will be set to this. Accepts a date value (new Date(YYYY, M, D) ) or a number, which is the number of milliseconds to use. |
gantt.innerGridHorizLine | object | null | Defines the style of the inner horizontal grid lines. |
gantt.innerGridHorizLine.stroke | string | null | The color of the inner horizontal grid lines. |
gantt.innerGridHorizLine.strokeWidth | number | 1 | The width of the inner horizontal grid lines. |
gantt.innerGridTrack.fill | string | null | The fill color of the inner grid track. If no innerGridDarkTrack.fill is specified, this will be applied to every grid track. |
gantt.innerGridDarkTrack.fill | string | null | The fill color of the alternate, dark inner grid track. |
gantt.labelMaxWidth | number | 300 | The maximum amount of space allowed for each task label. |
gantt.labelStyle | object | null | An object containing the styles for task labels. |
gantt.percentEnabled | boolean | true | Fills the task bar based on the percentage completed for the task. |
gantt.percentStyle.fill | string | null | The color of the percentage completed portion of a task bar. |
gantt.shadowEnabled | boolean | true | If set to true , draws a shadow under each task bar which has dependencies. |
gantt.shadowColor | string | '#000' | Defines the color of the shadows under any task bar which has dependencies. |
gantt.shadowOffset | number | 1 | Defines the offset, in pixels, of the shadows under any task bar which has dependencies. |
gantt.trackHeight | number | null | The height of the tracks. |
width | number | width of the containing element | Width of the chart, in pixels. |
height | number | height of the containing element | height of the chart, in pixels. |
Method | Description |
---|---|
draw(data, options) | Draws the chart. The chart accepts further method calls only after the ready event is fired. Extended description . |
getSelection() | Returns an array of the selected chart entities. Selectable entities are bars, legend entries and categories. For this chart, only one entity can be selected at any given moment. Extended description . Return Type: Array of selection elements |
setSelection() | Selects the specified chart entities. Cancels any previous selection. Selectable entities are bars, legend entries and categories. For this chart, only one entity can be selected at a time. Extended description . |
clearChart() | Clears the chart, and releases all of its allocated resources. Return Type: none |
Event | Description |
---|---|
click | Fired when the user clicks inside the chart. Iomega 1tb home media network hard drive user manual. Can be used to identify when the title, data elements, legend entries, axes, gridlines, or labels are clicked. |
error | Fired when an error occurs when attempting to render the chart. Properties: id, message |
ready | The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired. |
select | Fired when the user clicks a visual entity. To learn what has been selected, call getSelection() . Properties: none |