@WiX - a Friendly mail…,
It appears that charts.js did an update, this chart example on the WiX code Examples page is not working anymore: https://www.wix.com/code/home/example/Chart
Hey Tiaan,
So we meet again 
It seems that the API spec of the HtmlComponent was changed. Seems that you need to pass a string. This is what I did to get the Charts example working:
-
Change the parameter being passed in the page’s postMessage from
flights[year]toflights[year].join(). -
In the HtmlComponent I added
var fields = input.split(',');to split the passed string into an array.
Let me know if this helps. We can then have a beer together.
Yisrael
Hi Yisrael
Ahh great, I should’ve known you would figure it out… I don’t have a need for it at this moment, just thought I’d let the guys know.
If you’re ever in South Africa, the beer is on me!
Best,
Tiaan
Thanks for reporting this. I’ll rattle someone’s cage about this again.
Hi Yisrael
So as you would have it, I need this today, lol…
I’ve given the html code a go, but I can’t get it to work, being the html novice that I am… I’ve tried placing var fields = input.split(','); just about anywhere that I could think of, but no luck…
Could you possibly point me in the right direction?
Thank you
Tiaan
Hey Tiaan,
Of course you need it now 
What I did to get it working was I converted a Javascript object to string form by using .join() . I then passed this string to the HtmlComponent . The onMessage() function in the HtmlComponent then gets the string and splits the string apart back into fields using .split() .
This will hopefully be fixed soon.
I hope this helps,
Yisrael
Hi Yisrael
Thanks for the quick response! Like this…?
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data.split(',');
myChart.update();
}
Got it!
window.onmessage = function(event){
if (event.data.split(',') && Array.isArray(event.data.split(','))){
myChart.data.datasets[0].data = event.data.split(',');
myChart.update();
}
Hi Tiaan,
Great. I was going to suggest something like this:
window.onmessage = function(event){
let input = event.data; // get data string
var fields = input.split(','); // split first
if (fields && Array.isArray(fields)) { // then check
myChart.data.datasets[0].data = fields;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
Splitting first means that there is no need to split it two times. But it’s really no big deal.
Glad you were able to work it out.
Yisrael
Hi Yisrael
Now I understand what you meant! Thank you for the clarification.
Have a great day!
Tiaan
Hey Guys! I don’T know if this topic is still active but there’s not a lot about chart.js in the forum.
I’m trying to pass an array of numbers (actually an array of arrays) to the chart but I haven’t been able to do it. I grab the data from a collection and organise it but when I send it to the object it just doesn’t read anything. However, if I filter the information rather than send an array, then it does print. Can you guys give me a hand? @J. D. Maybe you wanna join to save, as usual?
Here’s the code for getting the data to pass to the chart.
import wixData from “wix-data”;
// Create a function to define the type and filter
// When no condition is passed then it returns the complete dataset
$w.onReady(() =>{
filterByType(‘Ambassador’) // condition to filter one type
});
function filterByType(title){ // Calls the function and runs a query to the dataset
wixData.query(‘performance’)
.eq(“title”, title) // Searches on the property #title with the matching string
.find()
.then((results) => {
console.log(results);
let reach = new Array() // Creates two new arrays to pass the data recovered for Reach & Posts
let posts = new Array()
for (let i = 0; i < results.length; i++){ // Here we run a loop to find all the fields
reach[i] = results.items[i].reach; // Adds data to the new array reach
posts[i] = results.items[i].posts; // Adds data to the new array posts
}
let data = [[reach], [posts]]; // Creates an array of arrays with the two created before
console.log(data);
$w(“#html1”).postMessage(data); // Sends the information to the Chart.js HTML component
$w(“#html1”).onMessage((event)=>{
if(event.data.type === ‘ready’){
$w(“#html1”).postMessage(data);
}
})
})
}
@andres how do you know it doesn’t post it to the htmlCompnent? Maybe is posts it but you just don’t handle it right in the htmlComponent code.
@jonatandor35 hey JD! It actually posts when I select one filtered option but then it treats all options as the same. So it is passing data but just in a weird way
@andres I don’t think I can understand the situation from your description. It is not clear enough.
@jonatandor35 I will try to put together a comprehensive explanation with images and code for you 
in the mean time… I just made it work! It seems every time you pop up, it brings the luck ahahah. Thanks JD.
You think I should do a complete post explaining how to do this?
Here’s the code:
import wixData from “wix-data”;
// Create a function to define the type and filter
// When no condition is passed then it returns the complete dataset
$w.onReady(() =>{
filterByType(“Ambassador”) // condition to filter one type
});
function filterByType(typeOf){ // Calls the function and runs a query to the dataset
wixData.query(‘performance’)
.eq(“typeOf”, typeOf) // Searches on the property #title with the matching string
.find()
.then((results) => {
console.log(results);
let totals = new Array() // Creates two new arrays to pass the data recovered for Reach & Posts
let label = new Array()
for (let i = 0; i < results.length; i++){ // Here we run a loop to find all the fields
totals[i] = parseFloat(results.items[i].totals); // Adds data to the new array reach
label[i] = results.items[i].title; // Adds data to the new array posts
}
let data = [[totals], [label], [“Anual Average”]]; // Creates an array of arrays with the two created before
$w(“#html1”).postMessage(data); // Sends the information to the Chart.js HTML component
console.log(data);
$w(“#html1”).onMessage((event) => {
if(event.data.type === ‘ready’){
$w(“#html1”).postMessage(data);
}
if (event.data.type === “click”) {
$w(“#html1”).text = "The average " + event.data.label + "and " + event.data.value;
$w(‘#html1’).show();
}
});
})
.catch((err) => {
let errorMsg = err;
});
}