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:

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 the code bellow to the '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
            }
        }
    }
}); }