Written by Patrik Braborec |
This article describes the Polar Area Chart plugin, which displays multivariate data in the form of a two-dimensional chart. It uses a circular graph with multiple axes rising from the center, each representing a different variable. The data is plotted using lines that connect data points on each axis, forming a closed shape that resembles a spider's web. This visualization method allows for easy comparison of multiple variables and their relationships within a dataset.
Create Your Polar Area Chart Plugin
If you want to create your own Polar Area Chart plugin, below are the steps to do it.
Step 1: Clone dashboard-plugin-examples repository
git clone https://github.com/gooddata/gooddata-dashboard-plugins.git
Step 2: Navigate to polar_area_chart_plugin
Step 3: Set environment variables
Make sure you have your .env and .env.secrets files with the correct values. After you clone the repository, you will see a .env.secrets.template file in the polar_area_chart_plugin folder. You will need to remove “template” from the filename to set up everything correctly.
For .env, you will need to define four variables:
# GoodData backend (code name)
# GoodData host
# GoodData workspace id
# GoodData dashboard id
If you open a GoodData dashboard, you can find the BACKEND_URL, WORKSPACE_ID, and the DASHBOARD_ID in the URL like this:
For .env.secrets, you will need only one variable:
# GoodData API token
Check the Create an API token documentation for more information.
Step 4: Check dependencies
Make sure that the dependencies in the package.json file are aligned with the version of the SDK dashboard component you use in your project (if you are embedding the dashboards with the GoodData SDK).
"@gooddata/sdk-ui-dashboard": "^9.2.0" <-- must match in the plugin and your project
Step 5: Build a production version
Build a production version of the plugin using the command npm run build-plugin, or yarn build-plugin. If you have already built this plugin, first delete the dist folder.
Step 6: Upload the built plugin
Upload the built plugin to your hosting. GoodData does not provide hosting for your plugin builds. When you build your plugin, you have to host it yourself in a publicly available location supporting HTTPS.
Also, make sure the hosting of your plugin is included in the allowed plugin hosts by CSP Policy (documentation).
Step 7: Create plugin metadata object
Create a plugin metadata object using the npm run add-plugin or yarn add-plugin command. For more information, run the npm run add-plugin –help or yarn add-plugin --help command.
Copy the plugin object-id noted in the console output for the next step.
Step 8: Link the plugin to the dashboard
Run the npm run link-plugin
Give It a Try
Written by Patrik Braborec |
Subscribe to our newsletter
Get your dose of interesting facts on analytics in your inbox every month.Subscribe