Home

Cylinder Chart Code

You only need this lines in order to see the cylinder chart.

<head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-charts-component/dist/aframe-charts-component.min.js"></script>
</head>
<body>
    <!-- Aframe scene -->
    <a-scene background="color: grey">
        <!-- Aframe light -->
        <a-light type="point" intensity="1" position="-2 10 10"></a-light>

        <!-- Declaring chart component -->
        <a-entity charts="type: cylinder; dataPoints: ../data/data.json; axis_negative: false"></a-entity>

        <!-- Aframe camera -->
        <a-entity position="2 10 14" rotation="-30 15 0">
            <a-camera position="3 -1 4" rotation="0 -1 0">
                <a-cursor></a-cursor>
            </a-camera>
        </a-entity>
    </a-scene>
</body>
Check the visual example See our API for axis options and more

JSON input example


[
  {"x": 1, "y": 8, "z": 0, "size": 1, "color": "#ff0000"},
  {"x": -2, "y": 3, "z": 1, "size": 1.5, "color": "#00ff00"},
  {"x": -1, "y": 3, "z": 2, "size": 1, "color": "#0000ff"},
  {"x": 2, "y": 7, "z": 7, "size": 1.5, "color": "#0000ff"},
  {"x": 1, "y": 6, "z": 3, "size": 1, "color": "#4CC3D9"},
  {"x": 3, "y": 4, "z": 1, "size": 1.5, "color": "#EF2D5E"},
  {"x": 2, "y": 1, "z": 5, "size": 1, "color": "#ff0000"},
  {"x": 1, "y": 10, "z": 6, "size": 1.5, "color": "#00ff00"},
  {"x": 3, "y": 5, "z": 0, "size": 1, "color": "#ff0000"},
  {"x": -4, "y": 4, "z": 1, "size": 1.5, "color": "#00ff00"},
  {"x": 5, "y": 9, "z": 1, "size": 1, "color": "#0000ff"},
  {"x": 6, "y": 4, "z": 10, "size": 1.5, "color": "#0000ff"},
  {"x": 8, "y": 5, "z": -2, "size": 1, "color": "#4CC3D9"},
  {"x": 9, "y": 7, "z": 2, "size": 1.5, "color": "#EF2D5E"},
  {"x": 5, "y": 0, "z": 6, "size": 1, "color": "#ff0000"},
  {"x": 5, "y": 9, "z": 4, "size": 1.5, "color": "#00ff00"},
  {"x": 6, "y": 6, "z": 1, "size": 1, "color": "#ff0000"},
  {"x": -1, "y": 4, "z": 0, "size": 1.5, "color": "#00ff00"},
  {"x": 4, "y": 2, "z": 5, "size": 1, "color": "#0000ff"},
  {"x": 7, "y": 1, "z": 8, "size": 1.5, "color": "#0000ff"},
  {"x": 1, "y": 4, "z": 3, "size": 1, "color": "#4CC3D9"},
  {"x": 8, "y": 6, "z": 4, "size": 1.5, "color": "#EF2D5E"},
  {"x": 9, "y": 6, "z": 3, "size": 1, "color": "#ff0000"},
  {"x": 3, "y": 9, "z": 3, "size": 1.5, "color": "#00ff00"}
]