How to change the bar colors in the columnchart..

[Surya]

Heps,

I am really stuck up with this for a while and need the help asap.

I want to have different colors for different bars in the columnchart.
There is a provision to change the color of all the bars using colors:
option but i want different colors for different bars..

for instance in the example referred in the url...
http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html

for 2004 two bards are shown in blue and red and the same for other
years.. but my requirement is to have blue color (both the bars ) in
2004. red for both bars for 2005 and green for 2006 and red for 2007.

How can i achieve this??
Pl help me ..

Even if there is any alternative also pl suggest..

~Surya~

[asgallant]

There is a way to hack around the problem which has been discussed extensively on this forum (search for 'bar colors'), ex: https://groups.google.com/d/msg/google-visualization-api/BPNbQ3GKCdg/R-7P0RwBOq8J

[Roni Biran]

i wrote you a nice hack that will do the trick.

I think that it's self explanatory, but if you'll have any questions feel free to ask:

here is the JavaScript for it:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  data.addColumn('number', 'Expenses');
  data.addRows(4);
  data.setValue(0, 0, '2004');
  data.setValue(0, 1, 1000);
  data.setValue(0, 2, 400);
  data.setValue(1, 0, '2005');
  data.setValue(1, 1, 1170);
  data.setValue(1, 2, 460);
  data.setValue(2, 0, '2006');
  data.setValue(2, 1, 660);
  data.setValue(2, 2, 1120);
  data.setValue(3, 0, '2007');
  data.setValue(3, 1, 1030);
  data.setValue(3, 2, 540);
  
  var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(data, { width: 640, height: 480, title: 'Company Performance',
                     vAxis: { title: 'Year', titleTextStyle: { color: 'red'} },
                     legend: 'none', colors: ['#cc00cc', '#ccffcc']
                    });
  
  changeColors();
  
}

function changeColors() {
  var chartArea = document.getElementsByTagName('iframe')[0].contentDocument.getElementById('chartArea');
  var nodes = chartArea.getElementsByTagName('rect');
  
  // finding all <rect> elements with #cc00cc fill color and replacing them with 'blue','red','green','blue'
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#cc00cc') {
      switch (i % 4) {
        case 0:
          node.setAttribute('fill', 'blue');
          break;
        case 1:
          node.setAttribute('fill', 'red');
          break;
        case 2:
          node.setAttribute('fill', 'green');
          break;
        case 3:
          node.setAttribute('fill', 'red');
          break;
      }
    }
  }
  
  // finding all <rect> elements with #ccffcc fill color and replacing them with 'blue','red','green','blue'
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#ccffcc') {
      switch (i % 4) {
        case 0:
          node.setAttribute('fill', 'blue');
          break;
        case 1:
          node.setAttribute('fill', 'red');
          break;
        case 2:
          node.setAttribute('fill', 'green');
          break;
        case 3:
          node.setAttribute('fill', 'red');
          break;
      }
    }
  }
}
​

good luck :-)

On Mon, Nov 21, 2011 at 8:49 PM, asgallant <drew_g...@abtassoc.com> wrote:

There is a way to hack around the problem which has been discussed extensively on this forum (search for 'bar colors'), ex: https://groups.google.com/d/msg/google-visualization-api/BPNbQ3GKCdg/R-7P0RwBOq8J

--
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/-/AikF9KPEcS4J.

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]

I like that approach - it solves some messy DataTable problems and allows for integration with some of the other API tools.

[Surya]

Excellent Roni!!

Thank you very much..
Now atleast i got some clue/hint on how to handle this..
I got the logic of changing the colors depending on the color you are
assigning to the main chart,..

Actually what i want is to change the color depending on the values
which are set for the bars..
Any hint Pl?

> On Mon, Nov 21, 2011 at 8:49 PM, asgallant <drew_gall...@abtassoc.com>wrote:
>
>
>
>
>
>
>
> > There is a way to hack around the problem which has been discussed
> > extensively on this forum (search for 'bar colors'), ex:

> >https://groups.google.com/d/msg/google-visualization-api/BPNbQ3GKCdg/...

[Surya]

Thank you for the response. This is not what i am looking for..

BR,
Surya

On Nov 21, 11:49 pm, asgallant <drew_gall...@abtassoc.com> wrote:
> There is a way to hack around the problem which has been discussed

> extensively on this forum (search for 'bar colors'), ex:https://groups.google.com/d/msg/google-visualization-api/BPNbQ3GKCdg/...

[asgallant]

You can do this by mixing views into the methods I've described on the forums.  Something like this: http://jsfiddle.net/6NkWx/1/

[Surya]

Thank you for the response.

I have checked that and looks good.. but for my query i think Roni
suggestion is better but i have a challenge in that..
The moment i do a mouseover on the bar.. the original color defined is
coming back

I guess this is because of the tooltip shown on top of the columnchart
is perhaps redrawing the bar..
even i put some dummy callback mouseover and mouselick events but
still the color gets changed..

my intention is color the bars depending on the values assigned to
them...

BR,
Surya

[asgallant]

Try calling changecolors() from the 'onmouseover' and 'onmouseout' events:

google.visualization.events.addListener(chart, 'onmouseover', function () {
    changeColors();
});
google.visualization.events.addListener(chart, 'onmouseout', function () {
    changeColors();
});

[Surya]

I tried already :)

Its not working .!!!

[Roni Biran]

Hi and sorry for the delay (it was night where i live....)

What asgallant suggested can work with some modifications.

pass the event to the coloring function like this:

google.visualization.events.addListener(chart, 'onmouseover', function (evt) {

changeColors(evt);

});

google.visualization.events.addListener(chart, 'onmouseout', function (evt) {

changeColors(evt);

});

also I changed the function to use this to replace the color to the correct one.

the event passing in the listener holds both datatable column and row of the hovered column, thus allows us to decide on the color we want to show.

so now, it will look like this:

function changeColors(evt) {

  var chartArea = document.getElementsByTagName('iframe')[0].contentDocument.getElementById('chartArea');

  var nodes = chartArea.getElementsByTagName('rect');

  

  if (evt) {

    // replacing the over/out element

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

      var node = nodes[i];

      if (node.getAttribute('fill') && (node.getAttribute('fill') == '#ccffcc' || node.getAttribute('fill') == '#cc00cc')) {

        switch (evt.row % 4) {

          case 0:

            node.setAttribute('fill', 'blue');

            break;

          case 1:

            node.setAttribute('fill', 'red');

            break;

          case 2:

            node.setAttribute('fill', 'green');

            break;

          case 3:

            node.setAttribute('fill', 'red');

            break;

        }

 }

}

  } else {

please bear in mind that there are mouse movement limitations. if you move your mouse too fast, the script have some glitches. sorry about that ;-)

let me know how it works. (or not work)

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