Return to Components

1. Charts

1.1 What are Charts?

A Chart component renders a chart from Betterdata. These charts come in different types, such as: pie, bar and mix line-bar. You need to have first created a chart in Betterdata and provide the dashboard id and node id for that chart.

1.2 How to create a Chart

1.2.1 Setup in Betterdata

Before creating a chart in Strapi we must first have a dashboard setup in Betterdata with a Chart. The VegaChart Widget requires a report as a datasource. To see how to create a report click here. In this report you will have to configure a chart. This information will define the chart on the dashboard. Once the report is setup you can create your chart.

Chart Example 1

Field	Description	Required?
Node ID	Unique Identifier for the node (randomly generated)	Yes
Box title	Title for the box the chart will be inside, this title only shows when you hover over the box with a mouse	Yes
Widget	All dashboard nodes require you to pick a widget. For this case select Vega Chart	Yes
Datasource	This is where you select your report data object	Yes
Run across communities	If the community this dashboard is on has child communities and you would like to pull data from all communities then tick this	No
Select Graph Template	This is where you select the chart you created from your report	Yes
Widget	...	...
Height	Defines the Height of the chart	No
Width	Defines the width of the chart	No
Left Margin	Defines the left margin of the chart	No
Null Message	Defines what message will appear if the report has no data	No
Context Filter	The context filter is specifically used for Strapi to filter the object depending on the context	No

1.2.2 Setup in Strapi

Now that the chart is setup in BetterData we can create our Strapi Component

Chart Component Example

Field	Description	Required?
Label	The Label for the chart that can be displayed	No
Description	The description of the chart to help identify it in Strapi	No
Height	The height of the chart	No
Width	The width of the chart	No
KwantuDashboardId	The id of the dashboard from betterdata where you created your chart	Yes
KwantuNodeId	The id of the node that your chart is configured	Yes
DisplayTitle	Option to display the label as a title above the chart	Yes
Name	The name of the chart component to help identify it in Strapi	Yes
Uid	The unique identifier of the chart in Strapi, this will be automatically generated based on the Name	Yes

1.3 How can this be developed further?

This could possibly be removed with the introduction of elastic charts.