You need to add <script> tags for jQuery and the lightbox library to the <head> of your html, before the <script> tag that contains your javascript. Google hosts jQuery so you don't have to have a local copy; you can access it like this:
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";></script> If you opt to use Fancybox, you will need to host the file locally. Use a script tag like this: <script type="text/javascript" src="/local/path/to/fancybox.js"></script> and link to the required css file: <link rel="stylesheet" href="/local/path/to/fancybox.css" type="text/css" media="screen" /> You should then be able to replace the "window.open(<url>);" call with "$.fancybox(<url>);" in the event handler. I was going to make a jsfiddle demonstrating this, but it seems like their servers are down ATM <;o( On Wednesday, June 27, 2012 2:20:33 PM UTC-4, Andrea Nelson Mauro wrote: > > so, i've to insert also a jQuery libraries?.. > sorry, but i'm not a dev, i'm just a journalist (a little bit lamer :P ) > and i'm trying to learn... > > so i don't know when i've to put the models which your talking about > > > > > > <!DOCTYPE html> > <html> > <script type="text/javascript" src="http://www.google.com/jsapi";></script> > <script type="text/javascript"> > google.load('visualization', '1', {packages: ['geochart']}); > google.setOnLoadCallback(drawVisualization); > > function drawVisualization() { > var data = google.visualization.arrayToDataTable([ > ['State', 'Site'], > ['Alabama', 0], > ['Alaska', 0], > ['American Samoa', 0], > ['Arizona', 1], > ['Arkansas', 0], > ['California', 1], > ['Colorado', 1], > ['Connecticut', 0], > ['Delaware', 0], > ['District of Columbia', 0], > ['Florida', 0], > ['Georgia', 0], > ['Guam', 0], > ['Hawaii', 1], > ['Idaho', 0], > ['Illinois', 0], > ['Indiana', 0], > ['Iowa', 0], > ['Kansas', 0], > ['Kentucky', 0], > ['Louisiana', 0], > ['Maine', 0], > ['Maryland', 1], > ['Massachusetts', 1], > ['Michigan', 0], > ['Minnesota', 0], > ['Mississippi', 0], > ['Missouri', 0], > ['Montana', 0], > ['Nebraska', 0], > ['Nevada', 1], > ['New Hampshire', 0], > ['New Jersey', 1], > ['New Mexico', 0], > ['New York', 1], > ['North Carolina', 0], > ['North Dakota', 0], > ['Northern Marianas Islands', 0], > ['Ohio', 1], > ['Oklahoma', 0], > ['Oregon', 0], > ['Pennsylvania', 1], > ['Puerto Rico', 0], > ['Rhode Island', 0], > ['South Carolina', 0], > ['South Dakota', 0], > ['Tennessee', 0], > ['Texas', 0], > ['Utah', 0], > ['Vermont', 0], > ['Virginia', 0], > ['Virgin Islands', 0], > ['Washington', 0], > ['West Virginia', 0], > ['Wisconsin', 0], > ['Wyoming', 0] > ]); > > var view = new google.visualization.DataView(data); > view.setColumns([0, 1, { > type: 'string', > role: 'tooltip', > calc: function () { > return ''; > } > }]); > > var geochart = new > google.visualization.GeoChart(document.getElementById('visualization')); > var options = {}; > options['region'] = 'US'; > options['resolution'] = 'provinces'; > options['width'] = 400; > options['height'] = 195; > options['colors'] = ['#DDEEF8', '#FADC41']; > options['legend'] = 'none'; > > google.visualization.events.addListener(geochart, 'select', function() > { > var selectionIdx = geochart.getSelection()[0].row; > var stateName = data.getValue(selectionIdx, 0); > var value = data.getValue(selectionIdx, 1); > > if (value == '1') { > window.open('http://seiadev.forumone.com/state-solar-policy/' > + stateName); > } > }); > > geochart.draw(view, options); > } > </script> > > <body> > > > <div id="container" style=";width:500px"> > > <div id="header" style="background-color:#FFA500;"> > <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> > > <div id="menu" > style="background-color:#FFD700;height:200px;width:100px;float:left;"> > <b>Maps</b><br /> > Map1<br /> > Map2<br /> > Map3</div> > > <div id="visualization" > style="background-color:#EEEEEE;height:200px;width:400px;float:left;"></div> > > <div id="footer" > style="background-color:#FFA500;height:200px;clear:both;text-align:center;"> > Click on the region: the content will appear here</div> > > </div> > > > </body> > </html> > > > > > > Il giorno martedì 26 giugno 2012 17:28:43 UTC+2, asgallant ha scritto: >> >> You'll need to find a lightbox tool that you like (I use >> Fancybox<http://fancybox.net/>on the main site that I work on). Each one >> works a bit differently on the >> code side, but most seem to revolve around a few models >> >> 1) put the contents of an HTML element (typically hidden) into a lightbox: >> $('#target').lightboxFunction({options}); >> >> 2) put some generated content into a lightbox: >> $.lightboxFunction(content, {options}); >> >> 3) make an AJAX call to fetch content into a lightbox: >> $.lightboxFunction(url, {options}); >> >> You can call these from within a 'select' event handler to open a >> lightbox with whatever content you want. >> >> On Tuesday, June 26, 2012 4:42:34 AM UTC-4, Andrea Nelson Mauro wrote: >>> >>> hi asgallant, i've seen the alert box, but i'm trying to understang how >>> can i insert a lightbox function in a chart/geochart. >>> You know some example? >>> >>> Il giorno giovedì 19 aprile 2012 17:42:52 UTC+2, asgallant ha scritto: >>>> >>>> The tooltips don't support any HTML elements (yet?), so you can't put a >>>> dropdown in them. You can, however, do something like this when the user >>>> clicks on a data point, by registering a 'select' event handler. You >>>> could >>>> spawn a popup, lightbox, or other element from there containing the >>>> dropdown. >>>> >>>> On Thursday, April 19, 2012 11:19:45 AM UTC-4, cd2012 wrote: >>>>> >>>>> Hello, >>>>> I have two separate charts - a scatter chart and a line chart. On >>>>> hovering the mouse over a certain co-ordinate on any ot these, I want to >>>>> show a dropdown with 2 selections. Each selection will further go to a >>>>> new >>>>> chart - associated with the point selected. Are both these things >>>>> possible? >>>>> >>>>> I'm open to other ways of doing this as long as the requirements are >>>>> met. >>>>> Any suggestions? >>>>> >>>>> Thanks! >>>>> >>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/DXrCt7GQxqgJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
