Forum Academy Marketplace Showcase Pricing Features

Google Charts example (single and multiseries)

Hello
I have found that many people got problem with structuring data to use inside html element with Google Charts.
I did some small js improvements to simply put format data to arrays needed by Charts.
Simply put your list of values inside x or y variable.
Note this way you can make also multi series charts just add y2,y3 labels and variables to results.push([…

Preview
Editor

Multi-series charts:
You need to prepare your datapoints within the same X axis context. (watch app example datapoint thing’s structure)
This code inside html element is the key to customization for multiseries:

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

Remember you need to add script to header in your page settings to be able to render charts:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

I believe for those of You who aren’t familiar with js it might look a bit messy so as soon as plugin’s elements will be ready to public and I will find enough time to finish this I will release this as a free plugin.

Regards

12 Likes

Nice
Would be great to publish this as a plugin when plugin elements will be released !

1 Like

You’re awesome. Thank you so much for this

Excellent, thanks @wojciech

Any example of multi series? I tried it out and could still only get one line charts. Am I missing something?

I made an update to main app with working multiseries dataset.

1 Like

Oh I like this a lot. Are you developing a plugin for this?

Yes I will release free plugin when it will be ready.

7 Likes

Looking forward to it!

Hi @wojciech Did you made the plugin finnally?You would be a life saver!
I’m trying to take my data within bubble database and use some external way to plot it(google chart).
But I don’t know at all how to do it …even where to start with…

Hi I made a custom plugin with google charts and moved forward to different things.
Sorry I completly forgot to prepare public version, thx for asking. I’ll try to do that next week :wink:

4 Likes

That would be awesome man.

We´re looking for something to have a usable charts over here where you can group things like show a monthly income, …

Thanks mate.

That would be amazing ! Thank you !

I don’t see a chart in the preview?

Yes I guess somebody played with the forum code and now the chart is not displaying anymore ( I tried to fix it quickly but didn’t succeed) but you can take any of the html code here : https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
and copy paste it in a html blocks in bubble.
You will see the chart working

"Remember you need to add script to header in your page settings to be able to render charts:

Thanks … just found that in my morning search.

@wojciech were you able to prepare a public plugin? I’d love to get this running on my app!

Great job man.I appreciate it.

@wojciech, this is the plugin that Bubble needs.