Example: use chart.js in Directual

Step 1: Preparing data
Create a structure "population" with 2 columns: date and value and fill it
​
​
​
​
2. Create endpoint for reading this structure
​
​
Now, we have:
1.structure population with data
2.endpoint for reading this structures
Step 2: Creating plugin
Create new plugin in main page.
​
​
In section "Parameters" set JS lib: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"
The lib will be loaded with an open page containing the current plugin and you could use function from the one.
​
​
Add new component in "web-component" section
Also add 2 parameters: 
endpont with type "API-endpoint" for access data to any API
title - for render name your grafic
​
​
And insert this code to "Initialize" section:
function(instance, context) {
​
  div = $('<canvas id="myChart"></canvas>');
  div.css('width', '100%');
  div.css('height', '100%');
  div.css('cursor', 'pointer');
  
  instance.canvas.append(div);
​
}
Then insert bellow code to "Update" section:
function(instance, properties, context) {  var ctx = document.getElementById('myChart');
var data = context.endpoint || []
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: data.map(s=>s.date),
        datasets: [{
            label: '# of ' + context.title,
            data: data.map(s=>parseInt(s.value)),
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
}); }
And share you plugin to your app in "Status and action" section:
​
​
Insert you app name in "Apps, where the plugin is available", and new plugin will be available in this apps.
Last step: use your plugin in your app!
Open your app, and go to "Plugin" section and install it!
Move your component from the right section to your page and 
 it
​
And you could click to "View page".
Voilà
​
​
​
​

Developing Web-plugins

Example: build simple form

Last modified 3mo ago

Copy link

Outline

Step 1: Preparing data

Step 2: Creating plugin

Last step: use your plugin in your app!