Interactive google charts

Classic Servoy
1

Hello all,

using the example code from juan cristobo https://www.servoy.com/forum/viewtopic.php?f=15&t=19995
the chart renders nicely in the webclient but only once…
When I run the code a second time the chart is not rendered, then when I click the refresh button in the browser the chart gets rendered? Does anyone has an idea how the fix?

We use servoy 7.3.1

Regards,
Peter

2

The function that loads up the chart is only triggered onLoad event of the page. For subsequent rendering, all you need to do is call the following (with different data and options if you want) on the client (so fire with webclient utils):

document.getElementById("chart_div")).draw(data, options);
3

David thanks for the info.

regards,
Peter

4

Hi David,

when I run the code below I get the following message

document.getElementById("chart_div").draw(data, options);

[attachment=1]not_a_function.png[/attachment]

I pass this
[attachment=0]function.png[/attachment]

Any advise on this.

Regards,

Peter

function.png

not_a_function.png

5

Checked the api and a few more steps involved. Simplest way to see what is happening: if you have a div on your page with an id of “chart_div” and google charts is loaded up already ( google.load(“visualization”, “1.0”, {“packages”:[“corechart”]}); ), you can run the following lines of code in the browser console and it will work:

var chart = new google.visualization.PieChart(document.getElementById("chart_div"));
var data = new google.visualization.arrayToDataTable([["Label","Value"],["hours",44]]);
chart.draw(data, {"min":0,"max":180,"width":200,"height":200});

See: https://code.google.com/apis/ajax/playg … #pie_chart. Note that you can’t send json data directly into the draw() function, you have to convert with arrayToDataTable() first.

The rest is just how to organize the client-side code, load up required resources, trigger on what events, and how to wire up with Servoy. A lot of flexibility and variations possible here. If you’re doing a lot of google charts, you can get your code to the point where you just pass in data, options, chart type – and you’re done. Can even drive it all from a UI at runtime.

Sorry this isn’t a step-by-step answer – a number of moving parts that you have to hack into Servoy’s way of doing things so not just a simple “do this and then do that”. A number of us around the forum who are capable of helping you out directly if you need.