FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.



Aug 19, 2018, 9:09 AM
41 Posts

Google Chart API

  • Category: APIs
  • Platform: All
  • Release: 9.0.1
  • Role: Developer
  • Tags: Google Chart API
  • Replies: 0

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>

 


FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.