BIRT within a google maps infowindow

ronaldral

<p>Hello, </p>
<p> </p>
<p>I have a chart in BIRT that shows the number of clients per city. This could be with dashboards or simple reports. I would like to integrate my charts with google maps. The idea is to have a HTML file that calls google maps API, with markers for each city. When the user clicks any marker, a popup window (info window) should display a chart with information related to that specific city. </p>
<p> </p>
<p>As a proof of concept, I am working meanwhile with only one city and one market (both fixed for now). I have followed tutorials on how to display markers and infowindows, however I am still not able to display my chart correctly. </p>
<p> </p>
<p>It is similar to <a data-ipb='nomediaparse' href='http://www.visioneo.org/google-map'>http://www.visioneo.org/google-map</a>but I would to build one on my own. </p>
<p> </p>
<p>Here is and example of my HTML and JavaScript. I have change the IP address for my localhost.</p>
<p> </p>
<p><!DOCTYPE html></p>
<div><html></div>
<div>  <head></div>
<div>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"></div>
<div>    <meta charset="utf-8"></div>
<div>    <title>Info windows</title></div>
<div>    <style></div>
<div>      html, body, #map-canvas {</div>
<div>        height: 100%;</div>
<div>        margin: 0px;</div>
<div>        padding: 0px</div>
<div>      }</div>
<div>    </style></div>
<div> </div>
<div><!-- BIRT--></div>
<div><script type='text/javascript' language='JavaScript' src=''<a data-ipb='nomediaparse' href='http://localhost:8700/iportal/jsapi''&gt;http://localhost:8700/iportal/jsapi'&gt;&lt;/script&gt;&lt;/a&gt;&lt;/div&gt;
<div><script type='text/javascript'></div>
<div>function init_birt(){</div>
<div>actuate.load('viewer');</div>
<div>var reqOps = new actuate.RequestOptions( );</div>
<div>reqOps.setVolume('Default Volume');</div>
<div>reqOps.setCustomParameters({});</div>
<div>actuate.initialize( '<a data-ipb='nomediaparse' href='http://localhost:8700/iportal/',reqOps==undefined?null:reqOps'&gt;http://localhost:8700/iportal/',reqOps==undefined?null:reqOps&lt;/a&gt;, null,null,myInit ); </div>
<div>}</div>
<div> </div>
<div>function myInit(){<span> </span></div>
<div>viewer1 = new actuate.Viewer( 'container1' );</div>
<div>viewer1.setReportDesign('/Home/administrator/report_1.rptdesign;1');</div>
<div>var parameterValueMap={</div>
<div>p_city:"City_1",</div>
<div>p_date_start:"6/16/2014",p_time_start:"10:00:00 PM",</div>
<div>p_date_end:"6/17/2014",p_time_end:"1:00:00 AM"};</div>
<div> </div>
<div>var parameterValues=[];</div>
<div>for(var key in parameterValueMap){</div>
<div>var param=new actuate.viewer.impl.ParameterValue();</div>
<div>param.setName(key);</div>
<div>if(parameterValueMap[key]!=null){</div>
<div>param.setValue(parameterValueMap[key]);</div>
<div>}</div>
<div>else{</div>
<div>param.setValueIsNull(true);</div>
<div>}</div>
<div>parameterValues.push(param);</div>
<div>}</div>
<div>viewer1.setParameterValues(parameterValues);</div>
<div>var options = new actuate.viewer.UIOptions( );</div>
<div>options.enableEditReport(false);</div>
<div>viewer1.setUIOptions( options );</div>
<div>viewer1.submit();</div>
<div>}</div>
<div></script></div>
<div> </div>
<div> </div>
<div><!-- GOOGLE MAPS--></div>
<div>    <script src="<a data-ipb='nomediaparse' href='https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true'>https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script></a&gt;   </div>
<div>    <script></div>
<div>// This example displays a marker at the center of Australia.</div>
<div>// When the user clicks the marker, an info window opens.</div>
<div> </div>
<div>function initialize() {</div>
<div>  <span> </span>var myLatlng = new google.maps.LatLng(-25.363882,131.044922);</div>
<div>  <span> </span>var mapOptions = {</div>
<div>    <span> </span>zoom: 4,</div>
<div>    <span> </span>center: myLatlng</div>
<div>  <span> </span>};</div>
<div> </div>
<div>  <span> </span>var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);</div>
<div> </div>
<div>  <span> </span>var contentString = '<div id="container1" style="border-width: 0px; border-style: solid;">' + 'Hello World'+'</div>'</div>
<div>  <span> </span>var infowindow = new google.maps.InfoWindow();</div>
<div>  <span> </span>infowindow.setContent(contentString);</div>
<div>  </div>
<div> </div>
<div>  <span> </span>var marker = new google.maps.Marker({</div>
<div>      <span> </span>position: myLatlng,</div>
<div>      <span> </span>map: map,</div>
<div>      <span> </span>title: 'Test 1'</div>
<div>  <span> </span>});</div>
<div>  <span> </span>google.maps.event.addListener(marker, 'click', function() {</div>
<div>  <span> </span>init_birt();</div>
<div>  <span> </span>infowindow.open(map,marker);</div>
<div> <span> </span></div>
<div>  <span> </span>});</div>
<div> </div>
<div>}</div>
<div> </div>
<div>google.maps.event.addDomListener(window, 'load', initialize);</div>
<div> </div>
<div>    </script></div>
<div>  </div>
<div>  </div>
<div>  </head></div>
<div> </div>
<div>    <div id="map-canvas"></div></div>
<div> </div>
<div></html></div>
<div> </div>
<div> </div>
<div> </div>
<div>Any suggestions? Thank you very much.</div>

JFreeman

<p>What version of BIRT are you using?</p>
<p>How will you be deploying the report/dashboard </p>