HTML Element Not Responding for chart.js

Context :
I’m trying to implement chart.js on my site as described in this wix article: wix. com/velo/example/create-a-custom-chart

My Site and page for reference :
antaresanalytics. net/game-releases-over-time

Problem :
The HTML Element is not responding when site loads, and data is not passed into the chart.

    // Post data to HTML Element
    myChart.postMessage(dataset);
    myChart.onMessage((event)=>{
        console.log("Receieved ready message from html");
        if(event.data.type === 'ready'){
            myChart.postMessage(dataset);
        }
    }); 

What I’ve Tried:
Every solution I’ve come across says to “wake the html up” with a postMessage(“anything”). As you can see above, I’m passing the dataset to the html, but I’ve also tried a simple string like myChart.postMessage(“wake up!”). This does nothing for me.

HTML Code for Reference:
The HTML element onmessage looks like this:

window.onmessage = function(event){
    if (event.data && Array.isArray(event.data)) {
      myChart.data.datasets[0].data = event.data[1];
	myChart.data.labels = event.data[0];
      myChart.update();
    }
    else {
      console.log("HTML Code Element received a generic message:");
      console.log(event.data);
    }
  };

HTML body onLoad event:

<body onLoad="ready()">
<script>
  // lots of other code here...
  function ready(){
    window.parent.postMessage({"type":"ready"}, "https://www.antaresanalytics. net/game-releases-over-time"); // passing in "*" yields the same results
  }
</script>

Other Information:

  • The chart works in the editor.

  • The chart does NOT work when accessing the page with the URL directly.

  • The chart DOES work when accessing the page from a link.

Thanks in advance!

Hi Brent,
It looks like there may be an issue with the latest version of ChartJS, and the recommendation is to use an older version.

This post might provide some pointers for you: https://www.wix.com/velo/forum/coding-with-velo/chart-js-killing-me-softly

Hi Marlowe,

Many thanks for the quick reply. Even with an older version (2.4.0 or 2.9.3), it’s not working. I’m referencing the cdn within the HTML element as follows (I’m not using npm to import anything from chart.js): (I put a space in the cdn below to bypass velo’s url link policy).

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare. com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
</head>

In your solution you referenced, you mentioned you were able to get it to work by using an older version. Do you remember which specific version that was?

Keep in mind, the chart is working for me in the editor - just not on the published site. Thanks again.

@antaresanalyticsllc One of our developer advocates was assisting other users in that thread. I’ll ask her about it when she’s back in the office on Monday.

But hopefully someone from the community will be able to assist in the meantime.

The example referred to in the other thread is this one, using a Custom Element and the ChartJS NPM module: https://www.wix.com/velo/example/chart.js-custom-element

I hear you should be able to get it working with any version of Chart.js prior to the December release.

@marlowe-shaeffer Thank you Marlowe. I will attempt to refactor my code to the above example. I’ll update this thread with my results.

@marlowe-shaeffer Unfortunately, it seems I’m stuck with this method as well. I did the following, but the chart is not loading at all (in the editor nor in the published site):

  1. Created a new blank page, and copied all code from the example.
  2. Replaced the data query with two simple arrays for labels and the data.
  3. Uninstalled chart.js from npm.
  4. Removed the import Chart from ‘chart.js’ line

  1. Added the cdn to the page header (again, a space between “. com” to bypass link policy, but there is no space in the implementation)
<script src="https://cdnjs.cloudflare. com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare. com/ajax/libs/Chart.js/2.9.4/Chart.min.css" media="all">

In the published version, I’m receiving the following error:

Here is what the custom element looks like in the editor:

Thanks again for all your help. I’ll be waiting for your reply or the other developers reply on Monday when they are back.

Regarding the iframe option.
I’m not sure that the iframe always gets loaded after the parent onMessgae event listener has been set. If it sets before, it will send the message bot nothing will received it on the main page.
I’d try to make sure both components are ready.
Something like:

$w.onReady(() => {
//For case where the iframe gets ready after the main page's event listener:
   myChart.onMessage((event) => {
        if(event.data.type === 'ready'){
           iframmeReadyMsg =true;
            $w('#htmlChart').postMessage(dataset);
        }
//for case where the iframe got ready before the main page's event listener
     myChart.postMessage(dataset);
})

Hi J.D., thank you for the suggestion. Unfortunately, I’m still getting the same behavior (loads successfully in editor but not on published site). Here is my updated code with your suggestion. The only difference being that mine is running asynchronously.

$w.onReady(async function () {

    // Get data from collection
    let dataset = await fetchData(platform, tag); // platform and tag are set globally

    // Listen for HTML Element if it wakes up after
    myChart.onMessage((event)=>{
        console.log("Receieved ready message from html");
        if(event.data.type === 'ready'){
            myChart.postMessage(dataset);
        }
    }); 
    // Post data to HTML Element if wakes up before
    myChart.postMessage(dataset); // Dataset is an array of arrays [[x, data]], [y, data]]]
});

@antaresanalyticsllc how do you now it doesn’t work? Did you put console. Log’s in the iframe to locate the problem?

@jonatandor35 In my example, the console.log(“Received message from html”) message is not showing in the console. Also, the data I’m passing to the chart is not being populated in the chart.

If you are referring to putting an additional console.log directly within the html element, I think I read somewhere that console.log will not write anything if it’s inside an html element (due to technical limitations with wix or something). I’ve tested this as well and it seems true.

Just a long shot: are you by any chance using Opera?

@giri-zano that’s a good thought, but no. I’m using Firefox and Chrome (both same results).

However, I’m redoing everything line by line from the first example (https://www.wix. com/velo/example/create-a-custom-chart), iterating my custom code into it until I get to the issue. So far it seems to work but I will update when I’m finished.

@antaresanalyticsllc If you press crtl-i (Windows) on the frontend, do you see anything revealing in the Console, like an error message?

Okay everyone, I found out the issue! It doesn’t work when I assign the html element to a variable.

I was able to get it to work when I directly reference the html element like $w(‘html1’). So basically I changed this:

    myChart.postMessage(dataset);
    myChart.onMessage((event)=>{
        if(event.data.type === 'ready'){
            myChart.postMessage(dataset);
        }
    });

to this:

    $w('#html1').postMessage(dataset);
    $w('#html1').onMessage((event)=>{
        if(event.data.type === 'ready'){
            $w('#html1').postMessage(dataset);
        }
    });

In hindsight this makes sense because the elements load in at different times (as mentioned earlier in this thread). If I assign the html element to a variable and the main page loads before the html element, the variable is essentially null.

Thanks everyone for you help.

Hurray!

Great news! Thanks for letting us know.

The example is not working for me, I can’t even open it in the Editor. https://www.wix.com/velo/example/create-a-custom-chart

Thanks for letting us know. We’ll look into the issue.

@marlowe-shaeffer No worries, so far I managed to get a working example using the context of this post and by inspecting the custom html element in the published example at https://www.wix.com/code-examples/v2-embed-chart