Annotation above stacked columns? Simple way to add additional line to tooltip with same information?

245 views
Skip to first unread message

Bryan Maloney

unread,
Aug 26, 2014, 11:18:54 AM8/26/14
to google-visua...@googlegroups.com

I have the following chart (which was done with a great deal of help from the team in this community):




What I would like to do is either add annotations that are above each stacked column or add a new line (or lines) to the tooltip that preserves what the tooltip currently shows AND shows the new information. The information would eventually be the sum of the stacked columns, MSE of the sum, and a statistical category, but a dummy tooltip or annotation could have anything. I've read through the tooltip and annotation documentation, and this is as far as I've been able to get. I don't want the annotations connected to the stacks by a line if they are annotations. A tooltip would be preferred, since it would make for a cleaner chart.

Andrew Gallant

unread,
Aug 26, 2014, 7:02:43 PM8/26/14
to google-visua...@googlegroups.com
If you add a new series that is the sum of the previous series, you can plot them all on a ComboChart, using "bars" series for the columns and a "line" series for the total.  You can make the line invisible by setting the line series' lineWidth and pointSize options to 0.  Setting the line series' enableInteractivity option to false prevents the user from interacting with the points.  Setting the line series' visibleInLegend option to false hides the series from the legend.  These combined will result in a Total line appearing in your tooltips: http://jsfiddle.net/asgallant/s7040rms/6/

Bryan Maloney

unread,
Aug 27, 2014, 9:34:51 AM8/27/14
to google-visua...@googlegroups.com

That re-introduced a problem that I had previously solved. I did not want to show the interval figures, since they're fudged calculations to get around a bug in the API. What I had done was able to mask that. Likewise, I don't want to show a bazillion decimal places in the total. Also, how do I add column-specific text to this as well?

Bryan Maloney

unread,
Aug 27, 2014, 9:39:55 AM8/27/14
to google-visua...@googlegroups.com

Never mind, I think I fixed it.

Bryan Maloney

unread,
Aug 27, 2014, 11:02:05 AM8/27/14
to google-visua...@googlegroups.com

So, next question. How do I put annotations above the total stacks, clear of the interval bars, and not attached to the stack by any sort of line?


Andrew Gallant

unread,
Aug 27, 2014, 7:59:45 PM8/27/14
to google-visua...@googlegroups.com
That requires adjusting the line hack.  You can move the points by changing their value, while keeping your formatted value the same to keep the tooltips correct.  Add an annotation column after this one to get the labels to display.  You cannot make the leader lines go away, but you can hide them behind the interval lines.  Fiddle with the "offset" variable in the line series calculation to find something that works for you.

{
    type: 'number',
    label: 'Total',
    calc: function(data, row) {
        var total = calculateSum(data, row, 1, 5);
        var intervalMax = data.getValue(row, 7);
        var offset = -1.1; // fiddle with this value to get something that works right for you
        return {
            v: intervalMax + offset,
            f: total.toFixed(3) // set whatever precision you want displayed here
        };
    }
}, {
    type: 'string',
    role: 'annotation',
    calc: function(data, row) {
        return calculateSum(data, row, 1, 5).toFixed(3);
    }
}

Also, you can get around the bug in the intervals by basing them off the line series instead of the columns - just put the column indices for the intervals after the line series and annotation column: http://jsfiddle.net/s7040rms/15/.  Doing so changes where the values appear in the tooltip (next to the Total instead of Workplace), but since it looks like these are based off the total anyway, that's probably a good thing.
Reply all
Reply to author
Forward
0 new messages