Line Chart / Bar Chart - Custom Tooltip

[Swapnil Patil]

How to customize and format the Tooltip Text appearing in Line Chart
and Bar Chart.

[ChartMan]

Hi

For the time being the tooltip can not be customized. However you can use any string you like by setting it as the formatted value of the relevant data table cell.

ChartMan

On Sep 24, 2011 8:45 AM, "Swapnil Patil" <swapnil...@gmail.com> wrote:
>
> How to customize and format the Tooltip Text appearing in Line Chart
> and Bar Chart.
>

> --
> You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
> To post to this group, send email to google-visua...@googlegroups.com.
> To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
>

[Swapnil Patil]

thanks. Is there any property like Tooltip text...???

[Swapnil Patil]

Tried this one but it is also buggy.

http://code.google.com/p/gvtooltip/

I want the tool tip like this example with custom text and images in
it. It works in Mozilla with the bugs.

[asgallant]

You can set a formatted value of the text for a tooltip using either
the DataTable#setFormattedValue() method or by entering your data as
an object with the structure {v: value, f: 'formatted value'}, where v
is the nominal value of the cell and f is the string-formatted value
of the cell. If there is a formatted value, it will take the place of
the nominal value whenever the value is displayed; the nominal value
will be used only to plot the data.

[Swapnil Patil]

Thanks asgallant.

DataTable#setFormattedValue() can be used to format the values of
datatable coulmns. But I dont want X axis text at all and Yaxis values
with upper setFormattedValue. Check out this image. Tooltip text
should be like lower one.

http://www.4shared.com/photo/e1oSgzLf/chart_custom_tooltip.html

[asgallant]

There is no (easy) way to get rid of the X-axis labels in the tooltips without also getting rid of the label on the axis itself.

[Swapnil Patil]

I am successful in disabling the tool tip. But i am unable to get the
mouse over position.
I tried e.pageX, e.pageY and e.clientX, e.clientY but all of them are
undefined.
google.visualization.events.addListener(barsVisualization,'onmouseover',
barMouseOver);
google.visualization.events.addListener(barsVisualization,'onmouseout',
barMouseOut);

function barMouseOver(e) {

}

How to get the mouse over position....???

[asgallant]

If you want mouse position, you'll have to ditch the google event hooks and use standard javascript ones.  In order to do so, you'll need something that gets you access to the contents of the iframe the chart is built in; jQuery is my favorite method of doing so (and has convenient event hook functions built in):

/*  assumes that chart is your chart object
 *  hooks the 'mouseover' event of the chart div's iframe's body element
 *  
 *  set up after instantiating the chart object but before drawing it
 *  hooks on the chart's 'ready' event to prevent hooking the mouse events
 *  before the chart finishes drawing
 */
google.events.addListener(chart, 'ready', function () {
    $("#chart_div").find("iframe").contents().find("body").hover(
        function(e) {
            // mouseEnter handler (like onMouseOver, but events don't fire for sub elements)
            alert("X: " + e.pageX + "\nY: " + e.pageY);
        },
        function(e) {
            // mouseExit handler (like onMouseOut, but events don't fire for sub elements)
            alert("mouseExit");
        }
    );
});

jQuery has traditional onMouseOver and onMouseOut event handlers as well, if you prefer them.

[Swapnil Patil]

Thanks asgallant ...!! That's correct events don't fire for sub
elements but still i am trying to play with the rendered svg/vml
graphics and some how i am able to change the Tool tip text in all the
browsers except Internet explorer. As rendering pattern is bit
different for Internet explorer.
Can you please take a look at this image and tell me about the v:path
and v:textpath. which element is responsible to have tooltip text.

http://www.4shared.com/photo/WgHUOsdE/chartRendering.html

Following code helps me to change the tooltip text in other browsers
except Internet Explorer.

function barMouseOver(e) {
var row = e['row'];
var column = e['column'];
var priceval = data.getValue(e['row'], e['column']);

if (navigator.appName == 'Microsoft Internet
Explorer') {
tooltip_iframe =
window.frames[document.getElementById('visualization').firstChild.name];
tooltip_dom =
tooltip_iframe.document.getElementById('chart').firstChild.nextSibling;
???????????
}
else {
tooltip_iframe =
window.frames[document.getElementById('visualization').firstChild.name];
tooltip_dom =
tooltip_iframe.document.getElementById('chart').firstChild.nextSibling.nextSibling;
container =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling;
txt1 =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling.nextSibling;
txt2 =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
txt1.textContent = "Tooltip Text: Value 10";
txt2.textContent = "Tooltip Text:
Value";
//next textpath will show the value from data
table
}

}

[Swapnil Patil]

< http://www.4shared.com/photo/5TNqNT7n/custom_tptext.html >

[asgallant]

Oooh, you gave me a good idea for this.  This will get rid of the category label from the tooltip (though the tooltip box is now a bit awkwardly large - changing that would require quite a bit more work).  You'll need jQuery to make it work:

/*  assumes:

 *    chart is the chart object to draw

 *    'visualization' is the name of the chart's div

 *  hooks the onMouseOver function to the chart's iframe body
 *  finds the 3rd-to-last text element (the category column label in the tooltip)
 *  and sets it to an empty string
 *  fires on every sub-element in the chart, so the tooltip never shows the label

 *  

 *  call this after instantiating the chart object but before drawing the chart
 */
google.visualization.events.addListener(chart, 'ready', function() {
    $('#visualization').find('iframe').contents().find('body').mouseenter(function() {
        $(this).find('text').last().prev().prev().text('');
    });
});

You can take this further to change the rest of the tooltip.  The last text element contains the value to display and the 2nd-to-last text element contains the column label.

[Swapnil Patil]

Yes you are correct jquery would be more easy to traverse the
structure.
Following java script has been successful for to change the text.
Now converting it to jquery.
Thanks for your help and kind support. Now still there is one more
issue regarding the size of the tool tip.
If text replaced is large then the popup size doesn't expands
automatically. will have to play bit further.
Thank you very much.

function barMouseOver(e) {
var row = e['row'];
var column = e['column'];
var priceval = data.getValue(e['row'], e['column']);
if (navigator.appName == 'Microsoft Internet
Explorer') {
tooltip_iframe =
window.frames[document.getElementById('visualization').firstChild.name];
tooltip_dom =
tooltip_iframe.document.getElementById('chart').firstChild.nextSibling;

txt1 =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling.nextSibling.lastChild;
txt2 =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.lastChild;
txt1.string = "Custom Tooltip Text: 10";
txt2.string = "Custom Tooltip Text:";
alert('edjhf');

}
else {
tooltip_iframe =
window.frames[document.getElementById('visualization').firstChild.name];
tooltip_dom =
tooltip_iframe.document.getElementById('chart').firstChild.nextSibling.nextSibling;
container =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling;
txt1 =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling.nextSibling;
txt2 =
tooltip_dom.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling;

txt1.textContent = "Custom Tooltip Text: 10";
txt2.textContent = "Custom Tooltip
Text2:";
}

}