Google Charts and Web Control SDK

neonash7777 · **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?

swort · **Posted:** Mon Dec 17, 2012 12:36 pm

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.

neonash7777 · **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...

Stretch · **Posted:** Wed Dec 19, 2012 1:22 pm

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?

neonash7777 · **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.

neonash7777 · **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...

Stretch · **Posted:** Wed Dec 19, 2012 3:10 pm

The documentation is included as a PDF in the Extras->WebSDK->Documentation folder.

neonash7777 · **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.

neonash7777 · **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?

Stretch · **Posted:** Wed Dec 19, 2012 10:13 pm

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)

neonash7777 · **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.

Stretch · **Posted:** Thu Dec 20, 2012 2:03 pm

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.

neonash7777 · **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

Stretch · **Posted:** Sun Jan 06, 2013 9:25 pm

Change the first line of this method declaration to:

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

Remember you're attaching your code to your namespace.

neonash7777 · **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.

	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