How to connect with Google Chart

RE: How to connect with Google Chart

Emil Ringborg — Mon, 02 Mar 2020 08:07:34 GMT

Thank you Christopher. This workaround is working fine for me as well.

Great support! Fast and verry helpful. :-)

//Emil

RE: How to connect with Google Chart

Christopher Gillis — Thu, 27 Feb 2020 19:19:18 GMT

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

RE: How to connect with Google Chart

Emil Ringborg — Tue, 25 Feb 2020 08:46:24 GMT

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>

RE: How to connect with Google Chart

Emil Ringborg — Tue, 25 Feb 2020 08:30:05 GMT

Recommended link http://community.aras.com/en/integrate-google-charts-cloud-based-analytics-aras/ do not seam to be valid anymore. Im also having issues getting google charts to work i a report.

RE: How to connect with Google Chart

Zahar Chernov — Thu, 01 Dec 2016 08:05:00 GMT

Abhishek Srivastava, I don't think this is Aras related question as Google Chart API. I have pointed you to the example how to use Google Chart API on Aras forms, but I'm not sure what you can do with this API. I think you need to keep google it

RE: How to connect with Google Chart

Abhishek Srivastava — Tue, 29 Nov 2016 05:55:43 GMT

Hi Zahar, As per your link we can work over the form but is that possible to create report with Google Chart (Pie Chart). For Example: MACHINE| |MFG HRS | |CAPACITY| Machine No 1 | 20 | | 24 | Machine No 2 | 18 | | 24 | Machine No 3 | 22 | | 24 | I want to create Report with above table with Pie Chart. Thank You Abhishek Srivastava

RE: How to connect with Google Chart

Zahar Chernov — Fri, 25 Nov 2016 17:53:26 GMT

You can read this post from one of the Aras Partners: http://community.aras.com/en/integrate-google-charts-cloud-based-analytics-aras/