Need private packages and team management tools?Check out npm Teams »

aframe-charts-component

2.1.11 • Public • Published

aframe-charts-component

Version License

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

animation

API

Property Description Default Value
type Chart type. Currently we have bubble, pie, doughnut, bar, totem and cylinder charts.

*Totem: is used to change dynamically data charts
bubble
dataPoints Path to JSON input file, asset or array of JSON data ../data/data.json
axis_position Set the axis position {x:0, y:0, z:0}
axis_visible If false, axis will be hidden true
axis_color Set the axis color red
axis_length Set the axis length. By default axis will be adaptive to the dataPoints 0
axis_tick_separation Set the axis tick separation 1
axis_tick_length Set the axis tick length 0.2
axis_tick_color Set the axis tick color red
axis_negative Enable 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 default true
axis_grid Enable grid axis false
axis_grid_3D Enable negative 3D axis false
axis_text Enable axis values true
axis_text_color Set the axis text color white
axis_text_size Set the axis text size 10
pie_radius Pie chart radius 1
pie_doughnut Pie chart doughnut mode false
show_popup_info Show data point info in a pop up. Doesn't work for pie or doughnut chart false
show_legend_info Show data point info in a legend false
show_legend_position Set the legend position. Only works if show legend info property is true {x:0, y:0, z:0}
show_legend_rotation Set the legend rotation. Only works if show legend info property is true {x:0, y:0, z:0}
show_legend_title Title appearing in legend Legend
entity_id_list Comma separated list of a-entity ID. Only used in totem chart type barId,pieId
dataPoints_list JSON 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>

Install

npm i aframe-charts-component

DownloadsWeekly Downloads

14

Version

2.1.11

License

Apache-2.0

Unpacked Size

102 kB

Total Files

21

Last publish

Collaborators

  • avatar
  • avatar