Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including aframe-charts-component with all npm packages installed. Try it out:

var aframeChartsComponent = require("aframe-charts-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

aframe-charts-component v2.1.11

Make 3D Charts with this component based on A-Frame.

aframe-charts-component

Version License

Make 3D Charts with this component based on A-Frame.

animation

API

PropertyDescriptionDefault Value
typeChart type. Currently we have bubble, pie, doughnut, bar, totem and cylinder charts.

*Totem: is used to change dynamically data charts
bubble
dataPointsPath to JSON input file, asset or array of JSON data../data/data.json
axis_positionSet the axis position{x:0, y:0, z:0}
axis_visibleIf false, axis will be hiddentrue
axis_colorSet the axis colorred
axis_lengthSet the axis length. By default axis will be adaptive to the dataPoints0
axis_tick_separationSet the axis tick separation1
axis_tick_lengthSet the axis tick length0.2
axis_tick_colorSet the axis tick colorred
axis_negativeEnable negative axis. If all your dataPoints were positive, you would need to set axis_length in order to activate. If not, axis are adaptive to dataPoints by defaulttrue
axis_gridEnable grid axisfalse
axis_grid_3DEnable negative 3D axisfalse
axis_textEnable axis valuestrue
axis_text_colorSet the axis text colorwhite
axis_text_sizeSet the axis text size10
pie_radiusPie chart radius1
pie_doughnutPie chart doughnut modefalse
show_popup_infoShow data point info in a pop up. Doesn't work for pie or doughnut chartfalse
show_legend_infoShow data point info in a legendfalse
show_legend_positionSet the legend position. Only works if show legend info property is true{x:0, y:0, z:0}
show_legend_rotationSet the legend rotation. Only works if show legend info property is true{x:0, y:0, z:0}
show_legend_titleTitle appearing in legendLegend
entity_id_listComma separated list of a-entity ID. Only used in totem chart typebarId,pieId
dataPoints_listJSON with name and data points. Only used in totem chart type{"data1": "../data/data.json", "data2": [{"x": 1, "y": 8, "z": 0, "size": 1, "color": "#ff0000"}]}

JSON File

File which contains the points in order to generate the chart. The path of this file must be included in dataPoint property.

Example JSON file:

[
  {"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"}
]  

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-charts-component/dist/aframe-charts-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity charts="dataPoints: ../data/data.json; type: bar"></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-charts-component

Then require and use.

require('aframe');
require('aframe-charts-component');

Extra Inputs

-Ajax:

<head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-charts-component/dist/aframe-charts-component.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <a-scene>
        <a-entity id="myChart"></a-entity>
    </a-scene>
</body>
 $.get("/examples/data/data.json", function( data ) {
     let myChart = document.getElementById("myChart");
     myChart.setAttribute('charts', {type: "bar",  dataPoints: data});
 }); 

-Asset:

<head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-charts-component/dist/aframe-charts-component.min.js"></script>
</head>

<body>
    <a-scene>
        <a-asset>
            <a-asset-item id="data" src='[{"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"}]'>
            </a-asset-item>
        </a-asset>
        <a-entity charts="type: bar; dataPoints: #data; axis_length: 12"></a-entity>
    </a-scene>
</body>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free