Skip to content

Latest commit

 

History

History
136 lines (111 loc) · 5.68 KB

README.md

File metadata and controls

136 lines (111 loc) · 5.68 KB
Raw

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>