Example: Using Chart.js in Directual
Step 1: Preparing data
"Create a data structure named Population with two columns: date and value, and populate it.
2. Create an endpoint for accessing this data structure
Now you have:
A data structure called Population
An endpoint for accessing this data structure
Step 2: Creating plugin
Create a new plugin on the main page.
In the Parameters sections, set the JS library to: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js". This library will be loaded on the open page, allowing you to utilize functions from it.
Add a new component in the Web-component section
Be sure to include the following two parameters:
'Endpoint' with a type of 'API-endpoint' to access data from any API
'Title' for rendering the name of your graphic.
Insert the code to 'initialize' section:
Then insert the code bellow to the 'Update' section:
Add your plugin to your app in the 'Status and action' section:
Insert your app's name in the 'Apps where the plugin is available' field. The new plugin will then be available in these apps.
Last step: Use your plugin in your app!
Open your app, and go to the Plugins section and install it.
Move your component from the right section to your page.
Click on 'View page'.
Voilà!
Last updated