A column chart with multicolor bars

[Andrea]

Hi everybody,

I need to draw a Column Chart choosing the color of every bar,
like here: http://code.google.com/apis/ajax/playground/?type=visualization#image_multicolor_bar_chart.

I'm drawing the chart by google.visualization.ChartWrapper technique,
so I'm passing to Constructor 'chartType' : 'ColumnChart'. If I try to
follow the example above, passing to Constructor 'chartType' : 'bvs',
my chart doesn't work.

Is there a way to draw a multicolor bar chart, using ChartWrapper?

Thanks.

[Roni Biran]

Here is a brand new sample, under: http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper

function drawVisualization() {
  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries', 'colors':['red','blue','green']},
    containerId: 'visualization'
  });
  wrapper.draw();
}
​

For coloring scheme, change and fill the colors array.

Good luck,

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

Be aware that colors in the interactive charts are assigned by series (column in the DataTable).  You cannot have a single series with more than one color for the bars, but there are tricks to work around the problem if you need to.

[Jinji]

The code sample at http://code.google.com/apis/ajax/playground/?type=visualization#image_multicolor_bar_chart uses ImageChart, not ColumnChart. It can be confusing, but image charts are wrappers around the Image Chart API (http://code.google.com/apis/chart/image/) which are a completely different beast than the Javascript Visualization API. For the JS API, as Drew wrote, colors are assigned by series. You can use a stacked ColumnChart where the number of columns (series) is the same as the number of bars, and in each series put the value in a different location. Something like:

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

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

  data.addColumn('number', '');

  data.addColumn('number', '');

  data.addColumn('number', '');

  data.addRow(['Danny', 3.7, 0, 0]);

  data.addRow(['Betty', 0, 4.1, 0]);

  data.addRow(['Miles', 0, 0, 4.8]);

On Thu, Oct 6, 2011 at 5:36 PM, asgallant <drew_g...@abtassoc.com> wrote:

Be aware that colors in the interactive charts are assigned by series (column in the DataTable).  You cannot have a single series with more than one color for the bars, but there are tricks to work around the problem if you need to.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/PNcgk6v8P-MJ.