Page 1 of 1

Interactive google charts

PostPosted: Fri Apr 25, 2014 2:58 pm
by Peter de Groot
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

Re: Interactive google charts

PostPosted: Fri Apr 25, 2014 5:51 pm
by david
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):

Code: Select all
document.getElementById("chart_div")).draw(data, options);

Re: Interactive google charts

PostPosted: Tue Apr 29, 2014 7:50 am
by Peter de Groot
David thanks for the info.

regards,
Peter

Re: Interactive google charts

PostPosted: Mon May 05, 2014 1:14 pm
by Peter de Groot
Hi David,

when I run the code below I get the following message
Code: Select all
document.getElementById("chart_div").draw(data, options);


not_a_function.png
not_a_function.png (5.97 KiB) Viewed 5654 times


I pass this
function.png
function.png (4.32 KiB) Viewed 5654 times


Any advise on this.

Regards,

Peter

Re: Interactive google charts

PostPosted: Mon May 05, 2014 6:44 pm
by david
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:

Code: Select all
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.