Charts.js Update

Discussion Ask a question
,
1

@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

2

Hey Tiaan,

So we meet again :smiling_face:

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] to flights[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

3

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

1 Like
4

Thanks for reporting this. I’ll rattle someone’s cage about this again.

:beers:

1 Like
5

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

6

Hey Tiaan,

Of course you need it now :upside_down_face:

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

7

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();
    }
8

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();
    }
1 Like
9

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

10

Hi Yisrael

Now I understand what you meant! Thank you for the clarification.

Have a great day!
Tiaan

11

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);
}
})
})

}

12

@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.

13

@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

14

@andres I don’t think I can understand the situation from your description. It is not clear enough.

15

@jonatandor35 I will try to put together a comprehensive explanation with images and code for you :slight_smile:

16

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;
});

}