Lookng for example Using Google Charts with Alpha v11

[sremias]

Hi group!

I am looking to use the Google Charts API to generate some charts in my Alpha application. They have a prettier look to them than the built in charting API (sorry, please don't take offense). I found a really great how to example video but it is using v12 UX component but we only have v11.

http://alphasoftware.net/alpha-anywh...hart-controls/

I also created a real simple example using a static data chart just via copying and pasting code from Google Charts into a A5W page from:
https://google-developers.appspot.co...cs/quick_start
but obviously I need to do something more advanced as I wouldn't code everything in my A5W page.

I searched Message Board and see comments from others about using Google Charts from v8 on up but I can't find any example on what I need to do. I have copied down the Google Charts API to my JavaScript folder within my Web Project. I'm thinking I need to start with a Dialog component but I'm still a newbie and afraid to waste my time and head down the wrong path as I am under a tight deadline.

If anyone could offer some advice or provide an example, I would be forever grateful! Thanks!

[sremias]

Re: Lookng for example Using Google Charts with Alpha v11

Update. Here's what I've tried and I'm getting an error: "Object doesn't support property or method 'arrayToDataTable'

1) I started with a Dialog Component

2) Added Static Text control and in the SOURCE property added the following HTML:
<!-- per example at https://google-developers.appspot.co...ery/combochart -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
</script>

<div id="mychart" style="HEIGHT: 3in; WIDTH: 3in"></div>

3) Created a JavaScript function:
function drawChart() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('mychart'));
chart.draw(data, options);
};

4) Added a button and OnButtonClick event call drawChart();

5) I also added javascript/gviz-api.js to the Dialog, Properties. This is the API downloaded from Google Charts.

here is a jsfiddle demonstrating the code working: http://jsfiddle.net/mn3ayp6b/

It's as if something in the Alpha environment isn't recognizing the Google API but I've tried everything I can think of to no avail. Any help would be greatly appreciated.

[sremias]

Re: Lookng for example Using Google Charts with Alpha v11

Figured it out.....In the Dialog Properties I needed to reference the Google API in the JavaScript - Linked files as follows:
https://www.google.com/jsapi

[Michael1954]

Re: Lookng for example Using Google Charts with Alpha v11

Selwyn has made a video, goes through all of that. It is worth watching.


Michael

[sremias]

Re: Lookng for example Using Google Charts with Alpha v11

Thanks Michael. I did watch it (mentioned in my first post) but it's using a UX component in v12 and we only have v11 which doesn't have UX components so I wasn't sure where to start. however, it did give me the information I needed and through much trial and error, I got it going.

[Michael1954]

Re: Lookng for example Using Google Charts with Alpha v11

The dialog is a UX. They work in both.

[jcarrallo]

Re: Lookng for example Using Google Charts with Alpha v11

Hi Stephanie,
So far my experience with Alpha + Google charts has been very good.
Better to use SQL as backend for good performance.
The only issue that I have come across is that if you include chart configuration options for the user, sometimes the chart refresh following the Ajax callback does not work well - but it might be that I�m missing something.

Captura.JPG