using google interactive charts

Classic Servoy
1

I’m trying to use the interactive charts in my web-solution.
I’ve got a version working (with thanks to Marc Boegem), but that chart does not quite meet our requirements.
So i’ve contacted a google chart expert to give me a working html file that has the chart as I want it in my solution.

In the sample solution the button ‘old’ shows the working chart, the button ‘new’ is the new chart that I want to use.
I hope there is someone that can transform this to a working sample, or at least point me in the correct direction.

This is the new html code that I want to include:

<html>
			  <head>
			    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
			    <script type='text/javascript'>
					function drawChart() { 
					    var data = new google.visualization.DataTable();
					    data.addColumn('string', 'Name');
					    data.addColumn('number', 'Value');
					    data.addColumn({type: 'string', role: 'annotation'});
					    data.addColumn({type: 'string', role: 'style'});
					    
					    data.addRows([
					        ['D', 400, 'a%', 'color: #A81B36'],
					        ['Q', 300, 'b%', 'color: #FD9827'],
					        ['P', 400, 'c%', 'color: #0F7F11']
					    ]);
					    
					    // use a DataView to null out the values in the value and annotation columns to start,
					    // so the chart will animate properly when we redraw it
					    var view = new google.visualization.DataView(data);
					    view.setColumns([0, {
					        type: 'number',
					        calc: function () {return 0;}
					    }, {
					        type: 'string',
					        role: 'annotation',
					        calc: function () {return '';}
					    }, 3]);
					    
					    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
					    var option = {
					        title: 'Here is Title',
					        height: 400,
					        width: 600,
					        animation: {
					            duration: 1000,
					            easing: 'out'
					        },
					        tooltip: {
					            isHtml: true
					        },
					        legend: 'none',
					        hAxis: {
					            title: 'Cups'
					        },
					        vAxis: {
					            title: 'Year',
					            minValue: 0,
					            maxValue: 500
					        }
					    };
					    
					    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
					        google.visualization.events.removeListener(runOnce);
					        chart.draw(data, option);
					    });
					    
					    chart.draw(view, option);
					}
					google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
				</script>
			  </head>
			  <body>
			    <div id='chart'></div>
			  </body>
			</html>

GoogleChart.servoy (5.69 KB)

2

Hi Jos,

I can not make your sample work. I noticed you are using WebUtils and installed but nothing happens with Old button. Maybe something else is missing.

Regards,

3

The problem is likely in this chain of events:

var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
                       google.visualization.events.removeListener(runOnce);
                       chart.draw(data, option);
                   });
                   
                   chart.draw(view, option);
               }
               google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

The order of events is:

  1. google.load(…)
  2. chart.draw(…)
  3. …addListener(chart, ‘ready’, …)

Debugging steps:

1- Verify the code works as is by opening it in your browser. It should, it has sample data in it. Check the console for errors (loading all google resources correctly?).
2- Put code in a Servoy html area. Load Servoy page. Check the console for errors (loading all google resources correctly?).
3- Trigger function drawChart() with webclient utils. Do this manually with a method attached to a button, not on the form onShow() event.
4- Get to this point and chart doesn’t load and you have no console errors, your issue is with the client-side event chaining. Add some console.log(…) statements in the chain and see where it fails. Sometimes inside of an html area client-side events can get a little messed up. We solve these typically with a few strategically placed setTimeout() function wrappers.

Lastly, once you get it all working then all you have to do is replace out the sample data in the markup with real data.

If you’re still stuck, you know where to find us :)