Link to home
Start Free TrialLog in
Avatar of erikTsomik
erikTsomikFlag for United States of America

asked on

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

Avatar of Norie
Norie

What, if anything, is being shown in the alerts?
Avatar of erikTsomik

ASKER

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

Here the link where you can see the outcome

https://jsfiddle.net/tsomik1/bL3qfjht/1/
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

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/
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Awesome . Thank you