Javascript solution for generating colours that match

Bhuman Soni
Bhuman Soni May 19, 2013
Updated 2022/01/26 at 8:39 AM

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. 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 give access to the their colour generating algorithm. So to keep my boss happy, I came up with a little hack or a solution to generating colours that match to solve 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.

Generating colours that match

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;

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

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