Google chart tooltip add action

erikTsomik
erikTsomik used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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/
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

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
Top Expert 2014
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial