That Chart is possible due to iFrame, an HTML element that allows us to use a webpage inside another webpage(just like Inception), each with its own code.
First you need to add the iFrame element in your page and create (or copy) the code that goes inside the iFrame. This is the code I used in my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<!-- Here you import the chart.js from their server -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="400" height="200"></canvas>
<script>
//Here you select the chart that you created inside the canvas.
var chart = document.getElementById('myChart')
//This is a provisional data that I created with a random function.
var chartData = [
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
getRandomInt(),
]
//This object below is the configuration object needed by the new Chart.
var chartConfig = {
type: 'bar',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
datasets: [
{
label: 'Monthly Clicks',
data: chartData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)',
],
borderWidth: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
},
],
},
options: {
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
onClick: handleClick,
hover: {
mode: 'index',
intersect: true,
},
animations: {
tension: {
duration: 1000,
easing: 'linear',
from: 1,
to: 0,
loop: true,
},
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
}
//This is to create the new Chart with the configuration object and the HTML element.
var myChart = new Chart(chart, chartConfig)
//This is a listener for things outside the iFrame.
window.addEventListener(
'message',
({ data }) => {
myChart.data.datasets[0].data = data
myChart.update()
},
false
)
//This function is just used to create the random data.
function getRandomInt(min = 1, max = 20) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max - min + 1)) + min
}
//This function handles the clicks inside the iFrame.
function handleClick(event) {
//This method gets the exact clicked position and element
var points = myChart.getElementsAtEventForMode(
event,
'nearest',
{ intersect: true },
true
)
if (points.length) {
const firstPoint = points[0]
var label = myChart.data.labels[firstPoint.index]
var value =
myChart.data.datasets[firstPoint.datasetIndex].data[
firstPoint.index
]
var clickedIndex = firstPoint.index
let borderWidth = myChart.data.datasets[0].borderWidth
const selectBar = clickedIndex
const changedBorderWidth = borderWidth.map((item, index) =>
index === selectBar ? 3 : 1
)
myChart.data.datasets[0].borderWidth = changedBorderWidth
myChart.update()
const message = { type: 'click', label, value, clickedIndex }
window.parent.postMessage(message, '*')
}
}
//This function sends a message to the parent window, saying it is ready to render data.
function ready() {
const message = { type: 'ready' }
window.parent.postMessage(message, '*')
}
</script>
</body>
</html>
Next you need to create the elements that change the data inside the iFrame, in my example I create a button that increases the selected data by 1.
//Random data to feed the Chart.
let clicks = [6, 12, 7, 5, 9, 7, 10, 22, 5, 13, 19, 11]
//Variable to store selected bar.
let selectedBarIndex
//Method that runs on page load.
$w.onReady(() => {
//Method that listens for data from outside the webpage.
$w('#html').onMessage(({ data }) => {
if (data.type === 'ready') {
//If the data has a ready message, then updates the data.
$w('#html').postMessage(clicks)
}
if (data.type === 'click') {
//If the data is a click type, then updates the data with information
const { value, label, clickedIndex } = data
selectedBarIndex = clickedIndex
$w('#clickedMessage').html = `<span style="color: black; font-size:1rem">We had ${value} clicks in ${label}</span>`
$w('#clickedMessage').show()
}
})
})
export function btnAddClick_click(event) {
if (selectedBarIndex !== undefined) {
clicks[selectedBarIndex]++
$w('#html').postMessage(clicks)
} else {
$w('#clickedMessage').show()
$w('#clickedMessage').html =
'<span style="color: red;font-size:1.5rem">You have to select a bar first!</span>'
}
}
It is hard to understand at first, specially because of the iFrame communication. But with time, you can really understand it.