We help IT Professionals succeed at work.

Google chart tooltip add action

I have the problem getting the column value in google chart. The data is presented in the array . From the array I need to get the value Z.

The code is below

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

	 	<script>
		

	function drawChart() {
	 	var data = new google.visualization.DataTable();
	 	//var clicktip='';
	 	
	 	
	 	data.addColumn('number', 'Month');
	 	data.addColumn('number',2017);
                data.addColumn('number',2018);
	 	
	 	
	 	//data.addColumn('number', 'sessionkey');
		//data.addColumn({role: 'tooltip', type: 'string', p: {html:true,trigger:'selection'});
		//data.addColumn({type:'string', role:'tooltip',p: {html:true}});  
		


    data.addRows([
      	
      		[{v: 3, f:'March',z:'242018'},null,8,]	,
      	
      		[{v: 6, f:'June',z:'242019'},null,13,]	,
      	
      		[{v: 7, f:'July',z:'242020'},null,10,]	,
      	
      		[{v: 11, f:'November',z:'272793'},null,5,]	,
      	
      ]);
     
    
     
    
     var options = {
        hAxis: {
            title: 'Month',
            showTextEvery: 1,
            legend: 'none',
            
            ticks: [{
                v: 1,
                f: 'Jan'
            }, {
                v: 2,
                f: 'Feb'
            }, {
                v: 3,
                f: 'Mar'
            }, {
                v: 4,
                f: 'Apr'
            }, {
                v: 5,
                f: 'May'
            }, {
                v: 6,
                f: 'Jun'
            }, {
                v: 7,
                f: 'Jul'
            }, {
                v: 8,
                f: 'Aug'
            }, {
                v: 9,
                f: 'Sep'
            }, {
                v: 10,
                f: 'Oct'
            }, {
                v: 11,
                f: 'Nov'
            }, {
                v: 12,
                f: 'Dec'
            }]
        },
          vAxis: {
         	 title: 'Participation',
         	 minValue:0
         },
         title: "Chart for School 1",
         displayAnnotations: true,
         curveType: 'function',
         pointSize: 14,
         tooltip: {isHtml: true,trigger: 'selection'},
         legend: 'none',
    }

     var chart = new google.visualization.LineChart(document.getElementById('chart2_div_1_1'));
     
    
  
  
     
     chart.draw(data, options);
  
     
     	chart.setAction({
            id: 'chart2_div_1_1',
            text: 'View Details',
            action: function() {
            	// selection  = chart.getSelection();
            	// selectedRow = selection[0].row;
            	
            	 var selectedItem = chart.getSelection()[0].row;
         alert(data.getValue(selectedItem, 0));   	 
            	  
            	  var value = data.getValue(selectedItem, 0);
            	  
            	 	alert('The user selected ' + value);
            	
            
           window.open('viewStat.cfm?sessionKey='+selectedRow);
            
            }
        });
        
    
    //google.visualization.events.addListener(chart, 'click', getsessionkey);
        
    }
   
    
    google.load("visualization", "1", {
    packages: ["corechart"]
});


google.setOnLoadCallback(drawChart);


 </script>

Open in new window

Comment
Watch Question

NorieAnalyst Assistant

Commented:
What, if anything, is being shown in the alerts?
erikTsomikSystem Architect, CF programmer

Author

Commented:
in the alert it show the values from v ellements such 3,7,11 .... And I need to figured out a way to get the values from Z elements which is 242018 or the other number

the data is here

[{v: 3, f:'March',z:'242018'},null,8,]	,
      	
      		[{v: 6, f:'June',z:'242019'},null,13,]	,
      	
      		[{v: 7, f:'July',z:'242020'},null,10,]	,
      	
      		[{v: 11, f:'November',z:'272793'},null,5,]	

Open in new window

erikTsomikSystem Architect, CF programmer

Author

Commented:
Here the link where you can see the outcome

https://jsfiddle.net/tsomik1/bL3qfjht/1/
leakim971Multitechnician
Distinguished Expert 2019

