This is what im trying to do. The report calls this following xslt. The chart is not drawn and in chrome debug it seams that google.visualization is uninitialized. If run this outside Aras is works without any issues. Please advise.
<xsl:stylesheet version="1.0" xmlns:xsl="">www.w3.org/.../Transform">
<xsl:template match="/">
<html>
<head>
<script type="text/javascript" src="">www.gstatic.com/.../script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Test',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Testing Google Gantt Chart</h2>
<div id="chart_div"></div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Hi Emil,
The blog post linked to above can be found here. However, please note that it's quite old, and I don't believe it covers running google chart inside a report like this.
I was able to reproduce the issue that you're seeing in one of my local instances. The underlying issue for seemed to be that the google.charts.load function that we call at the top would never indicate that it had finished loading, so my callback function never ran to actually draw the chart.
I was able to resolve this in a roundabout way by instead manually checking within my drawChart() function if each piece had been loaded. If not, I would set a timeout to wait a bit and check again later like the sample code below. Also note that i was using the sample code found here to just render a static pie chart. You'll need to update the checks in your code to instead look for the Gantt constructor.
function drawChart() {
// Check that everything is loaded
if (!google.visualization || !google.visualization.DataTable || !google.visualization.PieChart) {
// If not, wait 50 ms and try again
setTimeout(drawChart, 50);
return;
}
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Element');
data.addColumn('number', 'Percentage');
data.addRows([
['Nitrogen', 0.78],
['Oxygen', 0.21],
['Other', 0.01]
]);
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
chart.draw(data, null);
}
google.charts.load('current', {packages: ['corechart']});
// Manually call our drawChart() function
drawChart();
Chris
Christopher Gillis
Aras Labs Software Engineer
Hi Emil,
The blog post linked to above can be found here. However, please note that it's quite old, and I don't believe it covers running google chart inside a report like this.
I was able to reproduce the issue that you're seeing in one of my local instances. The underlying issue for seemed to be that the google.charts.load function that we call at the top would never indicate that it had finished loading, so my callback function never ran to actually draw the chart.
I was able to resolve this in a roundabout way by instead manually checking within my drawChart() function if each piece had been loaded. If not, I would set a timeout to wait a bit and check again later like the sample code below. Also note that i was using the sample code found here to just render a static pie chart. You'll need to update the checks in your code to instead look for the Gantt constructor.
function drawChart() {
// Check that everything is loaded
if (!google.visualization || !google.visualization.DataTable || !google.visualization.PieChart) {
// If not, wait 50 ms and try again
setTimeout(drawChart, 50);
return;
}
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Element');
data.addColumn('number', 'Percentage');
data.addRows([
['Nitrogen', 0.78],
['Oxygen', 0.21],
['Other', 0.01]
]);
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
chart.draw(data, null);
}
google.charts.load('current', {packages: ['corechart']});
// Manually call our drawChart() function
drawChart();
Chris
Christopher Gillis
Aras Labs Software Engineer
Thank you Christopher. This workaround is working fine for me as well.
Great support! Fast and verry helpful. :-)
//Emil
