google charts data point onclick lightbox

[Ananya Ojha]

i am using google charts, for every data points(circles) I want to be able to click on that and open a light box showing some data. Can anybody help?

[Andrew Gallant]

You need to use a "select" event handler for the chart:

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    // selection is an array of objects
    // iterate over the array in case there are zero (an element was deselected) or multiple selections
    for (var i = 0; i < selection.length; i++) {
        // selection[i].row is the row index, if row is null, then the user clicked on the legend
        // selection[i].column is the column index, if column is null, then the user clicked on a domain axis label

        // do something with selected element
    }
});

[Ananya]

Thank you.. Let me try with this code..

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ABVKGd0YOzg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Warm Regards...
      Ananya Ojha

[Ananya]

My code is : 

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart(result) {

        

        var data = new google.visualization.DataTable();

        data.addColumn('date', 'Date');

        data.addColumn('timeofday','Time');

        data.addColumn({type: 'string', role: 'tooltip'});

        

        var jsonResult = jQuery.parseJSON(result);

        var resultQuery = jsonResult.length;

        

            $.each(jsonResult, function(k, v) {

                var d = new Date(v.timestart);

data.addRow([new Date(d.getFullYear(), d.getMonth(), d.getDate()), [d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()],v.file]);

            });

            var options = {

                legend: 'none',

                vAxis: {

                    title: "Time",

                    titleTextStyle: {italic: false},

                    format: 'HH:mm',

                    gridlines: {

                        color: 'transparent'

                    }

                },

                hAxis: {

                    title: "Date",

                    titleTextStyle: {italic: false},

                    gridlines: {

                        color: 'transparent'

                    }

                },

                explorer: { 

                    actions: ['dragToZoom', 'rightClickToReset']

                }

                /*explorer: {

                    maxZoomOut:2,

                    keepInBounds: true

                }*/

            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

            chart.draw(data, options);

            return resultQuery;

}

WHere to put the code that you have mentioned?

[Andrew Gallant]

Add it in between the lines creating the chart and drawing the chart:

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

google.visualization.events.addListener(chart, 'select', function () {

    var selection = chart.getSelection();
    // selection is an array of objects
    // iterate over the array in case there are zero (an element was deselected) or multiple selections
    for (var i = 0; i < selection.length; i++) {
        // selection[i].row is the row index, if row is null, then the user clicked on the legend
        // selection[i].column is the column index, if column is null, then the user clicked on a domain axis label

        // do something with selected element
    }
});

chart.draw(data, options);

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Warm Regards...
      Ananya Ojha

[Ananya]

Thank you...

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.