How to connect with Google Chart

Hello Friends, Can you please share a sample code or way to connect with google chart. Thank You Abhishek Srivastava
  • 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
  • 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
  • Recommended link do not seam to be valid anymore.  Im also having issues getting google charts to work i a report.

  • 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="">">
    <xsl:template match="/">


    <script type="text/javascript" src="">>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});

    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');

    ['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);
    <h2>Testing Google Gantt Chart</h2>
    <div id="chart_div"></div>



  • 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);
        // Define the chart to be drawn.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Element');
        data.addColumn('number', 'Percentage');
            ['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


    Christopher Gillis

    Aras Labs Software Engineer

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

    Great support!  Fast and verry helpful.  :-)