displaying a drop down on mouseover on a line/scatter chart

233 views
Skip to first unread message

cd2012

unread,
Apr 19, 2012, 11:19:45 AM4/19/12
to google-visua...@googlegroups.com
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!

asgallant

unread,
Apr 19, 2012, 11:42:52 AM4/19/12
to google-visua...@googlegroups.com
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.

Andrea Nelson Mauro

unread,
Jun 26, 2012, 4:42:34 AM6/26/12
to google-visua...@googlegroups.com
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?

asgallant

unread,
Jun 26, 2012, 11:28:43 AM6/26/12
to google-visua...@googlegroups.com
You'll need to find a lightbox tool that you like (I use Fancybox 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.

Andrea Nelson Mauro

unread,
Jun 27, 2012, 2:20:33 PM6/27/12
to google-visua...@googlegroups.com
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>

asgallant

unread,
Jun 27, 2012, 4:01:31 PM6/27/12
to google-visua...@googlegroups.com
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(

Andrea Nelson Mauro

unread,
Jun 28, 2012, 4:27:34 AM6/28/12
to google-visua...@googlegroups.com
mm.. what about linking in parent target like #footer?

with fancybox it seems not work :)))

thanky you!

here the code


<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
            $.fancybox('http://seiadev.forumone.com/state-solar-policy/' + stateName);

asgallant

unread,
Jun 28, 2012, 10:35:33 AM6/28/12
to google-visua...@googlegroups.com
You want to put the content into "footer"?  The easy way is to add an iframe to "footer" and change the src of the iframe on click.  See it in action here: http://jsfiddle.net/asgallant/jPXmD/ 
Message has been deleted

Andrea Nelson Mauro

unread,
Jun 29, 2012, 4:15:33 AM6/29/12
to google-visua...@googlegroups.com
yep! :)

so, i can use inside a single script (like this) both js and jQuery statement?

(all right with the fancybox lib, it's nice!)

asgallant

unread,
Jun 29, 2012, 10:45:35 AM6/29/12
to google-visua...@googlegroups.com
jQuery is just a js library - it isn't a separate language, so yes, you use them together.
Reply all
Reply to author
Forward
0 new messages