Connect HTML graphic to page

Ask the community
,
1

I created the following HTML code and added it to the page’s HTML component.

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

var ctx = document.getElementById("myChart");

var DonutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Red', 'Yellow', 'Blue']
      datasets: [{
        data: [],
        backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 199, 132)', 'rgb(55, 99, 132)']
     }]
   },
    options: {
    cutoutPercentage: 50,
};
  });

  </script>

</body>
</html>

What I liked to do and I can’t do was link the graphic to the page to make it work. So far only the blank HTML component appears to me.
I know I have to use the postMessage () and onMessage () functions I just wanted to know what information I have to pass, given the chart type.

Could someone give me an idea of the code I should use.

Thanks you in advance
Tomás Martins

2

Yes Wix won’t support html code that it hasn’t had the chance or time to test it fully on their own servers.
https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site

However, for your purposes you should have a look at the Wix API reference and the HTML Component and have a good read up about using the postMessage and onMessage functions, as it provides you with a fully coded example there too.

https://www.wix.com/corvid/reference/$w.HtmlComponent.html
https://www.wix.com/corvid/reference/$w.HtmlComponent.html#onMessage
https://www.wix.com/corvid/reference/$w.HtmlComponent.html#postMessage

Also, have a read here too as it shows you how to do it as well.
https://support.wix.com/en/article/corvid-working-with-the-html-element

Also, note that there is also an example for an html chart already as shown in the link below, which can be opened up in your own Wix Editor to show all the code needed etc.
https://www.wix.com/corvid/example/create-a-custom-chart