Forum Academy Marketplace Showcase Pricing Features

Google Charts in Bubble

Hi All,

I’m trying to take my data that is within the bubble database and use some external way to plot it. I’ve played around with plot.ly but I can’t seem to find a way to use the data within bubble. So I moved onto google charts and was able to find this for a bargraph

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Am I able to use dynamic data here, ie replace this close with a |search for|?

var data = google.visualization.arrayToDataTable([
[‘Age’, ‘Weight’],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);

Thanks
Ali

1 Like

who put my code this? :stuck_out_tongue_winking_eye:

Yes, but it can get messy, because the dynamic value becomes part of the script, so you need to get the syntax right.

Try it with console.log to see what is going on.

I’m interested in using Google Charts also with dynamic data from the Bubble DB, especially for multiple series on one line chart. Seems like the trick is getting the Bubble data into the google.visualization.DataTable JavaScript class. Otherwise it looks like the rest of the chart options can be changed dynamically pretty easily using dynamic data in an HTML element. Can Blockspring be used to do this?

It sounds like from this forum that the Chart plugin will only be updated with a sponsorship.

It looks like blockspring might work. I’m getting the kind of format I want but i hit a wall when I go to insert the chart… will do more digging

Was the basic functionality a success via an html embed?

This is useful for checking out the html, CSS, and JS while viewing a live preview (click the “edit on codepen” for a fullscreen view):
http://codepen.io/ejsado/pen/HLgzK

Not sure if it might be helpful for you but I am preparing data for google charts from external database server with node.js and returning them via API so it was rather easy to create whatever format I need. One of the methods might be to use serverless function services like Amazon Lambda or Azure Functions ( As i remember Azure has first 1 milion runs free per month), I should point that those services got some long cold start time for high dependency functions. This way you will have to call function via api connector sending data to transform and return response within html element.
BUT
If you use data straight from Bubble’s database it might be easier to return data inside js variable/object or whatever it is in html element and transform this to an array.

P.S. If you get chart rendering problems you should try to add loader.js inside page’s header not inside html element.

I’m a tad confused. I think I understand the AWS Lambda and Azure; basically i’ll update their dB or send the data have it run some code that generates the graph and then shoot back the html…

What I didn’t understand is how you’re using node.js and also your comment about " return data inside js variable/object or…" that seems to be eactly what i’m looking for except ‘data’ things in bubble show up as an array and I have to construct two of them into a matrix…

Still confused. :slight_smile:

Where does the js go in bubble… I think i only found the html enbed

Well you need to take a look on basics of javascript a bit to understand it better.
Things like Lambda are services to run your own backend javascript in a serverless model.
You don’t need their DB at all. It is close to something like blockspring but you can write your own script so you can call it for example as an external API. Let’s say node.js is dedicated server so just leave this, it was only a case scenario example.

For second option with Bubble’s datasources I did an example:
My charts example app
Watch this example very carefully because I don’t have much time to write long explanation but it has everything what is needed to run Google Charts and I believe this is the only one fully working example on the forum right now :wink:
I did data formating with:

   var results = [];
	   var x = [LIST OF THINGS'S X SORTED by X];
	   var y = [LIST OF THINGS'S Y SORTED by X];
		results.push(['THINGS's LabelX', ' THING'S LabelY']);
		for (i = 0; i < x.length; i++) {
			results.push([parseInt(x[i]),parseInt(y[i])]);
		}
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(results);

It assumes you have got DataSet with the list of DataPoints where single DataPoint has X and Y properties. More inside an example app.

1 Like

Hi @wojciech @aliandrihab
I have plot a google chart pie but I don’t know how to use it with my bubble data… Do you have an explanation or an editor where I could understand it better?

thank you in advance for yourhelp :slight_smile:

1 Like