Social development practitioner. Trying to understand our world.
Columbia Glacier Alaska | Wayback Imagery 2014 - 2020World Bank API - Meet Vega LiteToggling a Button's Text and Color for Multiple ValuesBootstrap BoilerplateSimple HTML Table from JS ArrayESRI / ArcGIS Layers PreviewCalculate Working Days, Excluding Weekends & HolidaysDynamic Reporting from Dropdown InputsReporting Data Values using JavaScriptQuick Coordinate EstimationD3 Point on Globe with Input SlidersMermaid.jsInteractive Stacked Bar Chart in D3(v4)Point-Along-Path InterpolationData-Driven SVG Faucet with D3 v4Provinces in IndonesiaD3 Real Time Chart with Multiple Data StreamsToggle Data Views in Google MapsLeaflet referencing GeoJSON and In-Line PolygonsDataMapsDataTablesReal-time multi-series time series chart data (D3v3)Learning JavaScript (and Observable) by Converting a FiddleGraphvizCaseload & Budget, 2000 - 2017 as C3.js Dual-Axis Bar and Line ChartImage Re-Size Using Input
Google Gantt
google = require("https://www.gstatic.com/charts/loader.js").catch(
() => window.google
)
html`
<div id="chart_div"></div>
`
{
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources', null,
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper', 'write',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography', 'write',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper', 'complete',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper', 'write',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
html`
<div id="chart_div1"></div>
`
{
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div1'));
chart.draw(data, options);
}
}
html`
<div id="chart_div3"></div>
`
{
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function toMilliseconds(minutes) {
return minutes * 60 * 1000;
}
function drawChart() {
var otherData = new google.visualization.DataTable();
otherData.addColumn('string', 'Task ID');
otherData.addColumn('string', 'Task Name');
otherData.addColumn('string', 'Resource');
otherData.addColumn('date', 'Start');
otherData.addColumn('date', 'End');
otherData.addColumn('number', 'Duration');
otherData.addColumn('number', 'Percent Complete');
otherData.addColumn('string', 'Dependencies');
otherData.addRows([
['toTrain', 'Walk to train stop', 'walk', null, null, toMilliseconds(5), 100, null],
['music', 'Listen to music', 'music', null, null, toMilliseconds(70), 100, null],
['wait', 'Wait for train', 'wait', null, null, toMilliseconds(10), 100, 'toTrain'],
['train', 'Train ride', 'train', null, null, toMilliseconds(45), 75, 'wait'],
['toWork', 'Walk to work', 'walk', null, null, toMilliseconds(10), 0, 'train'],
['work', 'Sit down at desk', null, null, null, toMilliseconds(2), 0, 'toWork'],
]);
var options = {
height: 275,
gantt: {
defaultStartDateMillis: new Date(2015, 3, 28)
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div3'));
chart.draw(otherData, options);
}
}
html`
<div id="chart_div4"></div>
`
{
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div4'));
chart.draw(data, options);
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
