Passing data from WIX code to ChartJS radar chart (WIX -> HTML) - What am I missing?

Ask the community
, ,
1

Building a radar chart using Chartjs. The format in which I am passing data from WIX to CharJS seems to be not compatible. Has anyone used radar charts from WIX and if so, what is the right data format to pass from WIX code to ChartJS HTML? Here is mine… oh, and all the commented lines are the different formats that I tried, none of which are working… :frowning:

	chartMsg = {
		labels: ['CM', 'CL', 'LD', 'VU', 'OG', 'WL'],
		datasets: [
			{
			label: "Initial",
			backgroundColor: "#FFF17644",
			borderColor: "black",
			borderWidth: 1,
			data: [3, 5, 4, 2, 1, 7]
			},
			{
			label: "Current",
			backgroundColor: "#8E24AA44",
			borderColor: "black",
			borderWidth: 1,
			data: [6, 5, 5, 4, 3, 7]
			}
		]
		};
	//chartMsg=[{labels: ['CM', 'CL', 'LD', 'VU', 'OG', 'WL'],datasets:[{Initial:[3, 5, 4, 2, 1, 7],Current:[6,5,5,4,3,7]}]}]
	//chartMsg=[{labels: ['CM', 'CL', 'LD', 'VU', 'OG', 'WL'],Initial:[3, 5, 4, 2, 1, 7],Current:[6,5,5,4,3,7]}]
	//chartMsg=[{Initial:3,Current:6},{Initial:5,Current:5},{Initial:4,Current:5},{Initial:2,Current:3},{Initial:1,Current:3},{Initial:7,Current:7}]
	//chartMsg={Initial:[3, 5, 4, 2, 1, 7],Current:[6,5,5,4,3,7]}
	//chartMsg={datasets: [{data: [3, 5, 4, 2, 1, 7]},{data: [6,5,5,4,3,7]}]}

HTML part:
var ctx = document.getElementById(“myChart”);

var myChart = new Chart(ctx, {
type: ‘radar’,
data: {
labels: [‘CM’, ‘CL’, ‘LD’, ‘VU’, ‘OG’, ‘WL’],
datasets: [
{
label: “Initial”,
backgroundColor: “#FFF17644”,
borderColor: “black”,
borderWidth: 1,
data:
},
{
label: “Current”,
backgroundColor: “#8E24AA44”,
borderColor: “black”,
borderWidth: 1,
data:
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
//onClick: handleClick
}
});

window.onmessage = function(event){
console.log(“HTML 47 Chart Data=”,myChart.data,“\n Event Data=”,event.data," Comparison=“,myChart.data===event.data)
if (event.data) {
myChart.data = event.data;
//myChart.data.datasets[0].data = event.data;
myChart.update();
console.log(“HTML 51 data=”,event.data,” Check=“,Array.isArray(event.data),” Chart Dataset[0]=",myChart.data.datasets[0].data)
}
else {
console.log(“HTML Code Element received a generic message:”);
console.log(“HTML 54 data=”,event.data,“Check=”,Array.isArray(event.data));
}
};

function ready(){
window.parent.postMessage({“type”:“ready”}, “*”);
}

2

Hello, anybody here with a similar problem?

3

Hi there! @giri-zano, @yisrael-wix would you have some pointers for me? Struggling to recognize the second data values… seems to be a simple formatting issue, but can’t resolve it…

for example, rainfall over two years per month, so Jan will have two values, year 1 and year 2. I can get html part to read one set of data (year 1), but not both (year 1 AND year 2).

I can see that I lose the data structure when I assign the received data and would appreciate if there is an example for passing data to the ChartJS radar chart from WIX Velo/ javascript…

image
image1318×408 33.9 KB