Get Selection from table and Set Selection to graph.

[Jeffrey Walther]

I am using a dashboard with a chartwrappers to create a data table and
a bar chart. What I want to have happen is when some selects a row it
highlights the bar on the bar graph. Here is my Javascript.


<script type="text/javascript" src="../javascript/jPointLoader.js"></
script>
<script type="text/javascript" src="https://www.google.com/jsapi"></
script>

<div id="arrData"></div>

<div id="dashboard_div">
<div id="tableFilter_div"></div>
<div id="table_div"></div>
<div id="column_div" style="width=100%; height=200px"></div>
</div>

<script type="text/javascript">
// this is the dashboard example of Andy
// Get Sharepoint List Data
var siteurl = "https://sharepoint.verio.net/Depts/CustomerCare/
BusIntel";
var listname = "JeffTester";
var fieldarray =
["Timestamp","CallsAnswered","CallsAnsweredAfterThreshold","CallsAbandoned","CallsAnsweredDelay","TalkTime","LinkTitle","Day"];
var mylist = jP.Lists.setSPObject(siteurl, listname);
//var qry = "<Where><Eq><FieldRef Name='LinkTitle' /><Value
Type='Text'>AT&amp;T</Value></Eq></Where><OrderBy><FieldRef Name='ID'
Ascending='True' /></OrderBy>";
var qry = "<OrderBy><FieldRef Name='ID' Ascending='True' /></
OrderBy>";

mylist.getSPItemsWithQuery(qry);
var myitems = mylist.getItemsFieldData(fieldarray);


// Load the Visualization API and the controls package.
google.load('visualization', '1.1', {'packages':['controls']});

// Callback that creates and populates a data table,
function drawDashboard() {

// Create our data table.
var tab_data = new google.visualization.DataTable();
tab_data.addColumn('date', 'Date');
tab_data.addColumn('number', 'Calls Answered');
tab_data.addColumn('number', 'Calls Answered>120');
tab_data.addColumn('number', 'Call Answer Delay');
tab_data.addColumn('number', 'Talk Time');
//tab_data.addColumn('string', 'SkillGroup');

$.each(myitems, function(i, myitem) {
//$("#arrData").append(i + " : " + myitem.Timestamp + "<br/
>");
tab_data.addRow([
new Date(myitem.Day),
Number(myitem.CallsAnswered),
Number(myitem.CallsAnsweredAfterThreshold),
Number(myitem.CallsAnsweredDelay),
Number(myitem['TalkTime'])
]);
});

//$.each(jP.Lists.DAILYGRAPHS.Fields, function(i, column) {
// $("#arrData").append(i + " : " + column + "<br/>");
//});

// Format the date column
var date_formatter = new google.visualization.DateFormat({pattern:
'MMM dd-yy'});
date_formatter.format(tab_data, 0);

// Get a smaller view
//var chart_data = new google.visualization.DataView(tab_data);
//chart_data.setColumns([0,2,4,8]);


// Define a category picker control for the SkillGroup column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'tableFilter_div',
'options': {
'filterColumnLabel': 'Date',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});

// Define a table
var mytable = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
'width': '100%'
}
}); // Define a Column chart
var mycolumn = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'column_div',
'options': {
'width': '500px',
'height': '400px'
},
'view': {'columns': [0,1,2]}
});

// Create the dashboard
new
google.visualization.Dashboard(document.getElementById('dashboard_div')).
// Establish bindings, declaring the category
// picker will drive both charts.
bind([categoryPicker], [mytable, mycolumn]).
// Draw the entire dashboard.
draw(tab_data);
google.visualization.events.addListener(mytable, 'select',
selectHandler);
} // end drawDashboard
function selectHandler() {
alert('works');

var selection = mytable.getChart().getSelection();
alert('does not work');

for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
} else if (item.row != null) {
message += '{row:' + item.row + '}';
} else if (item.column != null) {
message += '{column:' + item.column + '}';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + message);
}

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
</script>

The First alert in function selectHandler() will pop up, but the one
following the var declaration does not. I am assuming this means that
I am getting an error with var selection=
mytable.getChart().getSelection(); and so it aborts the function. I've
copied the code from the chartwrapper example, but it does not seem to
work. Is there another method that I can use?

[asgallant]

You declared "mytable" locally in drawDashboard(), so it doesn't exist for selectHandler.  I find it is much more convenient to pass the event handler function directly, rather than by reference; that way it can access all your chart-related objects without having to declare them globally:

google.visualization.events.addListener(mytable, 'select', function () {
     // code to handle select events

});

[Jeffrey Walther]

Thanks for pointing that out, I completely overlooked that.
My next problem is when I select the table I want it to trigger the
mouseover event for the chart. It does set the chart selection, but it
doesn't highlight the bars and pop up the tool tip.

[asgallant]

That's a missing feature.  All of the charts are supposed to have a visual indication when setSelection is called, but many do not.  Make a feature request here, and maybe the dev team will add it some day.