Commented:
what about : https://jsfiddle.net/39hspL87/
			window.____________rows = [
      	
      		[{v: 3, f:'March',z:'242018'},null,8,]	,
      	
      		[{v: 6, f:'June',z:'242019'},null,13,]	,
      	
      		[{v: 7, f:'July',z:'242020'},null,10,]	,
      	
      		[{v: 11, f:'November',z:'272793'},null,5,]	,
      	
      ];
      data.addRows(____________rows);

Open in new window


and use :
            	  var value = data.getValue(selectedItem, 0);
            	  
            	 	alert('The user selected z : ' + ____________rows[selectedItem][0]["z"]);

Open in new window

erikTsomikSystem Architect, CF programmer

Author

Commented:
Thank you it works perfectly. However, I am using coldfusion cfloop and output the script inside the loop, so for each iteration I produce the Script, so when I produce more than 1 chart the code get messed up

take a look here

https://jsfiddle.net/tsomik1/d2fbn47c/5/
Multitechnician
Distinguished Expert 2019
Commented:
one "way" : https://jsfiddle.net/s5nh4zr7/
check lines 1, 4, 17, 28, 109 and 122 :
var c = 0;

function drawChart() {
    (function(counter) {
        var data = new google.visualization.DataTable();
        //var clicktip='';


        data.addColumn('number', 'Month');


        data.addColumn('number',2017);data.addColumn('number',2018);
        //data.addColumn('number', 'sessionkey');
        //data.addColumn({role: 'tooltip', type: 'string', p: {html:true,trigger:'selection'});
        //data.addColumn({type:'string', role:'tooltip',p: {html:true}});

        window["____________rows"+counter] = [

            [{v: 3, f:'March',z:'242018'},null,8,]	,

            [{v: 6, f:'June',z:'242019'},null,13,]	,

            [{v: 7, f:'July',z:'242020'},null,10,]	,

            [{v: 11, f:'November',z:'272793'},null,5,]	,

        ];
        data.addRows(window["____________rows"+counter]);




        var options = {
            hAxis: {
                title: 'Month',
                showTextEvery: 1,
                legend: 'none',

                ticks: [{
                    v: 1,
                    f: 'Jan'
                }, {
                    v: 2,
                    f: 'Feb'
                }, {
                    v: 3,
                    f: 'Mar'
                }, {
                    v: 4,
                    f: 'Apr'
                }, {
                    v: 5,
                    f: 'May'
                }, {
                    v: 6,
                    f: 'Jun'
                }, {
                    v: 7,
                    f: 'Jul'
                }, {
                    v: 8,
                    f: 'Aug'
                }, {
                    v: 9,
                    f: 'Sep'
                }, {
                    v: 10,
                    f: 'Oct'
                }, {
                    v: 11,
                    f: 'Nov'
                }, {
                    v: 12,
                    f: 'Dec'
                }]
            },
            vAxis: {
                title: 'Participation',
                minValue:0
            },
            title: "Chart   2018",
            displayAnnotations: true,
            curveType: 'function',
            pointSize: 14,
            tooltip: {isHtml: true,trigger: 'selection'},
            legend: 'none',
        }

        var chart = new google.visualization.LineChart(document.getElementById('chart2_div_1_1'));





        chart.draw(data, options);


        chart.setAction({
            id: 'chart2_div_232_2018',
            text: 'View Details',
            action: function() {
                // selection  = chart.getSelection();
                // selectedRow = selection[0].row;

                var selectedItem = chart.getSelection()[0].row;
                alert(data.getValue(selectedItem, 0));
                var value = data.getValue(selectedItem, 0);

                alert('The user selected z : ' + window["____________rows"+counter][selectedItem][0]["z"]);

                //alert('Row '+selectedRow);

                //alert(selection[0].row);
                //window.open('viewStat.cfm?sessionKey='+selectedRow);
                //data.setCell(chart.getSelection()[0].row, 1,data.getValue(chart.getSelection()[0].row, 1) + 20);
            }
        });


        //google.visualization.events.addListener(chart, 'click', getsessionkey);

    })(c++);

}

Open in new window

erikTsomikSystem Architect, CF programmer

Author

Commented:
Awesome . Thank you