How to make charts

The user guide in order to use this components for building charts with A-Frame.

Thing you need:

1. An entity with one of the babiaxr-querier components for querying the selected data.

2. Optional: Use the component babia-filter selecting the querier entity (or putting it in the same entity) to filter the data.

3. Then, select the chart that you want…

• NOTE: Use the component babia-treebuilder selecting the querier/filterdata entity (or putting it in the same entity) to generate a tree data format for the babia-city and babia-boats visualizations.

Before using them, you need to understand how the components send data with each other, see how is the components STACK/WORKFLOW.

Pie

1. Add the component babia-pie (see the API for more details), defining at least these attributes:
   • from: the filterdata/querier where the data for the chart is stored.
   • key: the field of the data that will define each slice of the pie. (Make sure that this field has unique values!)
   • size: the numeric field of the data that will define the size of the slices.

Simple bar chart (2D bars chart)

1. Add the component babia-bars (see the API for more details), defining at least these attributes:
   • from: the filterdata/querier where the data for the chart is stored.
   • x_axis: the field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • height: the numeric field of the data that will define the height of the bars.

Bars Map

1. Add the component babia-barsmap (see the API for more details), defining at least these attributes:
   • from: the filterdata/querier where the data for the chart is stored.
   • x_axis: the field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • z_axis: the field of the data that will define the tags of the z_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • height: the numeric field of the data that will define the height of the bars.

Bubbles

1. Add the component babia-bubbles (see the API for more details), defining at least these attributes:
   • from: the filterdata/querier where the data for the chart is stored.
   • x_axis: the field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • z_axis: the field of the data that will define the tags of the z_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • height: the numeric field of the data that will define the height of the bubbles.
   • radius: the numeric field of the data that will define the radius/size of the bubbles.

Cylinders Map

1. Add the component babia-cylsmap (see the API for more details), defining at least these attributes:
   • from: the filterdata/querier where the data for the chart is stored.
   • x_axis: the field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • z_axis: the field of the data that will define the tags of the z_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • height: the numeric field of the data that will define the height of the cylinders.
   • radius: the numeric field of the data that will define the radius/size of the cylinders.

Cylinders

1. Add the component babia-cyls (see the API for more details), defining at least these attributes:

   • from: the filterdata/querier where the data for the chart is stored.
   • x_axis: the field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!)
   • height: the numeric field of the data that will define the height of the cylinders.
   • radius: the numeric field of the data that will define the radius/size of the cylinders.

2. Finally, add the component babia-cyls (with its optional params if you want):

Doughnut

1. Add the component babia-doughnut (see the API for more details), defining at least these attributes:
   • from: the filterdata/querier where the data for the chart is stored.
   • key: the field of the data that will define each slice of the pie. (Make sure that this field has unique values!)
   • size: the numeric field of the data that will define the size of the slices.

City

NOTE: This chart needs a babia-treebuilder component for having a tree data format.

1. Add the component babia-city (see the API for more details), defining at least these attributes:
   • from: the treebuilder where the data for the chart is stored.
   • fheight: the numeric field of the data that will define the height of the buildings.
   • farea: the area field of the data that will define the area of the buildings.

Boats

NOTE: This chart needs a babia-treebuilder component for having a tree data format.

1. Add the component babia-boats (see the API for more details), defining at least these attributes:
   • from: the treebuilder where the data for the chart is stored.
   • height: the numeric field of the data that will define the height of the buildings.
   • area: the area field of the data that will define the area of the buildings. DON’T USE IT WITH WIDTH/DEPTH PARAMETERS.
   • width: the area field of the data that will define the width of the buildings. DON’T USE IT WITH AREA PARAMETERS.
   • depth: the area field of the data that will define the depth of the buildings. DON’T USE IT WITH AREA PARAMETERS.

Full examples here

More content will be added soon…