A-Frame Charts Component

Check the API

Current visualizations

• Bubble Chart

  This is the bubble chart example.

  We only need this piece of html code in order to run it

  <a-entity charts="type: bubble; dataPoints: ../data/dataPositive.json"></a-entity>

  Full detailed Code

• Bar Chart

  This is the bar chart example.

  We only need this piece of html code in order to run it

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

  Full detailed Code

• Cylinder Chart

  This is the cylinder chart example.

  We only need this piece of html code in order to run it

  <a-entity charts="type: bubble; dataPoints: ../data/data.json; axis_negative: false"></a-entity>

  Full detailed Code

• Pie Chart

  This is the pie chart example.

  We only need this piece of html code in order to run it

  <a-entity charts="type: pie; dataPoints: ../data/dataPie.json; pie_radius: 3"></a-entity>

  Full detailed Code

• Doughnut Chart

  This is the doughnut chart example.

  We only need this piece of html code in order to run it

  <a-entity charts="type: pie; dataPoints: ../data/dataPie.json; pie_radius: 3; pie_doughnut: true">
  </a-entity>

  Full detailed Code

• Totem

  This is the totem example.

  We can use it in order to change data dynamically

  <a-entity  position="1 15 10" charts='type: totem;  entity_id_list: barId;
      dataPoints_list: {"dataPositive.json": "../data/dataPositive.json", "data.json": "../data/data.json", "dataSmall.json": "../data/dataSmall.json"}'>
  </a-entity>

  Full detailed Code

Several Chart options

• Support Tons of data

  We have optimized our library in order to support tons of Data. Click the image to see the example

• Multiple Axis options

  We have developed several axis options. Click below in the API link in order to see all the options or in the image to see a visual example

  API
  Full detailed Code

• Dynamic Museum

  This is the museum of the library.

  We could see all the charts changing data dynamically

  Adapted for VR devices such as Oculus, etc

  Example Code

• Pop up Data

  In this example we are able to see the data with a pop up

  Example code

• Chart with legend

  In this example we are able to see the data with a legend

  Example code