Stack columns. Issues with custom tooltip.

[Nicolas Fortin]

Hi,

All my questions/problems are related to this Codepen where I developed a stacked column bar chart.

http://codepen.io/anon/pen/xLIuB 

Issue 1 :

I might have found a bug on custom tooltips. As you can see, for small groups (the ones where the there is not enoght space to put the annotation) the custom tooltip is not applied. Is there a way to solve it ?

Issue 2:

I don't understand why the HTML tooltip isn't enabled even if I followed the documentation. https://developers.google.com/chart/interactive/docs/customizing_tooltip_content?hl=fr

Issue 3:

As you can see, it's absolutly impossible to click on the tooltip action because the tooltip is too far. Is there something to fix it ?

Question:

I will need to hide/show series by clicking on the legend. Is there something not documented to do it ? I found this way http://jsfiddle.net/asgallant/6gz2Q/ but it's a bit ugly.

Advices appreciated :

I take any advice to simply the google chart related code. Specially for formatting because it's seems that we have to format interger to get (X,XXX.X values format) even if the language is set to en. Am I right ?

Don't worry about the javascritp syntax, it will be rewritten when I will integrate it in my application. This is just a mock.

--

Thank you :)

[Nicolas Fortin]

The issue 1 seems to be due to annotations. When I disabled them, all custom tooltips are rendered.

[Andrew Gallant]

1 does indeed appear to be a bug.

2 is because you are specifying the calculated column's properties incorrectly.  The object key should be "properties" not "p":

cols.push({ 

    calc: createTooltip(i),

    type: "string",

    role: "tooltip",

    properties: {html: true}

});

Tooltip actions are incompatible with HTML tooltips, however, you can recreate them in the HTML itself.

3, you need to specify the tooltip.trigger option to either be "selection" or "both", and then click on the bars to select a data point.  The tooltip will stay in place when you mouse away from the bar, so you can click on things in the tooltip.

Showing/hiding series by clicking on the legend is not supported by the API; you have to use something like the hack that I wrote to accomplish it.  Yes, it is ugly, but it works.

There is no single standard for formatting numbers in any given locale (beyond what characters to use for grouping and what to use for the decimal separator), so the API defaults to no formatting.  "#,###.##" might be common in English-speaking locales, but it is no more standard than "####.##" is.  You don't have to handle the formatting in javascript, though; you can handle it server-side and pass the formatted values along-side the base values when constructing the DataTable:

var data = [

    ['API Category', 'Social', 'Music', 'File Sharing', 'Storage', 'Weather'],

    ['2011', {v: 9000, f: '9,000'}, {v: 5300, f: '5,300'}, {v: 1200, f: '1,200'}, {v: 1600, f: '1,600'}, {v: 6000, f: '6,000'} ],

    ['2012', {v: 1005, f: '1,005'}, {v: 3400, f: '3,400'}, {v: 2600, f: '2,600'}, {v: 3600, f: '3,600'}, {v: 4009, f: '4,009'} ],

    ['2013', {v: 6009, f: '6,009'}, {v: 2700, f: '2,700'}, {v: 2200, f: '2,200'}, {v: 1000, f: '1,000'}, {v: 1500, f: '1,500'} ]

];

then you don't need to use a formatter at all.  Incidentally, when you have formatted data, you don't need to call the formatter again to get the formatted value, you can just ask for it from the DataTable:

function createTooltip(col){

    return function(dataTable, row){

        var html = "<div></div>"; // this will create an empty div at the start of your tooltip - is that what you want?

        html += aggregates[0] + ": " + dataTable.getColumnLabel(col) + "\n";

        html += aggregates[1] + ": " + dataTable.getValue(row, 0) + "\n";

        html += metrics[0] + ": " + dataTable.getFormattedValue(row, col) + "\n"; // don't need to use a formatter here

        return html;

    };

}

[Nicolas Fortin]

First, thx for all your answers and your advice for createTooltip function :)

The data I get from the API is not formatted as Google Charts expect but I found a way to do it nicely :p

[Nicolas Fortin]

I copied your anwser on Stackoverflow http://stackoverflow.com/questions/25625033/google-visualization-stack-columns-issues-with-html-custom-tooltips/25687093#25687093

Hope your are ok with it :p