Google Charts Custom Color Binding

Question

Is it possible to bind data to specific colors in Google Charting API...

Suppose i have 2 Pie-Charts as in the FIDDLE.. I want to bind the Data to specific colors -

eg - EAT should always be RED, SLEEP Should always be GREEN in all the charts...

and if a specific item does not appear in any particular chart then the color corresponding to the missing value should not appear in that chart...

I have tried

slices: [{color: 'black', {}, {}, {color: 'red'}]

as well as

slices: {0: {color: 'black'}, 3: {color: 'red'}}

but was not able to handle missing values....

See Fiddle to get a clear idea what i am trying to achieve here...

David Stetler David Stetler · Accepted Answer · 2013-05-10T16:48:09

Setup an array of colors that you want to use for each category. You can fill in an array of colors to use for the current pie chart being drawn based on what is in the pie chart, looping through each item and adding the correlated color. I set it up in your JSfiddle. I used generic colors, but you can use any hex colors you want. I did not account for situations where the category does not have an associated color, so you would need to check for that if that could be an issue.

colors = {'Work':'blue',
      'Eat':'red',
      'Commute':'yellow',
      'Watch TV':'green',
      'Sleep':'purple',};

function colorsArray(data){
    var array = [];
    for (var i=0;i<data.length;i++){
        array.push(colors[data[i]['c'][0]['v']]);
    }
    console.log(array)
    return array
}

You can check out the fiddle here: http://jsfiddle.net/Qquse/130/

Google Charts Custom Color Binding

1 Answers