Published
Edited
Apr 22, 2019
1 fork
10 stars
md`# Chart Import Workaround for google charts
google charts will not import directly but requires the workaround listed last in
https://observablehq.com/@tmcw/requiring-modules-troubleshooting
`
google = require("https://www.gstatic.com/charts/loader.js").catch(
() => window.google
)
{
let div = html`<div style='height:400px;'></div>`;
// the div must be first present.
yield div;
// rest of example taken from https://developers.google.com/chart/interactive/docs/gallery/ganttchart
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(div);
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.
