Bar Chart not displaying correct Axis titles

[Chris Randall]

Hey everyone, 

I've set up a material bar chart going off the documentation and have run in to an issue; the axis titles that are displayed aren't what I'm setting them to.

Here's my code:

function drawGoogleBarChart(parentID, width, height, json) {

    var bcd = JSON.parse(json);

    var bars = bcd.Bars;

    var colors = [];

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Name');

    for (var i = 0; i < bars[0].Segments.length; ++i) {

        data.addColumn('number', bars[0].Segments[i].Name);

        data.addColumn({ type: 'string', role: 'style' });

        colors.push(rgbToHex(bars[0].Segments[i].Color.R, bars[0].Segments[i].Color.G, bars[0].Segments[i].Color.B));

    }

    for (var i = 0; i < bars.length; ++i) {

        var row = [];

        row.push(bars[i].Label);

        for (var j = 0; j < bars[i].Segments.length; ++j) {

            row.push(bars[i].Segments[j].Count);

            row.push(rgbToHex(bars[i].Segments[j].Color.R, bars[i].Segments[j].Color.G, bars[i].Segments[j].Color.B));

        }

        data.addRow(row);

    }

    var xTitle = bcd.XAxis != null ? bcd.XAxis.Title : "";  // set to "Task Count"

    var yTitle = bcd.YAxis != null ? bcd.YAxis.Title : "";  // set to ""

    var options = {

        isStacked: true,

        animation: {

            startUp: true,

            duration: 500,

            easing: 'out'

        },

        hAxis: {

            title: xTitle,

            minValue: 0,

        },

        vAxis: {

            title: yTitle

        },

        colors: colors,

        bars: 'horizontal',

        width: width,

        height: height

    };

    var material = new google.charts.Bar(document.getElementById(parentID));

    material.draw(data, options);

}

And here's what my bar chart looks like. The vAxis, which should have no title, is set to "Name", and the hAxis, which should say "Task Count" is empty.

Many Thanks!

[Daniel LaLiberte]

Hi Chris,

You are missing the convertOptions call.  See this example:  https://jsfiddle.net/dlaliberte/jeowryh7/

--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c1477088-b0a6-40c3-98bb-eb6dbae37fae%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Chris Randall]

Awesome, thanks! 

That got the axes working correctly, but now the bars are green instead of orange. Any idea why that might be?

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA