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. 1.
    structure population with data
  2. 2.
    endpoint for reading this structures

Step 2: Creating plugin

Create new plugin in main page.
​
​
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Γ 
​
​
​
​