Generating aesthetically pleasing colours that go well together

So the other day at work, my boss had another request for me, he wanted me to write some code that auto-generates a bunch of colours that go well together such that they could be used in a chart i.e something similar to what Google uses for their Google visualization API. So i wrote some code that generated decent enough colours and showed it to him, to which he responded, "is this what Google uses?" i was like no this is something we wrote, but he insisted that he wants exactly what Google uses and that is it. Now this was interesting as, Google provides a charting API for generating charts, but they don't exactly give access to the their colour generating algorithm. So to keep my boss happy, i came up with a little hack which solved our problem.

You see the way to do this would be to generate a mock chart using the Google Visualization API and then extract the colours out of the chart itself. You see the chart is an SVG object and with the use of JQuery ( I assume another JS library with JQuery like functionality can also be used ) we can read into the SVG object and get the colours from the html elements within it.

Problem

Get a set of colours that look good together.

Solution

This is a simple solution, what we are going to do is to create a pie chart using the Google visualization API and extract the colours from where the chart is drawn. An example of how a pie chart is drawn using google visualization tools can be found here.

fyi, this function relies on two includes, jquery and the Google jsapi i.e.

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Lets create a function that will accept 2 parameters, noOfColours and divId.

 function getGoodColours(noOfColours, divId)

The first step is to create some dummy data for that chart.

            var dataArray = [];
            var header = [];
            header.push("task");
            header.push("random");
            dataArray.push(header);
            for ( var j = 0; j < noOfColours; j++) {
                var data = [];
                data.push("" + j, 10);
                dataArray.push(data);
            }
Ok so now we have the data that we can use to initialise a data table and then draw a pie chart. Remember we already have the id of the div where we are going to draw the chart.

            var data = google.visualization.arrayToDataTable(dataArray);
            var chart = new google.visualization.PieChart(document.getElementById(divId));
            chart.draw(data);

At this point we have everything we need to start extracting the colours out of the chart, so lets just do that then.

            var colours = [];
            $("#"+divId).find("svg").find("g").find("rect").each(function() {
                var colour = $(this).attr("fill");
                if (colour.match("#ffffff") == null) {
                    colours.push(colour);
                }
            });
As you can see, this is really about using jquery going into the heart of the chart svg object and getting the important colours out of it.  Ok lastly dont forget to hide the chart drawn, in case you purpose of using this was just to generate the good colours.

            $("#"+divId).hide();
            return colours;

ohh and also the purpose of this function, i.e. return the colours extracted. 

Solution pitfalls

Now what is the downside of this solution? Well obviously this will only work as long as the structure of the SVG object is what it expects it to be.

Applications

I reckon this solution is useful to anyone with some charting needs, or for people who are stuck or lack the patience to to see what goes on well together through trail and error.

As usual the source code of the full example can be found here.