Is Google Charts setOnLoadCallback supported?

[ToddMinear]

Hello,

Thanks for Smashing!

I've researched/read/googled and can't find a solution - I'm hoping someone can give me a hint or point me in the right direction.

I'm using Google Charts in a bar widget. Half the time it works just fine, the other half of the time the widgets show with no data.

I'm pretty sure it's because I don't have the google.charts.setOnLoadCallback correct.

I have:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {packages:['corechart']});
</script>

And Google Charts documentation says I should use:

<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);
</script>

Of course drawChart is undefined. I've tried to create my own drawChart() but I can't figure out what functions to call.

Here's a screenshot of the errors I'm seeing:

Thanks in advance for any help!

[kinow]

HI @ToddMinear ,

I believe you have to write that function as in this example:

https://developers.google.com/chart/interactive/docs/drawing_charts

Unfortunately I don't have a lot of experience with Google Charts, but that doesn't look like an issue in the Smashing side, so I guess there isn't much else that we could do to help you

[ToddMinear]

Thanks @kinow !

I've used Smashing for years but I've never had to dig this deep into widgets. I did thoroughly read those docs, but with Smashing I don't quite get how to go from the erb file (where I load the google charts), to the coffee file (which I see has the call to google.visualization.Barchart in it).

I've tried things like this (but I feel like I'm grasping at straws and guessing at function calls):

<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() {
        GoogleBar();
        GooglePie();
  }
</script>

I see there are a few widgets on the Additional Widgets page that use Google Charts (they use the old API) by @machadolab and by @lizer. If I get this solved I'll post my solution.

[kinow]

I see there are a few widgets on the Additional Widgets page that use Google Charts (they use the old API) by @machadolab and by @lizer. If I get this solved I'll post my solution.

Thanks! I'm a bit pressed for time at the moment, but if you have a public Git repo with your dashboard I can try to take a look later (can't promise though, sorry).

But I believe you are going in the right direction, look at the other widgets, at the JS library doc, and try to come up with another widget (or update an outdated widget 🙂 )

I don't quite get how to go from the erb file (where I load the google charts), to the coffee file (which I see has the call to google.visualization.Barchart in it).

Right, the .erb as you mentioned is just the dashboard file. In it you have the gridster HTML, with a list of widgets. Each of the li entries you see in your gridster grid HTML are instances of widgets.

The widgest are linked by the "data-view". That attribute (like data-view="Number") instructs the dashboard to create an instance of the /widgets/number/ widget, and pass it the other attributes your have used in the erb when instantiating the widget (like data-title).

The widget's main entry point is the number.coffee CoffeeScript file. There it extends a Smashing object, overriding some functions/attributes, mainly to create the instance of the widget and retrieve data from somewhere. The most important job of the CoffeeScript script is to somehow react on new data available for the widget.

And the data is made available from jobs. The job will emit an event (with send_event('valuation', data)) containing an id like valuation. Your dashboard (configured in the .erb file) will have the data-id=valuation to indicate to Smashing that that <li data-id="valuation" data-view="Number" ...> instance is reacting to the event "valuation" and passing that to the "onData" of the Number widget.

Now it's up to you to have a CoffeeScript, html scss, or other JS/etc files in a widget, have GoogleCharts loaded & configured when the widget is instantiated (or globally if needed! sometimes you have to add global JS and load in your erb), and finally have the widget ready to react when data is made available and to probably tell the GoogleCharts JS object about new data.

Hope that helps 👋