This package is part of the mono repository "@hpcc-js" (aka Visualization Framework), for more information including Quick Start, Gallery and Tutorials, please visit the main page on GitHub: hpcc-systems/Visualization.
<html>
<head>
<title>Simple DockPanel</title>
<script src="https://unpkg.com/@hpcc-js/util"></script>
<script src="https://unpkg.com/@hpcc-js/common"></script>
<script src="https://unpkg.com/@hpcc-js/api"></script>
<script src="https://unpkg.com/@hpcc-js/chart"></script>
<script src="https://unpkg.com/@hpcc-js/phosphor"></script>
</head>
<body>
<div id="placeholder" style="width:800px;height:600px;"></div>
<script>
const columns = ["Subject", "Result"];
const data = [
["English", 45],
["Irish", 28],
["Math", 98],
["Geography", 48],
["Science", 82]
];
const area = new window["@hpcc-js/chart"].Area()
.columns(columns)
.data(data);
const line = new window["@hpcc-js/chart"].Line()
.columns(columns)
.data(data);
const bubble = new window["@hpcc-js/chart"].Bubble()
.columns(columns)
.data(data);
new window["@hpcc-js/phosphor"].DockPanel()
.addWidget(area, "<drag me>")
.addWidget(bubble, "<drag me>", "split-right", area)
.addWidget(line, "<drag me>", "split-bottom", area)
.target("placeholder")
.render();
</script>
</body>
</html>