Interactive google charts

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

Interactive google charts

Postby Peter de Groot » Fri Apr 25, 2014 2:58 pm

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
User avatar
Peter de Groot
 
Posts: 215
Joined: Thu Jan 10, 2008 8:38 pm
Location: Not sure...

Re: Interactive google charts

Postby david » Fri Apr 25, 2014 5:51 pm

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);
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.

Re: Interactive google charts

Postby Peter de Groot » Tue Apr 29, 2014 7:50 am

David thanks for the info.

regards,
Peter
User avatar
Peter de Groot
 
Posts: 215
Joined: Thu Jan 10, 2008 8:38 pm
Location: Not sure...

Re: Interactive google charts

Postby Peter de Groot » Mon May 05, 2014 1:14 pm

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 5658 times


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


Any advise on this.

Regards,

Peter
User avatar
Peter de Groot
 
Posts: 215
Joined: Thu Jan 10, 2008 8:38 pm
Location: Not sure...

Re: Interactive google charts

Postby david » Mon May 05, 2014 6:44 pm

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.
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.


Return to Web Development

Who is online

Users browsing this forum: No registered users and 1 guest