• Anonymous
  • Login
  • Register
XPages Forum - Review: Google Chart API with IBM X-Pages

  Hi Team,

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 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>
       <div id="piechart" style="width: 900px; height: 500px;"></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
   google.charts.load('current', {'packages':['corechart']});
      function drawChart() {
        var data = google.visualization.arrayToDataTable([    
        var options = {
          title: 'Opportunity Details'
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);

In this field you can enter the actual review.

You can use the rich text editor for rich text formating. You can also enter HTML to embed objects, e.g. to embed a YouTube video or a screenshot of the project. In this case use '[' and ']' to mark the passthrough HTML as such.

Please note that the first time you use the new UI your description is converted from rich text to MIME. You might want to copy and paste the raw plain text from the old UI in the new UI so that you don't loose information.