Chartjs-Problem in making chart with Chart.js in wix?

by

0👍

✅

This is easiest done by sending both the data and the labels from your page code in one object. Then in the HTML element, you can set the chart’s data and labels using that object.

In your case, that would look something like this:

Page Code:

let info = {data:data, labels:labels};
$w("#html1").postMessage(info);

HTML Element Code:

window.onmessage = function(event){
   myChart.data.datasets[0].data = event.data.data;
   myChart.data.labels = event.data.labels;

   myChart.update();
};

0👍

You are right! This is the easiest way.
Here is the page code…

var data = [];

for (var i = 1; i < 7; i++) {
var _temp = Math.log10(i);
data.push(_temp);
}
var labels = ["September", "October", "Novemver", "December", "January", "February"];

 $w.onReady(() => {
 console.log("Data length: " + data.length);
 console.log(data);
 console.log("Label length: " + labels.length);
 console.log(labels);

 $w("#html1").onMessage((event) => {

    let info = { data: data, labels: labels };

    if (event.data.type === 'ready') {
        $w("#html1").postMessage(info);
    }
    });
});

Here is the html code…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
 <script src ="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"> 
</script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    labels: [],
    datasets: [{
        label: 'Our activity',
        data: []            
    }]
},
options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
          }
        }]
      }
    }
});

window.onmessage = function(event){

myChart.data.datasets[0].data = event.data.data;
myChart.data.labels = event.data.labels;
  myChart.update();
  };

function ready(){
    window.parent.postMessage({"type":"ready"}, "*");
}

Leave a comment