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”]});
/**
* @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);
}