# Google charts

**URL:** <https://forum.servoy.com/t/google-charts/14339>\
**Category:** Classic Servoy\
**Created:** [July 22, 2011, 2:46pm UTC](https://forum.servoy.com/t/google-charts/14339 "2011-07-22T14:46:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![udrescu\_bogdan](https://avatars.discourse-cdn.com/v4/letter/u/87869e/32.png) [@udrescu\_bogdan](https://forum.servoy.com/u/udrescu_bogdan)\
**Post date:** [July 22, 2011, 2:46pm UTC](https://forum.servoy.com/t/google-charts/14339/1 "2011-07-22T14:46:28Z")

</div>

Hi,

I’m trying to add the google charts in our solution. I manage to add before a javascript calendar and now it works pretty well. But now I just don’t see what I’m doing wrong.

This is the code of my form. I have a HTML\_AREA field bound to the html variable. I took the example from the google website. The funny thing is that I don’t see the google script in the source page. I happens sometimes to be there, but then, the execution of the javascript from the onShow method stops at the google.load(“visualization”, “1”, {“packages”:[“corechart”]});

```auto
/**
 * @properties={typeid:35,uuid:"BC264074-2947-4D37-89D6-3712A13157FE"}
 */
var html = "";

/**
 * Callback method when form is (re)loaded.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"79DFAD57-524C-43E9-B9CF-BBF9D65D44B5"}
 */
function onLoad(event) {

	html = ' \
<html> \
	<head> \
	    <script src="https://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script> \
	</head> \
\
	<body> \
		<div id="chart_div"></div> \
	</body> \
</html>';
}

/**
 * Callback method for when form is shown.
 *
 * @param {Boolean} firstShow form is shown first time after load
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"43648DA7-8E98-4F46-BAF5-85749E5BBBDB"}
 */
function onShow(firstShow, event) {
	var js = ' \
		alert("Hi 1");\
		google.load("visualization", "1", {"packages":["corechart"]}); \
\
		alert("Hi 2");\
		google.setOnLoadCallback(function() { \
				\
				alert("Hi inside 1");\
				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] \
				]); \
\
				alert("Hi inside 2");\
				var chart = new google.visualization.PieChart(document.getElementById("chart_div")); \
				chart.draw(data, {width: 400, height: 240}); \
		}); \
\
		alert("Hi");\
';

	plugins.WebClientUtils.executeClientSideJS(js);
}

```

---

<div class="post-metadata">

**Author:** ![lvostinar](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/lvostinar/32/5248_2.png) [@lvostinar](https://forum.servoy.com/u/lvostinar)\
**Post date:** [July 25, 2011, 2:32pm UTC](https://forum.servoy.com/t/google-charts/14339/2 "2011-07-25T14:32:46Z")

</div>

check for javascript errors (firefox, error console), use firebug to debug(see if something is created in that div)

---

<div class="post-metadata">

**Author:** ![ptalbot](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/ptalbot/32/4952_2.png) [@ptalbot](https://forum.servoy.com/u/ptalbot)\
**Post date:** [July 25, 2011, 8:56pm UTC](https://forum.servoy.com/t/google-charts/14339/3 "2011-07-25T20:56:48Z")

</div>

You can also use the VelocityReport which helps building charts in plain Servoy JavaScript (using Google Charts or Eastwood).  
-my 2 cents ![;)]( "Wink")

---

<div class="post-metadata">

**Author:** ![jcarlos](https://avatars.discourse-cdn.com/v4/letter/j/46a35a/32.png) [@jcarlos](https://forum.servoy.com/u/jcarlos)\
**Post date:** [July 25, 2011, 10:13pm UTC](https://forum.servoy.com/t/google-charts/14339/4 "2011-07-25T22:13:44Z")

</div>

> ptalbot:  
> You can also use the VelocityReport which helps building charts in plain Servoy JavaScript (using Google Charts or Eastwood).  
> -my 2 cents ![;)]( "Wink")

You can get the VelocityReport from ServoyForge at:

> **[Overview - VelocityReport Plugin - ServoyForge](https://www.servoyforge.net/projects/velocity-report)**
>
> Redmine

JC