emulate hyperlink when clicking on gauge

[smre...@gmail.com]

Hi everyone,

I have a gage with a dropdown and would like to be able to click the gauge and navigate to the record that was selected from the dropdown.  I found some help on your message board about how to make a chart emulate a hyperlink and I've added the following code but it doesn't seem to do anything.  It doesn't cause an error or anything either.  It just does nothing:

    google.visualization.events.addListener(gauge1, 'select', function () {
    var selection = gauge1.getSelection();
    // selection is an array of objects with {row, column} properties,
    // use them to get data from your DataTable if you need to, ie:
    var selectedValue = gaugeData.getValue(selection[0].row, selection[0].column);
    // you can then emulate clicking a link from here
    alert('You clicked on  ' + selectedValue );
    window.location.href = "http://www.google.com/";
});

Here is a jsfiddle with all my logic.  Any advice you can offer is greatly appreciated.

http://jsfiddle.net/sremias/y9nq2bqe/3/

[Sergey Grabkovsky]

Hi,

The Gauge chart actually doesn't have support for either the getSelection() method nor the 'select' event. However, since you are only rendering one gauge chart at any given time, you don't really need to know what to render, since your DataTable will only have one row. So instead of listening for the 'select', you can just listen for the click event on the chart container. For some reason, jsfiddle won't let me post this code, but here's a snippet of what you need to write:

    

document.getElementById('gauge1').addEventListener('click', function () {

    // selection is an array of objects with {row, column} properties,

    // use them to get data from your DataTable if you need to, ie:

    var selectedValue = gauge1.getDataTable().getValue(0, 1);

    // you can then emulate clicking a link from here

    alert('You clicked on  ' + selectedValue );

    window.location.href = "http://www.google.com/";

}); 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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.

[smre...@gmail.com]

Thanks so much Sergey! That was exactly what I was looking for!  I should be able to take it from here but will let you know if I need additional help!

Have a great day!

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

[smre...@gmail.com]

Serey,

I'm not sure if you can help at this point but thought it is worth a try.  The source works beautiful within the JS Fiddle environment, but when I put it into my source code (Alpha Anywhere development environment), I get an error in IE when I run the code (Firefox does nothing. no error but doesn't recognize the click event on the gauge either):



My javascript function is EXACTLY as it is in JS Fiddle which I've also copied and pasted here:

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawTaskChart);

function drawTaskChart() {

   var chartdata = {dialog.object}._data;
 
   // Prepare the data
   var data = google.visualization.arrayToDataTable(
     chartdata
     );
       
    // set up gauge datatable
    var gaugeData = new google.visualization.DataTable();
    gaugeData.addColumn('string', 'Project');
    gaugeData.addColumn('number', 'Pct');

    var gauge1 = new google.visualization.ChartWrapper({
        chartType: 'Gauge',
        dataTable: gaugeData,
        containerId: 'charttasks',  
        options: {
            width: 200,
            height: 200,
            min: 0,
            max: 100,
            animation: {
                duration: 1000,
                easing: 'inAndOut'
            },
            redFrom: 0,
            redTo: 33,
            yellowFrom: 33,
            yellowTo: 66,
            greenFrom: 66,
            greenTo: 100,
            majorTicks: ['0', '20', '40', '60', '80', '100']
        },
        view: {
            rows: [0] // restrict to the first row only
        }
    });

    // Define category pickers for 'Project'
    var ProjectPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'Projects',
        options: {
            filterColumnLabel:'Project',
           // filterColumnIndex: 1, // filter on the 2nd column
            ui: {
                labelStacking: 'vertical',
                allowTyping: true,
                allowMultiple: false,
                caption: 'Pick a Project',
                label: 'Select a Project'
            }
        }
    });  
  
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dashboard.bind([ProjectPicker], [gauge1]);
    dashboard.draw(data);

  
    document.getElementById('gauge1').addEventListener('click', function () {
    // selection is an array of objects with {row, column} properties,
    // use them to get data from your DataTable if you need to, ie:
    var selectedValue = gauge1.getDataTable().getValue(0, 1);
    // you can then emulate clicking a link from here
    alert('You clicked on  ' + selectedValue );

//    window.location.href = "http://www.google.com/";
    });

};


Is there anything more I need to do to "register" the Listener event or do you know of anything else that might cause this or recommend how I can troubleshoot?


Thanks again.

    

document.getElementById('gauge1').addEventListener('click', function () {

    // selection is an array of objects with {row, column} properties,

    // use them to get data from your DataTable if you need to, ie:

    var selectedValue = gauge1.getDataTable().getValue(0, 1);

    // you can then emulate clicking a link from here

    alert('You clicked on  ' + selectedValue );

    window.location.href = "http://www.google.com/";

}); 

On Mon Jan 05 2015 at 11:23:25 AM <smre...@gmail.com> wrote:

Hi everyone,

I have a gage with a dropdown and would like to be able to click the gauge and navigate to the record that was selected from the dropdown.  I found some help on your message board about how to make a chart emulate a hyperlink and I've added the following code but it doesn't seem to do anything.  It doesn't cause an error or anything either.  It just does nothing:

    google.visualization.events.addListener(gauge1, 'select', function () {
    var selection = gauge1.getSelection();
    // selection is an array of objects with {row, column} properties,
    // use them to get data from your DataTable if you need to, ie:
    var selectedValue = gaugeData.getValue(selection[0].row, selection[0].column);
    // you can then emulate clicking a link from here
    alert('You clicked on  ' + selectedValue );
    window.location.href = "http://www.google.com/";
});

Here is a jsfiddle with all my logic.  Any advice you can offer is greatly appreciated.

http://jsfiddle.net/sremias/y9nq2bqe/3/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

[Sergey Grabkovsky]

What is the error you are getting in IE? And which version of IE are you trying to run this in? At which point does the error occur? And does running this in IE from the jsfiddle reproduce it?

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

[smre...@gmail.com]

I'm sorry I thought I posted a picture of the error. I am running IE v11.  And fiddle does not reproduce the error. It runs as expected in js fiddle.  Error is "unable to get property addEventListener of undefined or null reference.

[Sergey Grabkovsky]

It sounds like you don't have the 'gauge1' element at the time that the code is run. I find it pretty odd that this would occur, since google.setOnLoadCallback should only call the function when the DOM has loaded.

[smre...@gmail.com]

I'm not sure if my reply post got sent....

IE v11. jsfiddle does not reproduce error. Error is "unable to get property add EventListener of undefined or null reference as soon as I run the page.  Oddly enough, and I hadn't noticed this before, if I select YES to keep running scripts on this page, it works as expected.....so why is it throwing the error at all?

updated JS fiddle: http://jsfiddle.net/sremias/9jLvvf7c/

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

[stephanie remias]

sometimes I just need to walk away and try again later.  You are absolutely correct.  My div in my source is not called 'gauge1'.  I was confused and thought I needed to use the chart variable, not the div id.  Sorry.  Thanks again for all the help.  You got me on the right track!

--
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/dGs17vP4PLY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.