How to connect Google Charts to User database?

Ask the community
,
1

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 :

  1. Ensure Sent data is array

  2. Ensure Data is connected to user only.

  3. Ensure Multiple columns and data can be added to database so that user can add any more label and data as required.
    Thank You

2

This part is not clear to me:

let flights={
 2019: ['Work' ] [11],
 2020: ['Sleep' ] [11],
 2021: ['dace' ] [11],
}

It’s a strange syntax, can you explain what you’re trying to here?

Also in your html code is not clear. I do nothing with the received data.

3

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.

Google donut chart api reference: https://developers.google.com/chart/interactive/docs/gallery/piechart

Wix chart integration reference :
https://www.wix.com/velo/example/create-a-custom-chart

4

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

Google donut chart api reference: https://developers.google.com/chart/interactive/docs/gallery/piechart

Wix chart integration reference :
https://www.wix.com/velo/example/create-a-custom-chart

5

@devsupport but instead of (for example)

['Work', 11],

You wrote:

['Work' ] [11]

which is wrong.

Also you haven’t followed the Google documentation.
For example, you need to have such lines :

 let receivedData = event.data;
chart.draw(receivedData, options);
6

@jonatandor35
I have Updated The HTML :

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>

And Home Page Code :

let flights =([
[ ‘Task’ , ‘Hours per Day’ ],
[ ‘Work’ , 11 ],
[ ‘Eat’ , 2 ],
[ ‘Commute’ , 2 ],
[ ‘Watch TV’ , 2 ],
[ ‘Sleep’ , 7 ]
]);
$w . onReady ( function () {
$w ( “#html1” ). postMessage ( flights );
});

But The Chart is not Building and The debug Console is not Returning any Error .
Also Thanks for Pointing out The MAJOR error :slight_smile:

7

Debug INFORMATION RETURNING :
Loading the code for the Home page. To debug this code, open c1dmp.js in Developer Tools.

8

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

@jonatandor35

995×388 8.46 KB

Now it returns The Html codes instead of the chart . Any Solution ?

10

You have resolve this ? I have the same problem…

11

I have not yet fully resolved it but have Achieved some results while implementing .