Published
Edited
Aug 6, 2020
viewof chart = {
const placeholder = html`<div style="height:480px"></div>`;
yield placeholder;
new hpccChart.Bar()
.target(placeholder)
.columns(["label", "weight"])
.data([
["Google", 22, {link:"https://www.google.com"}],
["Bing", 32, {link:"https://www.bing.com"}],
["DuckDuckGo", 42, {link:"https://www.duckduckgo.com"}]
])
.overrideMethod("tooltipFormat", function(row) {
return "<h1>Hello and Welcome!</h1><br>" + JSON.stringify(row, undefined , 2);
})
.on("click", (row, col, sel) => {
if (row.__lparam) {
window.open(row.__lparam.link, "_blank");
// Notify ObservableHQ that the selection has changed
placeholder.value = row;
placeholder.dispatchEvent(new CustomEvent("input"));
}
})
.lazyRender()
;
}
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.
