Sushant Bajracharya Sushant Bajracharya - 5 months ago 41
jQuery Question

Show different data when clicked on a part of stacked column chart

var data_arr = [];
var header = ['Location',
'Online', {
role: 'tooltip',
type: 'string',
p: {
html: true
}
},
'Offline', {
role: 'tooltip',
type: 'string',
p: {
html: true
}
},
'Stale', {
role: 'tooltip',
type: 'string',
p: {
html: true
}
},
'Never Reported', {
role: 'tooltip',
type: 'string',
p: {
html: true
}
}, {
type: 'number',
role: 'annotation'
}
];
data_arr.push(header);
debugger
$.each(status_by_location, function(k, v) {
var temp = [];
// v.online_gateway_count = 1;
// v.offline_gateway_count = 1;
// v.stale_gateway_count = 1;
// v.never_reported_gateway_count = 1;

temp.push(k);
temp.push(v.online_gateway_count);
temp.push(v.online_gateway_datasources.join("<br>"));
temp.push(v.offline_gateway_count);
temp.push(v.offline_gateway_datasources.join("<br>"));
temp.push(v.stale_gateway_count);
temp.push(v.stale_gateway_datasources.join("<br>"));
temp.push(v.never_reported_gateway_count);
temp.push(v.never_reported_gateway_datasources.join("<br>"));
var total_for_each_bar = v.online_gateway_count + v.offline_gateway_count + v.stale_gateway_count + v.never_reported_gateway_count;
temp.push(total_for_each_bar);

data_arr.push(temp);
});
var data = google.visualization.arrayToDataTable(data_arr);


var options = {
isStacked: true,
title: 'Gateway Info By Location',
vAxis: {
title: ''
},
hAxis: {
title: 'Location'
},
seriesType: 'bars',
series: {
5: {
type: 'line',
lineWidth: 0
}
},
tooltip: {
isHtml: true,
trigger: 'selection'
}
// legend: {position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}
};

var test = new google.visualization.ComboChart(document.getElementById('chart_div'));
test.draw(data, options);
google.visualization.events.addListener(test, 'select', selectHandler);

function selectHandler(e) {
var selectedItem = test.getSelection()[0];
if (selectedItem != undefined && selectedItem.row != null) {
// gets the location in x axis
var loc_bar = data.getValue(selectedItem.row, 0);
var value = data.getValue(selectedItem.row, selectedItem.column);
}
}
}


This is all the code. Now I need to show the data related with the yellow bar when clicked on it. suppose i clicked on the yellow bar of first bar then it should show data of it but if i click on the yellow bar of second bar then it should show data regarding it. any idea how to solve this?

enter image description here

Answer

any event handlers must be assigned before drawing the chart

also, recommend testing the length of the selection, before accessing the array elements

the 'select' event is fired both when a bar is selected and de-selected
getSelection returs an empty array on the latter

also, nothing is passed to the event when it is fired
e won't exist --> selectHandler(e)

see following snippet...

var test = new google.visualization.ComboChart(document.getElementById('chart_div'));

google.visualization.events.addListener(test, 'select', selectHandler);
function selectHandler() {
  var selection = test.getSelection();
  if (selection.length > 0) {
    var loc_bar = data.getValue(selection[0].row, 0);
    var value = data.getValue(selection[0].row, selection[0].column);
    var tooltip = data.getValue(selection[0].row, selection[0].column + 1);
    var columnName = data.getColumnLabel(selection[0].column);
  }
}

test.draw(data, options);