The hyperlink select handler is easy to fix: your chart is contained in the
"bar" variable, not the "chart" variable, so you need to change that to:
var selectHandler = function(e) {
window.location =
data.getValue(bar.getChart().getSelection()[0]['row'], 3);
}
// Add our selection handler.
google.visualization.events.addListener(bar, 'select', selectHandler);
As for the tooltips, the only way to get those the way you want is to use
custom HTML tooltips. Perhaps, the easiest way to do this would be to add
another column of data to the table, which contains the full name of the
type (eg "Force Air Cooler" for the "FAC" row), and then use calculated
columns to build the tooltips:
var data = google.visualization.arrayToDataTable([
['Type', 'Sealed', 'Watts', 'Slots', 'Link', 'Full Type Name'],
['FAC' , 'NO', 400, 5,'http://www.yahoo.co.uk', 'Forced Air Cooler'],
['S', 'YES', 400, 5,'http://www.yahoo.co.uk', 'Sealed'],
['SEF', 'YES', 400, 5,'http://www.yahoo.co.uk', 'SEF type name'],
['HES', 'YES', 575, 5,'http://www.yahoo.co.uk', 'HES type name'],
['SIXHEX', 'YES', 575, 5,'http://www.yahoo.co.uk', 'SIXHEX type name'],
['SIXHEX-HP', 'YES', 575, 5,'http://www.yahoo.co.uk', 'SIXHEX-HP type
name'],
['FAC' , 'NO', 500, 7,'http://www.yahoo.co.uk', 'Forced Air Cooler'],
['S', 'YES', 500, 7,'http://www.yahoo.co.uk', 'Sealed'],
['SEF', 'YES', 500, 7,'http://www.yahoo.co.uk', 'SEF type name'],
['HES', 'YES', 825, 7,'http://www.yahoo.co.uk', 'HES type name'],
['SIXHEX', 'YES', 825, 7,'http://www.yahoo.co.uk', 'SIXHEX type name'],
['SIXHEX-HP', 'YES', 825, 7,'http://www.yahoo.co.uk', 'SIXHEX-HP type
name'],
['FAC', 'NO', 1050, 12,'http://www.yahoo.co.uk', 'Forced Air Cooler'],
['S', 'YES', 1050, 12,'http://www.yahoo.co.uk', 'Sealed'],
['SEF', 'YES', 1050, 12,'http://www.yahoo.co.uk', 'SEF type name'],
['HES', 'YES', 1550, 12,'http://www.yahoo.co.uk', 'HES type name'],
['SIXHEX', 'YES', 1550, 12,'http://www.yahoo.co.uk', 'SIXHEX type
name'],
['SIXHEX-HP', 'YES', 1550, 12,'http://www.yahoo.co.uk', 'SIXHEX-HP type
name']
]);
and the chart's "view" parameter would be this:
view: {
columns: [0, {
type: 'number',
label: '5 Slot',
calc: function (dt, row) {
return (dt.getValue(row, 3) == 5) ? dt.getValue(row, 2) : null;
}
}, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
return (dt.getValue(row, 3) == 5) ? '<div
class="chartTooltip"><span class="tooltipHeader">' + dt.getValue(row, 5) +
'</span><br /><span class="tooltipValue">' + dt.getValue(row, 2) + ' Watts
Max</span></div>' : null;
}
}, {
type: 'number',
label: '7 Slot',
calc: function (dt, row) {
return (dt.getValue(row, 3) == 7) ? dt.getValue(row, 2) : null;
}
}, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
return (dt.getValue(row, 3) == 7) ? '<div
class="chartTooltip"><span class="tooltipHeader">' + dt.getValue(row, 5) +
'</span><br /><span class="tooltipValue">' + dt.getValue(row, 2) + ' Watts
Max</span>"</div>' : null;
}
}, {
type: 'number',
label: '12 Slot',
calc: function (dt, row) {
return (dt.getValue(row, 3) == 12) ? dt.getValue(row, 2) : null;
}
}, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
return (dt.getValue(row, 3) == 12) ? '<div
class="chartTooltip"><span class="tooltipHeader">' + dt.getValue(row, 5) +
'</span><br /><span class="tooltipValue">' + dt.getValue(row, 2) + ' Watts
Max</span>"</div>' : null;
}
}]
}
Then set the chart's tooltip.isHtml option to true. See it all working
here: http://jsfiddle.net/asgallant/8Cja2/. With this method, you can
style the tooltip with the .chartTooltip, .tooltipHeader, and .tooltipValue
classes to fit your needs (or adjust the HTML if you'd like it done a
different way - pretty much anything goes here).
On Wednesday, March 27, 2013 7:01:34 AM UTC-4, George Fasal wrote:
>
> *http://www.verdegia.com/3.jpg
>
> *
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
