How to Create Dynamic Graph in wix. pls
it is a dynamic graph?
@vinxbsp It can be. You can read the documentation for the Chart.JS API , it is really nice.
like real-time graph? it is possible to the wix?
How?
Yes, real time, with animation and everything. Just have to read the two article and the API Documentation.
@bwprado woow thats great but i have few knowledge in wix code. pls help
how can i integrate it i try the code but theres no result
pls give me an example of a real time graph to wix.
@vinxbsp sorry for the delay, here is the chart I created to test everything.
Interactive Chart with Chart.JS
woow its awesome thank you for that sir, but i dont know how to doin can you give me the code or teach me, or step by step?. sorry i reaaly need it. thank you very musch for you tijme. i know it is very simpe to you to make that… pls help. TIA
Actually, it is not very simple, it is not simple at all, especially if you are a beginner. But I am writing a guide to try and help you.
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.