IBM Domino xPages Google Chart issue

[Ajit Kr Gupt]

Dear Team,

We have tried to bind the google chart in IBM Domino Xpages application. But Unable to view the chart. Below is the code.

I taken on input field and in this field set the values and trying to take the values from javascript like   document.getElementById("#{id:txtValues}").value. but didn't get the values.

Same details we can put on button click and prompt the alert values are coming properly. But in your script getting issues and values coming blank.

Please help to us

<?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>

[Ajeet Kumar Gupt]

Hi Team,

Any updates.

Thank

Ajeet

[Daniel LaLiberte]

Hi Ajeet,

Your question is mostly independent of Google Charts.  Your code has these lines: 

        var data = google.visualization.arrayToDataTable([         
           document.getElementById("#{id:txtValues}").value
        ]);

If you have an element with an id of exactly "#{id:txtValues}" then the getElementById would return it.  (I think your element id is actually just "txtValues".)  In any event, then the 'value' attribute of that element will give you a string, whereas what needs to be passed to google.visualization.arrayToDataTable is an array of *arrays*.  So you would have to convert that string into the JS expression that is a comma separated arrays for each row, which can't be done in code like that.  You will need to do something quite different.  I don't know anything about the IBM xPages notation, but you'll probably have to ask someone who does.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/4e4aaafc-a3fa-4036-9334-185baf891676%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Ajeet Kumar Gupt]

Hi Daniel,

Thanks for the prompt action.

But In IBM XPages element id  would  support only like document.getElementById("#{id:txtValues}").value  for javascript.

ie. reason I added the document.getElementById("#{id:txtValues}").value code in this section.

Thanks

Ajeet

 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJO%3DtapA1sw%2BWQ00pzUosrAtJp_5ZYAf5Xh9pfMN99Pe%2Bw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Thanks & Regards,
Ajeet Kumar Gupt
+971-589170273