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.
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).
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.
@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):
Created a new blank page, and copied all code from the example.
Replaced the data query with two simple arrays for labels and the data.
Uninstalled chart.js from npm.
Removed the import Chart from ‘chart.js’ line
Added the cdn to the page header (again, a space between “. com” to bypass link policy, but there is no space in the implementation)
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]]]
});
@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.
@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.
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.
