6

I have a jsp page that uses google charts api to display data in the form of bar charts. Here is the code for that. I want to display this page in a tooltip (cluetip).
My Google Chart code works well when I directly open that page in the browser. But when I try to display it in a tooltip via ajax, there is no chart drawn in the tooltip. The tooltip is blank. I suspect because of the external javascript that is imported inside the bar chart jsp page.

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

Is it violating the same origin policy?Am I right about it? Is there any way to make it work?



EDIT#1

The Google Chrome developer Console only shows a request sent to the Web Page(which uses the Google Chart) but no request is sent to the external javascript that is imported in that page (The external javascript shown above).

EDIT#2

I think the reason for the request not being made to fetch the external javascript is that

when you load a page via ajax,any script tags in that page will not be executed. So the javascript is not getting executed.

How can we manually execute the javscript after getting the data in ajax?



EDIT#3

Actually I have a table with many rows in my JSP. And each row contains a LINK; on which if you hover a Google bar Chart will be displayed inside a tooltip(different one for each row). So on hovering each row, the URL for the chart to be fetched will be different. I want to pass this URL as a parameter. And this URL will be used in ajax to fetch the data into tooltip.

Ashwin
  • 12,691
  • 31
  • 118
  • 190

1 Answers1

3

This is kind of a pseudo-code since I'm assuming you already have the chart.jsp page ready to go. I did my tests in PHP and it worked fine. I'm also using QTip2.

This is your chart.jsp page:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

int foo = Integer.parseInt(request.getParameter("foo"));
 switch(foo) {
  case 1:
  print
  <script>
  google.load('visualization', '1', {packages:['corechart']});
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
    chart.draw(data, options);
  }
  google.setOnLoadCallback(drawChart);   
  </script>     
  break;
    ...
}

<div id="visualization"></div>

On the other side, where you're calling the chart.jsp inside the tooltip via iframe:

<script>
$(function() {
  $('.tip').qtip({
    content: function(){
      var rel = $(this).attr('rel');
      return $('<iframe id="tip" frameBorder="0" src="chart.jsp?foo='+ rel +'" />')
    },
    hide: 'unfocus, click'
  }); 
});
</script>

<a class="tip" href="javascript:void(0)" rel="1">Hover</a>
Fabi
  • 973
  • 7
  • 18
  • What is the problem with the current code? There is no request made for the external javascript in the google Chrome Developer Console – Ashwin Jun 17 '13 at 19:01
  • I believe you mean you want to call the page with the chart inside the tooltip. Well, cluetip has that option, just make sure all your google docs/code is within the page youre going to draw the chart on. If you need to send parameters to your page to draw different charts, it'd be better if you could create a fiddle with it so we can help you better. – Fabi Jun 17 '13 at 20:59
  • My Google Chart code works well when I directly open that page in the browser. But when I try to display it in a tooltip via ajax, there is no chart drawn in the tooltip. The tooltip is blank. Do you still need the fiddle? – Ashwin Jun 18 '13 at 01:21
  • Well I'm assuming youre sending parameters to the chart page (within the same domain), so one way I think you can do it, is by loading the chart page as an iframe. I wasn't able to reproduce it using clueTip, but I used qtip2 since it had more options for iframe usage. It's a workaround, not sure if it's the best solution though..I Updated the answer. – Fabi Jun 18 '13 at 17:21
  • well I tried ajax and it wont load like you said. But I also tried loading the google api script in the main page (with the tooltip) and still, won't load properly - gives me an error google object is undefined. So it looks like your best bet might be the iframe but maybe someone would know how to do it through ajax. – Fabi Jun 19 '13 at 15:11
  • You have hardcoded the URL to be used for the ajax in side the qtip function. Is there a way to pass the URL parameter to the function? – Ashwin Jun 23 '13 at 06:55
  • If you can answer the to the above comment, I can award the bounty to you. Otherwise the bounty will go waste. Please answer if you know. Thanks:) – Ashwin Jun 24 '13 at 02:54
  • like i said Ive tried ajax (posting foo to chart page) and the google api won't load for some reason - tried to load it in both ends...hence why I'm using iframe to load the chart. – Fabi Jun 24 '13 at 15:00
  • http://craigsworks.com/projects/qtip2/demos/#googlemap this is an example using a google api, but has no ajax usage... – Fabi Jun 24 '13 at 15:02
  • you got me wrong. What I wanted to know was, instead of using "$(this).attr('rel')" in the javascript function, I want to pass it to the qtip function. how can that be done? – Ashwin Jun 24 '13 at 16:48
  • I dont really understand your question, sorry...the attr(rel) is just so you can pass on the parameters to your chart.jsp page.. – Fabi Jun 24 '13 at 17:19
  • here's another way to generate a map (you set this as an image on the contant param for QTIP) - https://chart.googleapis.com/chart?cht=lc&chtt=Title&chs=300x200&chxt=x&chd=t:40,20,50,20,100 – Fabi Jun 24 '13 at 18:31
  • I have explained the problem in detail in EDIT#3. – Ashwin Jun 27 '13 at 05:37
  • I understand what you want, but as I said before, it wont load the Chart Api for whatever reason - hence the tooltip being blank. You can still call the links on your iframe, instead of using rel, use the href value and on there u add your links – Fabi Jun 27 '13 at 14:40
  • what is the URL to your very page? if it's HTTPS but not in the same region as www.google.com, GET request to another HTTPS URL like https://www.google.com/jsapi will cause security problem because the browser considers that it is a cross domain scripting injection (i.e., XSS). So it should work if you use http to access the google charting API. – shawnzhu Jul 11 '13 at 00:35