aframe-babia-components
Version:
A data visualization set of components for A-Frame.
83 lines (71 loc) • 4.28 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>BabiaXR Bars example (changing)</title>
<meta name="description" content="BabiaXR Bars example (changing)." />
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<script src="../../../dist/aframe-babia-components.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.0.0/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<link rel="stylesheet" href="../../assets/gitlab-corner.css">
</head>
<body>
<a-scene background="color: #A8F3FF" id="AframeScene">
<!-- <a-entity environment="playArea: 2"></a-entity> -->
<a-light type="point" intensity="1" position="-10 20 30"></a-light>
<a-assets>
<a-asset-item id="optimerBoldFont" src="https://rawgit.com/mrdoob/three.js/dev/examples/fonts/optimer_bold.typeface.json"></a-asset-item>
</a-assets>
<a-entity id="left" babia-bars='legend: true; axis: true; palette: commerce;
title: babiaxr-simplebarchart; titleColor: #FFFFFF; titleFont: #optimerBoldFont;
titlePosition: -8.5 0.3 0.5; animation: false; chartHeight: 20; keepHeight: false;
data: [{"x_axis":"Elisea","height":10},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":119}]'
position="-15 0 0" rotation="0 0 0"></a-entity>
<a-entity id="mid" babia-bars='legend: true; axis: true; palette: commerce;
title: babiaxr-simplebarchart; titleColor: #FFFFFF; titleFont: #optimerBoldFont;
titlePosition: -8.5 0.3 0.5; animation: true; chartHeight: 20;
data: [{"x_axis":"Elisea","height":10},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":119}]'
position="-7 0 0" rotation="0 0 0"></a-entity>
<a-entity id="right" babia-bars='legend: true; axis: true; palette: commerce;
title: babiaxr-simplebarchart; titleColor: #FFFFFF; titleFont: #optimerBoldFont;
titlePosition: -8.5 0.3 0.5; animation: true; chartHeight: 20;
data: [{"x_axis":"Elisea","height":10},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":119}]'
position="3 0 0" rotation="0 0 0"></a-entity>
<a-entity movement-controls="fly: true" position="0 10 20">
<a-entity camera position="0 0 0" look-controls></a-entity>
<a-entity cursor="rayOrigin:mouse"></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
</a-entity>
</a-scene>
<script>
console.log("Starting...");
window.setTimeout(function () {
console.log("Time goes by...")
leftEl = document.getElementById('left');
leftEl.setAttribute('babia-bars', {
'data': [{"x_axis":"Elisea","height":20},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":50}]});
midEl = document.getElementById('mid');
midEl.setAttribute('babia-bars', {
'data': [{"x_axis":"Maria","height":5}, {"x_axis":"Elisea","height":20},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":50}]});
rightEl = document.getElementById('right');
rightEl.setAttribute('babia-bars', {
'data': [{"x_axis":"Elisea","height":20},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":50}]});
}, 4*1000);
window.setTimeout(function () {
console.log("Time goes by...")
leftEl = document.getElementById('left');
leftEl.setAttribute('babia-bars', {
'data': [{"x_axis":"Elisea","height":10},{"x_axis":"Maria","height":12},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":200}]});
}, 8*1000);
</script>
</body>
</html>