Hello,
I am Trying to update/connect Google charts to the database which is linked to specific user privately. The Charts will Show The name of the labels and value associated with it in the form of a Donut Chart using post message function but The error is being generated that Data type is Invalid even though .
Also How to Progmically Add more columns as when User add one more column and associate a data to it ?
HTML Code:
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable("donutchart");
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('receivedData'));
chart.draw(data, options);
window.onmessage=function(event)
{
if(event.data )
{
let receivedData =event.data;
}
};
}
</script>
On Page Code :
//As an example to pass an Array
$w ( ‘#dataset1’ );
let year = 2021 ;
let flights ={
2019 : [ ‘Work’ ] [ 11 ],
2020 : [ ‘Sleep’ ] [ 11 ],
2021 : [ ‘dace’ ] [ 11 ],
}
$w . onReady ( function () {
$w ( “#html1” ). postMessage ( flights [ year ]);
});
Now problem :
Ensure Sent data is array
Ensure Data is connected to user only.
Ensure Multiple columns and data can be added to database so that user can add any more label and data as required.
Thank You
I was trying to pass the chart label and chart value to the html code . The html code is referenced from Google charts . I tried to replicate the [label],[value] part of the chart input.
@jonatandor35
I was trying to pass the chart label and chart value to the html code . The html code is referenced from Google charts . I tried to replicate the [label],[value] part of the chart input.
window.onmessage=function(event)
{
if(event.data )
{
let receivedData =event.data;
}
};
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable("receivedData");
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(receivedData, options);
}
</script>
@devsupport currently you’re sending the data from the page to the iframe but you’re doing nothing with the received data.
You probable need something like:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"></script>
google.charts.load("current", {packages:["corechart"]});
function drawChart(receivedData) {
var data = google.visualization.arrayToDataTable(receivedData);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(receivedData, options);
}
window.onmessage = function(event){
if(event.data ) {
let receivedData = event.data;
drawChart(receivedData)
}
};
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>