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)

Html5 based widget for an iOS app: Today extension powered by the Ionic framework

At some point the thought of adding a Widget to my iOS app came to mind which was followed by starting work on adding a widget for my app, My Day Todos . Obviously the first step was to learn how to add a Widget to an iOS app and in that learning process I discovered many things about widgets in iOS first of which was a widget in iOS is a an app extension i.e a  Today Extension . While I am still haven't finished working on the widget for my iOS app, I thought I would take some time out and share what I have learned. In this post, I will share a few important tips and provide an example of how to add a Widget to an iOS app and have the widget UI powered by Html5 via  Ionic framework . I added some code to my Github repo, Html5StarterAppWithSwift in order to show how this can be achieved. There are already too many tutorials out on the Web on how to add a Today extension to an iOS app so I won't be including that here. Instead I will focus on sharing some of the useful tip...

Build a Full-Stack Image Upload App with Node.js, Express, React, and Vite (Beginner Tutorial)

 If you’re new to full-stack web development and want a hands-on project to practice React frontend integration with a Node.js + Express backend , this tutorial is for you. In this guide, we’ll walk through a simple but powerful app that lets users upload images, store them on the server, and display them back in the browser. This project is based on my GitHub repo: node-express-react-simple-fileupload . It’s designed to be beginner-friendly, SEO-optimized, and a great starting point for anyone learning JavaScript full-stack development . 🛠️ Technologies Used Here’s the tech stack powering this project: Node.js – JavaScript runtime for the backend. Express.js – Lightweight web framework for building REST APIs. Multer – Middleware for handling file uploads. CORS – Enables cross-origin requests between frontend and backend. React.js – Frontend library for building user interfaces. Vite – Fast development server and build tool for React. Fetch API – For making HTTP requests ...