Google Charts and Web Control SDK

neonash7777 · **Joined:** Mon Nov 29, 2010 7:01 pm **Posts:** 446

So I'm slowly but surely closer to getting this to work.

The page loads.
The CustomControl Opens and loads the library:

Quote:

http://www.google.com/jsapi

The callback is:

Quote:

RSCustom."+JavascriptNamespace+"."+self.ControlID+"_constructor();

I set up the callback event in the setupjavascriptframework() event
and it executes.

As soon as it hits the line:

Quote:

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

The page blanks out to all white.

I did some research and found out this is due to the fact that google.load is adding the script to the page using a document.write()

Apparently I can fix this by

Quote:

the simplest would be to move the google.load(...); call(s) outside of the functions so that it's called - and the libraries are loaded - as the page loads.

How would I accomplish this?
The LoadLibraries event only allows me to specify a URL and not a script. Is there a way to trick it?

Stretch · **Posted:** Fri Mar 08, 2013 5:13 pm

The problem with doing that is using document.write is typically no good to you after the initial page has already been rendered (as it is in this case), so using this technique is not going to work. It's more likely that your problem stems from the fact that your code (or their code) assumes that it has access to the global namespace, which it does not. The whole reason we have you set up a namespace is so you have a place to store your variables, which is completely separate from any other controls on the page, and therefore don't conflict with one another. Any properties that are being defined like this:

var myVariable = "whatEverGoesHere";

that you wish to have persist beyond the scope of the initialization code MUST be added to your namespace instead:

RSCustom.example.myVariable = "whatEverGoesHere";

I suspect this is where your (or Google's) problem lies.

neonash7777 · **Joined:** Mon Nov 29, 2010 7:01 pm **Posts:** 446

Stretch wrote:

The problem with doing that is using document.write is typically no good to you after the initial page has already been rendered (as it is in this case), so using this technique is not going to work. It's more likely that your problem stems from the fact that your code (or their code) assumes that it has access to the global namespace, which it does not. The whole reason we have you set up a namespace is so you have a place to store your variables, which is completely separate from any other controls on the page, and therefore don't conflict with one another. Any properties that are being defined like this:

var myVariable = "whatEverGoesHere";

that you wish to have persist beyond the scope of the initialization code MUST be added to your namespace instead:

RSCustom.example.myVariable = "whatEverGoesHere";

I suspect this is where your (or Google's) problem lies.

Does this mean I can't user Google's Chart API. I can get it to work just fine if I embed an HTML viewer. If there was some way to get the HTML viewer to receive and handle events from within, this would be sufficient to build what I'm trying to make.

I have no problem altering the HTML to make the desired chart but the problem is that I can't respond to events from the chart. I figured the WebControlWrapper was the solution to this. But if I can do it all through a subclassed HTML viewer, it may be easier to get things working.

swort · **Posted:** Fri Mar 08, 2013 9:48 pm

use the WebControlWrapper native functions where possible:

google.load()

is NOT needed.

You can load it from a URL.
Read on here:
https://developers.google.com/loader/#AutoLoading

Autoloading can be used for what you need.
You create a url wich will return the javascript (from google), and automaticly load it.
Use it like this:

WebControlWrapper.LoadLibraries ( "MyJSCallbackFunction();", "https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version%22%3A%222.X%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D%7D" )

This url is an example, you have to create your own (eg for the library you need)

neonash7777 · **Joined:** Mon Nov 29, 2010 7:01 pm **Posts:** 446

swort wrote:

use the WebControlWrapper native functions where possible:

google.load()

is NOT needed.

You can load it from a URL.
Read on here:
https://developers.google.com/loader/#AutoLoading

Autoloading can be used for what you need.
You create a url wich will return the javascript (from google), and automaticly load it.
Use it like this:

WebControlWrapper.LoadLibraries ( "MyJSCallbackFunction();", "https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version%22%3A%222.X%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D%7D" )

This url is an example, you have to create your own (eg for the library you need)

Sweet, this will hopefully do the trick. I'll try and implement it later today! Thanks! ^_^

neonash7777 · **Joined:** Mon Nov 29, 2010 7:01 pm **Posts:** 446

I'm using the autoload function now and it appears to be loading from what I can tell (how can I verify this?)

This is what I have in the Open event:

dim autoLoadLibararies as string = "{""modules"":[{""name"":""visualization"",""version"":""1.0"",""packages"":[""corechart""]}]}"
LoadLibraries("RSCustom."+JavascriptNamespace+"."+self.ControlID+"_constructor();","http://www.google.com/jsapi?autoload="+EncodeURLComponent(autoLoadLibararies))

The callback calls the constructor which runs the script below but it still doesn't show the graph.
I tried using an executeJavascript method on the custom control from a button press event to try and create the graph manually and I get the following error:

Quote:

Could not execute returned javascript: undefined is not a function
Source: 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('KVkWCJwh'));
chart.draw(data, options);

swort · **Posted:** Mon Mar 11, 2013 3:48 pm

chrome - right mouse button on a blank tab -> inspect element -> now you see the developer bar.
enter your web (or debug app) adress and you can test and see the calls being made.

use console.log("") javascript function to output to the console window of the chrome developer thing.

neonash7777 · **Joined:** Mon Nov 29, 2010 7:01 pm **Posts:** 446

swort wrote:

chrome - right mouse button on a blank tab -> inspect element -> now you see the developer bar.
enter your web (or debug app) adress and you can test and see the calls being made.

use console.log("") javascript function to output to the console window of the chrome developer thing.

According to the inspector the AutoLoad command runs and appears to load the library:

if(!window['googleLT_']){window['googleLT_']=(new Date()).getTime();}if (!window['google']) {
window['google'] = {};
}
if (!window['google']['loader']) {
window['google']['loader'] = {};
google.loader.ServiceBase = 'https://www.google.com/uds';
google.loader.GoogleApisBase = 'https://ajax.googleapis.com/ajax';
google.loader.ApiKey = 'notsupplied';
google.loader.KeyVerified = true;
google.loader.LoadFailure = false;
google.loader.Secure = true;
...

But the constructor method is never called as the callback.
I can call the constructor with the executeJavascript() method but then I get an error:

Quote:

Could not execute returned javascript: undefined is not a function
Source: RSCustom.BJN.GoogleBarGraphTest.OwIj3YD1_constructor();

I've included the latest version of the project file if anyone wants to take a peak:
http://www.bngholdingspdf.com/BJNGoogleBarGraph.rbp.zip

	Real Software Forums The forum for Real Studio and other Real Software products.
[ REAL Software Website \| Board Index ]

Real Software Forums

Google Charts and Web Control SDK