Skip to main content

Coloring individual columns of a column chart (Google Visualization)

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.

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 isnt 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.

Comments

Popular posts from this blog

Upload to AWS S3 from Java API

In this post, you will see code samples for how to upload a file to AWS S3 bucket from a Java Spring Boot app. The code you will see here is from one of my open-source repositories on Github, called document-sharing. Problem Let’s say you are building a document sharing app where you allow your users to upload the file to a public cloud solution. Now, let’s say you are building the API for your app with Spring Boot and you are using AWS S3 as your public cloud solution. How would you do that? This blog post contains the code that can help you achieve that. Read more below,  Upload to AWS S3 bucket from Java Spring Boot app - My Day To-Do (mydaytodo.com)

Addressing app review rejections for auto-renewing subscription in-app purchase (iOS)

The ability to know what the weather is like while planning your day is a feature of  My Day To-Do  Pro and as of the last update it’s also a part of the  Lite version . Unlike the Pro version it’s an auto-renewing subscription based  in-app purchase (IAP)  in the Lite version. What means is that when a user purchases it, the user only pays for the subscription duration after which the user will be automatically charged for the next period. Adding an  auto-renewing  subscription based IAP proved to be somewhat challenging in terms of the app store review i.e. the app update was rejected by the App Review team thrice because of missing information about the IAP. Therefore in this post I will share my experiences and knowledge of adding auto-renewing IAP in hopes to save someone else the time that I had to spend on this problem. In-App purchase This year I started adding IAPs to My Day To-Do Lite which lead to learning about different types of IAP...

Serving HTML content in an iOS app that works in iOS 7 and later (using Swift)

As I have mentioned in an earlier post , I really enjoying coding in Swift. Now what am I doing with it? Well I am trying to build an HTML5 app that must work on devices with iOS 7. So in iOS8 apple has introduced a whole bunch of features that facilitate easy communication between web content and lets just call it back-end Swift code, but those features are not in iOS 7. So why do I want to build something that would work in an older OS? well I do not expect existing iOS users to upgrade to iOS 8 straight away and i also know a couple of people who would be very reluctant to upgrade their iPhones to iOS 8. Now in case you do not, you can have a read of the "Working with WebViews" section of this post , to know how to serve HTML content with WebViews. So when I started building my app, I wanted to know: How do I invoke some Swift code from my HTML content? Well the solution to this may feel a little bit "hacky" but it is a solution to achieve this.  The followi...