Hi All,

Good day to you! 

We have tried to bind the Google Chart API with IBM X-Pages web-based application, but unable view the expected results in Google Chart.

We have taken input field and set the default values which have given in one of Google Chart API Examples. We are trying to take the values from JavaScript eg: document.getElementById("#{id:txtValues}").value, but not able to fetch the data.

However, when same details, we tried to put on Click Button and prompted the alert values, it shows data correctly. Whereas, while using the script we are getting issues with No Data in Chart.

Is there any possibility, we can get some assistance from your team member to advise us on this above query. 

***************

Below is code sample from X Pages.

 

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<xp:inputText id="txtValues">

           <xp:this.defaultValue><![CDATA[#{javascript:"['Opportunity Details', 'Total Values'],['Work',    21],['Eat',      12],['Commute',  22],['Watch TV', 32],['Sleep',    57]"}]]></xp:this.defaultValue>

       </xp:inputText>

 

<div id="piechart" style="width: 900px; height: 500px;"></div>

<script type='text/javascript' src='https://www.google.com/jsapi'></script> 

<script>   

   google.charts.load('current', {'packages':['corechart']});

   google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = google.visualization.arrayToDataTable([    

    

       document.getElementById("#{id:txtValues}").value

          

          

        ]);

 

        var options = {

          title: 'Opportunity Details'

        };

 

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

 

        chart.draw(data, options);

      }

      

      </script>

 

</xp:view>