Coloring columns in column chart (Google Chart)

Bhuman Soni
Bhuman Soni November 21, 2012
Updated 2022/02/19 at 2:24 AM

Now before I get into the nuts and bolts of my problem. I must confess that i was quite skeptical about the google charts API, mainly because of using the mostly awesome Jfreecharts in the past. However having used it for a bit now, I am warming up to the idea of it, because quite frankly it is much simpler to use. You are likely to have a “cool” looking chart with tooltips etc in a much shorter time when compared to JFreeCharts. In this post, we will look at how to coloring columns in Column Chart in Google charts. While it appears simple, this problem is a bit complex and needs a little bit of thinking.

Coloring columns in column chart

Anyway so about my problem, recently i was asked to create a column chart such that each column is colored differently.  My data looked something like this

  var data google.visualization.arrayToDataTable([
    [‘Year’‘Games Finished’],
    [‘2003’,  12],
    [‘2004’,  6],
    [‘2005’,  15],
  ]);

The problem with this was that each column in the column chart is the same color,  you see it seems like the google charts API assigns a color per column. So one of the workarounds i.e. a hack for this was to represent the data as an adjacency matrix and exploit the stacking functionality of the column charts. In the adjacency matrix the values for each data point will be across the diagonal, and everything else would be 0. What i mean is the data should be  structured like this

 function drawVisualization({
  var data google.visualization.arrayToDataTable([
    [‘Year’‘2003’‘2004’‘2005’],
    [‘2003’,  12,0,0],
    [‘2004’,  0,6,0],
    [‘2005’,  0,0,15],
  ]);
  new google.visualization.ColumnChart(document.getElementById(‘visualization’)).
      draw(data,
           {title:“Games Finished per Year”,
            width:600height:400,
            hAxis{title“Year”},
            vAxis:{title:“Games Finished”},
            isStacked:true}
      );
}

This solution isn’t perfect, but it is a solution none the less.  You can give it a go in the Google visualization playground.

I will write a follow up post (at some point) with a function that will take two js arrays and build a dataTable object which will be an adj matrix of the data in the arrays.

Subscribe & never miss a post

If you find any of my posts useful and want to support me, you can buy me a coffee :)

https://www.buymeacoffee.com/bhumansoni

Or you can  buying or even try one of my apps on the App Store. 

https://mydaytodo.com/apps/

In addition the above, have a look at a few of the other posts,
How to create radio buttons using vanilla Javascript
https://mydaytodo.com/vanilla-javascript-create-radio-buttons/

How to build a Javascript frontend for Java Spring Boot backend 
https://mydaytodo.com/java-spring-boot-vanilla-javascript-solution/

Or have a look at some useful Javascript tutorials below
https://mydaytodo.com/category/javascript/

Share this Article
Leave a comment

Leave a Reply

Your email address will not be published.

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock