Real Software Forums

The forum for Real Studio and other Real Software products.
[ REAL Software Website | Board Index ]
It is currently Thu Oct 19, 2017 10:20 pm
xojo

All times are UTC - 5 hours




Post new topic Reply to topic  [ 23 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: Google Charts and Web Control SDK
PostPosted: Mon Dec 17, 2012 11:37 am 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
I've been using google charts in my web app

https://developers.google.com/chart/int ... docs/index
https://code.google.com/apis/ajax/playg ... lumn_chart

But I want to make them interactive. For example when the user clicks on a column or hovers over it I want the web app to be able to detect these events.

The documentation says I can do this:
Quote:
google.visualization.events.addListener(visualization, 'select', functionName);


But how do I make a the 'functionName' function send information back to real studio properly so I can handle the event.

I'm assuming this is where I need to use the Web Control SDK. Is that correct? And what do I need to do to go about implementing this?


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Mon Dec 17, 2012 12:36 pm 
Offline

Joined: Mon May 31, 2010 5:35 am
Posts: 2412
Location: Netherlands
There is a PDF that comes with the WebControlSDK.
It's in your application installation folder of Real Studio.

It tells you the Javascript functions you need to push information back to your server.

_________________
SWORT™
- Windows Vista, Windows XP, Windows 7, Linux Mint 11 and Mac OSX Lion
- REAL Studio Enterprise(latest) and WEB Edition(latest)
- Plugins (MBS Complete, ToringoLib, Einhugur, VanHoek + Some open source plugins)
For Dutch User Groups ask me to enter!


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 11:54 am 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
I'm having some trouble understanding and setting it up.

When displaying the graph in a webHTMLviewer it works fine, but it seems I need to breakup the code to get it to work with the WebControlSDK.

For example I need to use the SetupJavaScriptFramework method but I'm not sure how.

In the HTML viewer I would just load
Quote:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"/>
<title>
Google Visualization API Sample
</title>
<script type=\"text/javascript\" src=\"http://www.google.com/jsapi\"></script>
<script type=\"text/javascript\">
google.load(\'visualization\', \'1\', {packages: [\'corechart\']});
</script>
<script type=\"text/javascript\">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
[\'Year\', \'Austria\', \'Belgium\', \'Czech Republic\', \'Finland\', \'France\', \'Germany\'],
[\'2003\', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
[\'2004\', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
[\'2005\', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049],
[\'2006\', 1600652, 4604684, 940478, 1167979, 6190532, 18542843],
[\'2007\', 1968113, 4013653, 1037079, 1207029, 6420270, 19564053],
[\'2008\', 1901067, 6792087, 1037327, 1284795, 6240921, 19830493]
]);

// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById(\'visualization\')).
draw(data,
{title:\"Yearly Coffee Consumption by Country\",
width:600, height:400,
hAxis: {title: \"Year\"}}
);
}


google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style=\"font-family: Arial;border: 0 none;\">
<div id=\"visualization\" style=\"width: 600px; height: 400px;\"></div>
</body>
</html>
​)


But I'm not sure how to split this up into the SetupJavaScriptFramework function.

Also I don't think I can use all the html,body,head tags since this is just in a <div> now and not it's own page...


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 1:22 pm 
Offline
Real Software Engineer

Joined: Tue Jul 14, 2009 4:33 pm
Posts: 146
Location: Raleigh, NC
That is true. The WebSDK is not a "just copy and paste" kinda thing. Have you walked through the tutorial and looked at the example projects?

_________________
Greg O'Lone
Software Engineer
Real Software


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 1:45 pm 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
Stretch wrote:
That is true. The WebSDK is not a "just copy and paste" kinda thing. Have you walked through the tutorial and looked at the example projects?


Yes, I'm on my 4th read through of the documentation and I've looked over the example projects.


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 3:02 pm 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
Like I'm sure I need to use the LoadLibraries method, but I don't know where or when I'm suppose to use it or how to use it properly. It doesn't help the documentation is offline at the moment...


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 3:10 pm 
Offline
Real Software Engineer

Joined: Tue Jul 14, 2009 4:33 pm
Posts: 146
Location: Raleigh, NC
The documentation is included as a PDF in the Extras->WebSDK->Documentation folder.

_________________
Greg O'Lone
Software Engineer
Real Software


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 3:44 pm 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
Stretch wrote:
The documentation is included as a PDF in the Extras->WebSDK->Documentation folder.



I'm aware of this, I've read it several times. I was hoping the online documentation would add some more insight. Now that it's back online, it seems it does not.


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 4:00 pm 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
Essentially I need to convert the HTML above into the proper sections of the webControlWrapper

In the open event I'm assuming I need to Load the libraries and set up the call back.

I'm not sure which of these I should be using for the callback
LoadLibraries("RSCustom."+JavascriptNamespace+"."+self.ControlID+"_constructor()","http://www.google.com/jsapi")
LoadLibraries("google.setOnLoadCallback(drawVisualization);","http://www.google.com/jsapi")
LoadLibraries(someScript,"http://www.google.com/jsapi")

where someScript is some part of the HTML code I have from google.


I'm not sure what I'm suppose to put in the SetupJavascriptFramework, should I load libraries here instead? What part of the html do I need to put in here?


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Dec 19, 2012 10:13 pm 
Offline
Real Software Engineer

Joined: Tue Jul 14, 2009 4:33 pm
Posts: 146
Location: Raleigh, NC
SetupJavascriptFramework is where you would construct any javascript that would be specific to the particular instance of your control. For instance the _constructor you are referring to below:

dim js() as string
js.append "RSCustom."+JavascriptNamespace+"."+self.ControlID+"_constructor = function() {"
js.append " //This control's constructor code here"
js.append "}"

return join(js,endofline)

_________________
Greg O'Lone
Software Engineer
Real Software


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Thu Dec 20, 2012 10:25 am 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
Stretch wrote:
SetupJavascriptFramework is where you would construct any javascript that would be specific to the particular instance of your control. For instance the _constructor you are referring to below:

dim js() as string
js.append "RSCustom."+JavascriptNamespace+"."+self.ControlID+"_constructor = function() {"
js.append " //This control's constructor code here"
js.append "}"

return join(js,endofline)



That's where I put the
Quote:
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}


And in the open I use
Quote:
LoadLibraries("drawChart()","http://www.google.com/jsapi")



But I keep getting
Could not execute returned javascript&#058; google is not defined
Source: var langdir = document.getElementsByTagName('body')[0]; if(langdir) { langdir.removeAttribute('dir'); }
var langdir = document.getElementsByTagName('body')[0]; if(langdir) { langdir.setAttribute('lang','en-US,en;q=0.8'); }


I'm assuming this means the jsapi isn't getting loaded right but I'm not sure why...
I'm also using
Quote:
.ReplaceAll("chart_div",me.ControlID))

to get the proper element in there too.


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Thu Dec 20, 2012 2:03 pm 
Offline
Real Software Engineer

Joined: Tue Jul 14, 2009 4:33 pm
Posts: 146
Location: Raleigh, NC
I have a feeling that the problem is that the library hasn't been loaded by the time the google calls are made. The code you're returning in SetupJavascriptFramework I would wrap in a function call, which then calls drawChart.

Remember your code needs to be added to your declared namespace. That DrawChart function would need to be declared like:

RSCustom.example.google.drawChart = function() {

}

and your chart variable should be
RSCustom.example.google.chart = new google.visualization.....

otherwise they go out of scope immediately and won't be accessible to you.

_________________
Greg O'Lone
Software Engineer
Real Software


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Wed Jan 02, 2013 11:43 am 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
Stretch wrote:
I have a feeling that the problem is that the library hasn't been loaded by the time the google calls are made. The code you're returning in SetupJavascriptFramework I would wrap in a function call, which then calls drawChart.

Remember your code needs to be added to your declared namespace. That DrawChart function would need to be declared like:

RSCustom.example.google.drawChart = function() {

}

and your chart variable should be
RSCustom.example.google.chart = new google.visualization.....

otherwise they go out of scope immediately and won't be accessible to you.



Do all sub-functions need to be named like this then too? I tried changing it and it still doesn't work.

I'm attaching the file if anyone wants to see how far I am or try and help me figure it out. I suspect once I get one chart working I should easily be able to do all of the Google charts.
Project




function RSCustom.<<Namespace>>.<<ControlId>>_constructor()

{
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('<<ControlId>>'));
chart.draw(data, options);
}

}


This is what I have currently for the Framework but I'm getting an
"Could not execute returned javascript: Unexpected token ." error


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Sun Jan 06, 2013 9:25 pm 
Offline
Real Software Engineer

Joined: Tue Jul 14, 2009 4:33 pm
Posts: 146
Location: Raleigh, NC
Change the first line of this method declaration to:

RSCustom.<<Namespace>>.<<ControlId>>_constructor = function()


Remember you're attaching your code to your namespace.

_________________
Greg O'Lone
Software Engineer
Real Software


Top
 Profile  
Reply with quote  
 Post subject: Re: Google Charts and Web Control SDK
PostPosted: Thu Mar 07, 2013 4:38 pm 
Offline
User avatar

Joined: Mon Nov 29, 2010 7:01 pm
Posts: 446
Stretch wrote:
Change the first line of this method declaration to:

RSCustom.<<Namespace>>.<<ControlId>>_constructor = function()


Remember you're attaching your code to your namespace.



I changed that but it didn't seem to do the trick. Where do I need to call the constructor?

I'm thoroughly frustrated with trying to figure out the WebControlSDK and I'm about at my wits end.

I want to take a google chart. Information here:
https://developers.google.com/chart/interactive/docs/gallery/piechart
And turn it into a dynamic web control.

I don't know what libraries I need to load?

http://www.google.com/jsapi
https://www.google.com/uds/?file=visualization&amp;v=1.0&amp;packages=corechart
https://www.google.com/uds/api/visualization/1.0/38ac42a54ac1c4d5dedb5677b2e06487/format+en,default,corechart.I.js


Or what my call back function should be after I load the libraries.

Google seems to set its own onCallBack function:
google.setOnLoadCallback(drawVisualization);


I'm not sure if this is relevant to me or if it is just confusing me.

So lost... I know once I get the first chart working I'll be able to expand and add support for all the different charts.

Any help would be greatly appreciated. I have no problem opening up the charts for anyone to use too after I get them properly implemented.


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 23 posts ]  Go to page 1, 2  Next

All times are UTC - 5 hours


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group