Gitlab is now using https://gitlab.lcsb.uni.lu as it's primary address. Please update your bookmarks. FAQ.

Commit 81e7f592 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

html test page for piechart

parent 6b0b08d9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Piechart</title>
<script src="http://localhost:8080/ada-charts.js"></script>
</head>
<body>
<div id="piechart-controls">
<span>API examples:</span>
<button onclick="update()">update()</button>
<button onclick="toPNG()">toPNG()</button>
<button onclick="toSVG()">toSVG()</button>
</div>
<div id="piechart-container"></div>
</body>
</html>
<script>
const container = document.querySelector('#piechart-container');
const piechart = AdaCharts.chart({ chartType: 'piechart', container });
function toPNG() {
piechart.toPNG();
}
function toSVG() {
piechart.toSVG();
}
function randomPieces() {
const num = Math.floor(Math.random() * (15 - 4 + 1) + 4);
const pieces = [];
for (let i = 0; i < num; i++) {
pieces.push({
group: 'Group: ' + i,
value: Math.floor(Math.random() * 100)
});
}
return pieces;
}
function update() {
piechart.update({
caption: 'Random Piechart',
clickCallback: d => console.log(d),
values: randomPieces()
});
}
document.addEventListener('DOMContentLoaded', update, false);
</script>
<style>
body {
display: flex;
flex-direction: row;
}
#piechart-controls {
display: flex;
flex-direction: column;
}
#piechart-container {
width: 50vw;
}
</style>
\ No newline at end of file
......@@ -23,7 +23,8 @@ export default class extends Chart {
}
render({
title,
caption,
clickCallback,
values
}) {
const margin = {
......@@ -44,6 +45,6 @@ export default class extends Chart {
this.title
.attr('transform', `translate(${width / 2}, ${-margin.top / 2})`)
.text(title);
.text(caption);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment