x axis label for Chart wrapper

[Raji]

The chart wrapper meets my needs of having multi colored single column charts.

https://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper

2 questions:

1. How can I label the x axis to show "Germany", "USA", "Brazil" etc

2. How can I increase the space between the charts

Thanks,

Raji

[asgallant]

There are two things in play here:

1) bars are colored by data series, so every color needs its own column in the DataTable

2) labels are generated for each row in the DataTable

Here's an example that takes a DataTable with country name and value columns and turns it into the chart you are looking for: http://jsfiddle.net/asgallant/zwPuU/

[Raji]

Yes, this is exactly what I am looking for, thank you!!

[Raji]

I don't know why it does it have to be so many steps though.. seems like a straight forward requirement.. :)

[asgallant]

The API wasn't designed to make bars of a single series different colors.  This is just a hack that I wrote to get around the problem.

[Raji]

Thank you, it has helped me!

[asgallant]

You're welcome.

[Raji]

I have 2 more questions - not sure if I should start new thread or continue here since its custom code:

1. Can I get rid of the legend on the right side since the x axis labels are in place?

2. Is it possible to include the percentage at the top of each column?

Thanks in advance,

Raji

[asgallant]

You can get rid of the legend by setting the legend.position option to "none".  There is no way to add value labels (percentage or otherwise) to the columns, though.  There is a feature request for this here, you can help bump up it's priority by voting for it (click the star in the upper left).

[Raji]

Thank you! 

[Raji]

One more question- 

Is it possible to add '%' symbol to each column mouse over value? Eg. on mouseover the chart, it should read 90% instead of 90. Can this be done?

Thanks!

[asgallant]

Use a NumberFormatter on the DataTable column.

[Raji]

Thanks, should this have worked from your code http://jsfiddle.net/asgallant/zwPuU/ ?

function drawChart() {
     var formatter = new google.visualization.NumberFormat({suffix: '%'});

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addRows([
        ['Germany', 700],
        ['USA', 300],
        ['Brazil', 400],
        ['Canada', 500],
        ['France', 600],
        ['Russia', 800]
    ]);
    
    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable:  formatter.format(data, 1),
        options: {
            // setting the "isStacked" option to true fixes the spacing problem
            isStacked: true,
            height: 300,
            width: 600
        }

[asgallant]

The formatter doesn't return a DataTable, it modifies an existing DataTable.  You would use it like this: http://jsfiddle.net/asgallant/zwPuU/1/

Incidentally, you have to make an adjustment to the view used by the chart, too, to pass the formatted value of the data along with the raw value of the data.

[Raji]

thanks, could you explain to me what the following code does?

 columns: [0, {
                type: 'number',
                label: 'Germany',
                calc: function (dt, row) {
                    return (dt.getValue(row, 0) == 'Germany') ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null;

I could not figure out where dt, row etc are defined. 

I am thinking of hiding the "Germany:" etc in the second line, but cannot locate it in the code.

[asgallant]

The view.columns parameter takes an array of column definitions to use.  Each element in the array is either a column index in the base table, or an object which tells the chart how to build the column.  In this case, the first element is a reference to the first column in the DataTable.  The second element is an object describing a column of type "number", with the label "Germany", and a calculation function that populates the column with data.

The calculation function takes two parameters, a DataTable (represented by the variable "dt") and a row index (represented by the variable "row").  When the chart attempts to draw, it will attempt to calculate all of the rows necessary to draw the chart.  For each row, the calculation function will be called, and provided with the base DataTable (as provided by the "dataTable" chart parameter) and the row index.

In this case, the function checks the value in the DataTable (dt) at (row, 0) to see if it matches "Germany".  If it does, then the function returns an object with two properties: v, the value at (row, 0); and f, the formatted value at (row, 0).  If it does not match, then the function returns null.  The syntax used here is called a ternary operator, and generally works in the form (condition) ? value if true : value if false.  You can think of it as a one-line if statement, most frequently used (in my experience) for assigning values in binary situations.  Here, it is shorthand for this:

if (dt.getValue(row, 0) == 'Germany') {
    return {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)};
}
else {
    return null;
}

Is that clear?