@ohdsi/atlascharts
Version:
Visualizations is a collection of JavaScript modules to support D3 visualizations in web-based applications
73 lines (67 loc) • 2.16 kB
HTML
<html>
<head>
<title>Visualizations: Lineplot w/ global build</title>
<link href="example.css" rel="stylesheet">
<link href="chart.css" rel="stylesheet">
</head>
<body>
<h1>Line Plot Example</h1>
<div>This plot shows a simple lineplot with multiple series. It uses an optimized build of the charting libary.</div>
<div style="width:30%" id="plot"></div>
<hr/>
<div>Data:</div>
<textarea id="chartData" style="width:600px; height:400px">
[
{ "name":"Ascending",
"values":[
{"xValue": 0, "yValue": 1},
{"xValue": 1, "yValue": 2},
{"xValue": 2, "yValue": 4},
{"xValue": 3, "yValue": 7},
{"xValue": 4, "yValue": 9}
]},
{ "name":"Descending",
"values":[
{"xValue": 0, "yValue": 9},
{"xValue": 1, "yValue": 7},
{"xValue": 2, "yValue": 4},
{"xValue": 3, "yValue": 2},
{"xValue": 4, "yValue": 1}
]},
{ "name":"Stable",
"values":[
{"xValue": 0, "yValue": 5},
{"xValue": 1, "yValue": 4},
{"xValue": 2, "yValue": 6},
{"xValue": 3, "yValue": 5},
{"xValue": 4, "yValue": 5}
]}
]
</textarea>
<button id="reload">Reload</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="../dist/atlascharts.umd.js"></script>
<script>
var cartData;
// works differently with bundles: the entire module was required(), so line is contained by the charts module.
var lineplot = new atlascharts.line();
var target = '#plot';
function refreshPlot() {
chartData = JSON.parse(document.querySelector("#chartData").value);
lineplot.render(chartData, target, 300, 300, {
ticks: 4,
xLabel: "X Value",
yLabel: "Y Value",
showLegend: true,
});
}
document.querySelector("#reload").addEventListener("click", function() {
refreshPlot();
});
refreshPlot();
</script>
</body>
</html>