erikTsomik
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
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>
What, if anything, is being shown in the alerts?
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
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,]
ASKER
what about : https://jsfiddle.net/39hspL87/
and use :
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);
and use :
var value = data.getValue(selectedItem, 0);
alert('The user selected z : ' + ____________rows[selectedItem][0]["z"]);
ASKER
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/
take a look here
https://jsfiddle.net/tsomik1/d2fbn47c/5/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Awesome . Thank you