How to access the data from Ajax for the charts

jkamaraj · 2016-02-19T12:41:23+00:00

<p>Hello ,</p><br/> <p>I am using the following script to get the Ajax data at client side by placing the code as HTML in text element</p><br/> <p> </p><br/> <div> </div><br/> <div> </div><br/> <div><script><br><br/> var jdata = null;<br><br/> head.js("<a data-ipb='nomediaparse' href='<a…

jkamaraj

<p>Hello ,</p>
<p>I am using the following script to get the Ajax data at client side by placing the code as HTML in text element</p>
<p> </p>
<div> </div>
<div> </div>
<div><script><br>
var jdata = null;<br>
head.js("<a data-ipb='nomediaparse' href='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'>https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</a>,calljson); </div>
<div> </div>
<div>function calljson() {head.ready(function(){<br>
</div>
<div> </div>
<div>$.ajax({<br>
            url: '<a data-ipb='nomediaparse' href='https://xxxxxxxx/ClaimxxskWeb/services/v1/reportSearch/InjuryByDivisionReport/633''>https://xxxxxxxx/ClaimxxskWeb/services/v1/reportSearch/InjuryByDivisionReport/633'</a><br>
            headers: {<br>
                'token': '83c25e9704d64f0a97a96c48ffb8378c',<br>
                'userid': '10',<br>
                'locationId': '2'<br>
            },<br>
            method: 'get',<br>
            dataType: 'json',<br>
            success: function(data) {<br>
           <br>
               <br>
                alert(JSON.stringify(data));</div>
<div> </div>
<div>              // jdata = JSON.stringify(data);        <br>
               <br>
               <br>
            }<br>
        });</div>
<div> </div>
<div>});</div>
<div> </div>
<div>}<br>
</script></div>
<p> </p>
<p>I want to get the jdata object to my report so that I can use it as data for my charts. How can I do that?</p>
<p>Thank you</p>
<p>Raj</p>
<p> </p>

Find more posts tagged with

Comments

Clement Wong

<p>Raj,</p>
<p> </p>
<p>Are you using Open Source or commercial BIRT? What version?</p>
<p> </p>
<p>As of BIRT 4.3, and iHub3 releases, head.js is included with BIRT <a data-ipb='nomediaparse' href='http://www.eclipse.org/birt/phoenix/project/notable4.3.php#jump_6).'>http://www.eclipse.org/birt/phoenix/project/notable4.3.php#jump_6).</a></p>
<p> </p>
<p>If you are using commercial BIRT, it uses jQuery so there's no need to load it unless you need a different version.</p>
<p> </p>
<p>What JavaScript chart library are you using in your report?</p>
<p> </p>
<p> </p>
<p> </p>
<p>Your code above was missing a comma after the "url" value in the ajax call. Also, I don't it's necessary to have head.ready because head.js's callback is calljson.</p>
<p> </p>
<p>The following code worked for me:</p>
<pre class="_prettyXprint">
<script>
var jdata = null;
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js",calljson);

function calljson() {

$.ajax({
            url: 'https://jsonp.afeld.me/?url=http%3A%2F%2Fanyorigin.com%2Fget%3Furl%3Dhttp%253A%2F%2Frest.db.ripe.net%2Fripe%2Finetnum%2F8.8.8.8.json',
            headers: {
                'token': '83c25e9704d64f0a97a96c48ffb8378c',
                'userid': '10',
                'locationId': '2'
            },
            method: 'get',
            dataType: 'json',
            success: function(data) {

                alert(JSON.stringify(data));

              // jdata = JSON.stringify(data);


            }
        });
}
</script>

</pre>
<p>My URL looks funny because I'm using a JSON proxy because it will allow me to demonstrate the JSON string being returned from anywhere. Otherwise, if no proxy was used to make the request to <a data-ipb='nomediaparse' href='http://rest.db.ripe.net/ripe/inetnum/8.8.8.8.json'>http://rest.db.ripe.net/ripe/inetnum/8.8.8.8.json</a>, we'll see an error in the browser's DevTools console: </p>
<p> </p>
<p>Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>

jkamaraj

<p>Hi Clement,</p>
<p>The code works for me when I place it in text control. I think it gets executed in the browser, I think what I need is access to data ( variable data in this code) so that I can use it as data source for my charts.</p>
<p> </p>
<p>Thanks.</p>
<p>Raj </p>

Clement Wong

<p>Oh, the way you asked the question I thought you were going to use a JavaScript Chart with a JSON data source like a D3.js chart (see dynamic D3.js or NVD3.js example @ <a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1120-ihub-31-custom-visualization-examples/).'>http://developer.actuate.com/community/forum/index.php?/files/file/1120-ihub-31-custom-visualization-examples/).</a></p>
<p> </p>
<p>If you are trying to pull JSON data into BIRT for a native OS BIRT chart, then you'll need to use a scripted data source. Here is a DevShare exampmle of this technique (@ <a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1128-querying-elasticsearch-with-birt-using-a-scripted-data-set/)'>http://developer.actuate.com/community/forum/index.php?/files/file/1128-querying-elasticsearch-with-birt-using-a-scripted-data-set/)</a></p>
<p> </p>
<p>In our iHub 16 release (scheduled for Q2 2016), we will have a REST API ODA as part of commercial BIRT, and it can handle JSON data.</p>

jkamaraj

<p>Hi Clement,</p>
<p>We already pulling the data from the JSON URL using the similar technique provided in the DevShare example. The challenge is we need to send some headers( tokens, location id and user id) in our https request to get the JSON. We got this done by:</p>
<p> </p>
<p>1. Create Java class that sends an https GET request to get the JSON input stream. Created a Jar(examples.jar) with this class and added to the report by adding in Resources Java files</p>
<p>2. Process the JSON input stream using Java script in BIRT.</p>
<p> </p>
<p> </p>
<p><u><strong>Java class code:</strong></u></p>
<div>package examples;</div>
<div>import java.io.BufferedReader;</div>
<div>import java.io.IOException;</div>
<div>import java.io.InputStream;</div>
<div>import java.io.InputStreamReader;</div>
<div>import java.security.SecureRandom;</div>
<div>import java.security.cert.CertificateException;</div>
<div>import java.security.cert.X509Certificate;</div>
<div>import java.util.ArrayList;</div>
<div>import java.util.List;</div>
<div> </div>
<div>import javax.net.ssl.HostnameVerifier;</div>
<div>import javax.net.ssl.KeyManager;</div>
<div>import javax.net.ssl.SSLContext;</div>
<div>import javax.net.ssl.SSLSession;</div>
<div>import javax.net.ssl.TrustManager;</div>
<div>import javax.net.ssl.X509TrustManager;</div>
<div> </div>
<div>import org.apache.http.HttpEntity;</div>
<div>import org.apache.http.HttpResponse;</div>
<div>import org.apache.http.NameValuePair;</div>
<div>import org.apache.http.client.HttpClient;</div>
<div>import org.apache.http.client.entity.UrlEncodedFormEntity;</div>
<div>import org.apache.http.client.methods.HttpGet;</div>
<div>import org.apache.http.client.methods.HttpPost;</div>
<div>import org.apache.http.conn.ssl.SSLConnectionSocketFactory;</div>
<div>import org.apache.http.impl.client.DefaultHttpClient;</div>
<div>import org.apache.http.impl.client.HttpClients;</div>
<div>import org.apache.http.message.BasicNameValuePair;</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div>public class GetAJson {</div>
<div> </div>
<div> </div>
<div>private final String USER_AGENT = "Mozilla/5.0";</div>
<div>public static void main(String[] args) throws Exception {</div>
<div> </div>
<div>GetAJson http = new GetAJson();</div>
<div>System.out.println("Testing 1 - Send Http GET request");</div>
<div>String str = http.sendGet();</div>
<div>System.out.println("Str is: " + str);</div>
<div> </div>
<div>}</div>
<div> </div>
<div>// HTTP GET request</div>
<div> </div>
<div>public String sendGet() throws Exception {</div>
<div> </div>
<div>TrustManager[] trustManagers = new TrustManager[1];</div>
<div>trustManagers[0] = new DefaultTrustManager();</div>
<div> </div>
<div>SSLContext sslContext = SSLContext.getInstance("TLS");</div>
<div>sslContext.init(new KeyManager[0], trustManagers, new SecureRandom());</div>
<div>SSLContext.setDefault(sslContext);</div>
<div> </div>
<div>sslContext.init(null, trustManagers, null);</div>
<div>SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(sslContext,</div>
<div> SSLConnectionSocketFactory.ALLOW_ALL_HOSTNAME_VERIFIER);</div>
<div> </div>
<div>String url = "<a data-ipb='nomediaparse' href='https://xxxxxx.****.com/ClaimWeb/services/v1/reportSearch/InjuryByDivReport/633'>https://xxxxxx.****.com/ClaimWeb/services/v1/reportSearch/InjuryByDivReport/633";</a></div>
<div> </div>
<div>//HttpClient client = new DefaultHttpClient();</div>
<div> </div>
<div>HttpClient client = HttpClients.custom()</div>
<div> .setSSLSocketFactory(sslsf)</div>
<div> .build();</div>
<div> </div>
<div>HttpGet request = new HttpGet(url);</div>
<div> </div>
<div>// add request header</div>
<div> </div>
<div>request.addHeader("locationid", "2324");</div>
<div>request.addHeader("token", "83c25sdfe9704dl96c48ff78c");</div>
<div>request.addHeader("userid", "101");</div>
<div>request.addHeader("accept", "application/json");</div>
<div> </div>
<div>HttpResponse response = client.execute(request);</div>
<div>HttpEntity entity = response.getEntity();</div>
<div> </div>
<div>if (entity != null) {</div>
<div> </div>
<div> // A Simple JSON Response Read</div>
<div> InputStream instream = entity.getContent();</div>
<div> String result = convertStreamToString(instream);</div>
<div> // now you have the string representation of the HTML request</div>
<div> System.out.println("RESPONSE: " + result);</div>
<div> instream.close();</div>
<div> </div>
<div> if (response.getStatusLine().getStatusCode() == 200) {</div>
<div> <span> </span>System.out.println("We are here");</div>
<div> // netState.setLogginDone(true);</div>
<div> <span> </span>return result;</div>
<div> }</div>
<div> }</div>
<div> </div>
<div> </div>
<div>return null;</div>
<div> </div>
<div>}</div>
<div> </div>
<div> </div>
<div>class DefaultTrustManager implements X509TrustManager{</div>
<div> @Override</div>
<div>public</div>
<div> void checkClientTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException {</div>
<div> </div>
<div> }</div>
<div> </div>
<div> @Override</div>
<div>public</div>
<div> void checkServerTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException {</div>
<div> </div>
<div> }</div>
<div> </div>
<div> @Override</div>
<div>public</div>
<div> X509Certificate[] getAcceptedIssuers() {</div>
<div> return null;</div>
<div> }</div>
<div>}</div>
<div> </div>
<div> </div>
<div>private static String convertStreamToString(InputStream is) {</div>
<div> </div>
<div> BufferedReader reader = new BufferedReader(new InputStreamReader(is));</div>
<div> StringBuilder sb = new StringBuilder();</div>
<div> </div>
<div> String line = null;</div>
<div> try {</div>
<div> while ((line = reader.readLine()) != null) {</div>
<div> sb.append(line + "\n");</div>
<div> }</div>
<div> } catch (IOException e) {</div>
<div> e.printStackTrace();</div>
<div> } finally {</div>
<div> try {</div>
<div> is.close();</div>
<div> } catch (IOException e) {</div>
<div> e.printStackTrace();</div>
<div> }</div>
<div> }</div>
<div> return sb.toString();</div>
<div>}</div>
<div> </div>
<div>}</div>
<div> </div>
<div>Note the inner class DefaultTrustManager in the code. I need to add this as the certificate on the site is invalid and I have to let the program know it is ok to proceed to the site.</div>
<div> </div>
<div><u><strong>Code in the Open method of data source:</strong></u></div>
<div> </div>
<div>
<div>//Import the packages needed to open the JSON Dataset</div>
<div>importPackage(Packages.org.apache.commons.io);</div>
<div>importPackage( Packages.examples );</div>
<div> </div>
<div>jd = GetAJson();</div>
<div> </div>
<div>input = jd.sendGet();</div>
<div> </div>
<div>//Store the contents in to a variable</div>
<div>jsondata = input;</div>
<div> </div>
<div>//Convert the String to JSON Object</div>
<div>myJSONObject =JSON.parse(input);</div>
<div>len = myJSONObject.length;</div>
<div> </div>
<div>//Counter</div>
<div>count1 = 0;</div>
</div>
<div> </div>
<div><strong><u>Code in the fetch method:</u></strong></div>
<div>
<div>if ( count1 < len) {</div>
<div> </div>
<div>var Period = myJSONObject[count1].period;</div>
<div>var CliamsCount = myJSONObject[count1].count;</div>
<div>var year = myJSONObject[count1].year;</div>
<div> </div>
<div> </div>
<div>row["Period"] = "P" + Period + "-" + year;</div>
<div>row["ClaimsCount"] = CliamsCount;</div>
<div> </div>
<div>count1++;</div>
<div>return true;</div>
<div>}</div>
<div>return false;</div>
<div> </div>
</div>
<p><u><strong>JSON Output from the site:</strong></u></p>
<p> </p>
<p>[{"year":2015,"period":1,"count":4},{"year":2015,"period":2,"count":13},{"year":2015,"period":3,"count":22},{"year":2015,"period":4,"count":18},{"year":2015,"period":5,"count":19},{"year":2015,"period":6,"count":28},{"year":2015,"period":7,"count":20},{"year":2015,"period":8,"count":16},{"year":2015,"period":9,"count":20},{"year":2015,"period":10,"count":24},{"year":2015,"period":11,"count":1}]</p>
<p> </p>
<p> </p>
<p>Thank you for your help.I will submit a dev share article about this. </p>
<p> </p>
<p>Raj</p>
<p>Vetri Systems</p>
<p>408 449 1374</p>