Is it possible to add annotation to a bar chart with two entries?

56 views
Skip to first unread message

Captain Gordon Freeman

unread,
Mar 13, 2014, 3:03:26 PM3/13/14
to google-visua...@googlegroups.com
I'm looking to setup a bar chart like the first one on this page but also have it setup so the values display on the bars themselves. I have attempted to set it up but it doesn't quite work properly. Here's what I've got for the code: 

var data = google.visualization.arrayToDataTable([
            ["Section", "Number1", "Number2", { role: "style" }, { role: 'annotation' }, { role: 'annotation' }],
            ["Section 1", 3, 5, "blue", 3, 5],
            ["Section 2", 30.00, 50.00, "red", 30.00, 50.00],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
                        {
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation",
                            role: "annotation",
                        },
                        2]);

    var options = {
        title: "TEST CHART",
        legend: { position: "none" },
        hAxis: {
            ticks: null,
            direction: 1,
        },
        enableInteractivity: false,
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart'));
    chart.draw(data, options);

This setup works fine if I only have one bar per row but if I add a second bar it stops working. Is there a reason for this?

asgallant

unread,
Mar 13, 2014, 3:20:48 PM3/13/14
to google-visua...@googlegroups.com
Is this what you are looking for?  http://jsfiddle.net/asgallant/aFs9x/

Captain Gordon Freeman

unread,
Mar 13, 2014, 3:45:24 PM3/13/14
to google-visua...@googlegroups.com
Yes, that is exactly what I am looking for! Thank you asgallant!

I do have one additional question if you don't mind. Is it possible to set the color of the bars?

asgallant

unread,
Mar 13, 2014, 4:03:38 PM3/13/14
to google-visua...@googlegroups.com
You can set the color by series or by bar.  To set the series colors, either set the "colors" option (which takes an array of colors to apply to the series) or set the series.<series index>.color options.  If you want to color bar individually, you can use the "style" role column, like the example; you need to have one style column for each data series that you want to change the bar colors of.  Here are examples of each of the three methods: colors option, series option, style role column.

Captain Gordon Freeman

unread,
Mar 13, 2014, 4:17:35 PM3/13/14
to google-visua...@googlegroups.com
Thank you very much for all your assistance, asgallant!
Reply all
Reply to author
Forward
0 new messages