Bar Chart without labels and different colors.

[Filipe La Ruina]

Hey Guys, I'm using the google chart API for the first time.
I'm trying to build a chart without any labels on it and each bar has to have a different color.
The current code I got, trying to do it in the Code Playground is like this:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', '');
  data.addColumn('number', 'Numbers');

  data.addRows(5);

  data.setValue(0, 1, 1000);
  data.setValue(1, 1, 1170);
  data.setValue(2, 1, 660);
  data.setValue(3, 1, 1030);
  data.setValue(4, 1, 1030);
  
  var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(data, {width: 400, height: 240, legend: 'none', gridlineColor: '#fff',
                    hAxis: {},
                    vAxis: {baselineColor: '#ccc'}
                   });
}

Well, I can't get rid of the numbers on the vertical axis and I need each column to be of a different color.
Just to make it clear, I don't need labels because the graphic "legend" will be somewhere else, and the colors will be the visual explanation of the graphic.

Thanks for the help guys,

Filipe La Ruina

[asgallant]

Bars are (unfortunately) colored by series only, so you have to make one column per bar.  You can turn off the axes by setting the 'textPosition' parameter of the 'hAxis' and 'vAxis' options to 'none'

For example:

function drawChart() {

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

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

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

     data.addRows([

          ["", 1000, 1170, 660, 1030, 1030]

     ]);

     var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
     chart.draw(data, {
          width: 400,

          height: 240,

          legend: 'none',

          gridlineColor: '#fff',

          hAxis: {

               textPosition: 'none'

          },

          vAxis: {

               textPosition: 'none',

               baselineColor: '#ccc'

          }

     });

} 

[Filipe La Ruina]

Thanks a lot! I was already thinking it wasn't possible to remove the hAxis label.
Probably when I tried the textPosition option there was something else setting it on again.
Also, since the only way of doing multiple colors is by adding columns is there a way of increasing the distance between them?

Thanks again!
Filipe La Ruina

[asgallant]

There is no direct means of changing the size or spacing of the bars.  Distance and spacing scales automatically with number of columns, number of rows, chart width, and chartArea width.  Since you are not using axis labels or a legend, it's probably a good idea to set your chartArea to the same size as your chart.  You can also use multiple rows and multiple columns with the isStacked option to space the bars out more.  In each row, assign only 1 column (different for each row) a value and zero out all the others.  This is probably more like what you want:

function drawVisualization() {

     var data = new google.visualization.DataTable();
     data.addColumn('string', '');
     data.addColumn('number', 'Numbers');
     data.addColumn('number', 'Numbers');
     data.addColumn('number', 'Numbers');
     data.addColumn('number', 'Numbers');
     data.addColumn('number', 'Numbers');
     data.addRows([

          ["", 1000, 0, 0, 0, 0],
          ["", 0, 1170, 0, 0, 0],
          ["", 0, 0, 660, 0, 0],
          ["", 0, 0, 0, 1030, 0],
          ["", 0, 0, 0, 0, 1030]

     ]);

     var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
     chart.draw(data, {
          width: 400,
          height: 240,
          legend: 'none',
          gridlineColor: '#fff',

          isStacked: true,
          chartArea: {
               top: 0,
               left: 0,
               width: 400,
               height: 240

[Filipe La Ruina]

Thanks a lot man, I was trying to do that by adding new empty columns but the space between the columns was too big.
The stacked type nailed it! Thanks!!

Filipe La Ruina