How can I ensure that a filtered pie chart in a Google Charts dashboard maintains consistent slice colors?

Question

I've got a Google Pie Chart with a category selector, much like the example at https://developers.google.com/chart/interactive/docs/gallery/controls#overview

The purpose of this chart is to display traffic sources by medium from multiple websites (Google Analytics Profiles). As such, the data source has three columns: "GA profile," "medium," and "visits."

I'm using the drop-down category filter to filter based on "GA profile." In other words, to allow the user to switch between looking at traffic mediums for different GA profiles. For the pie chart itself, the slice labels are "mediums" and the size of the slices is based on "visits." So, the data array winds up looking something this:

var data = google.visualization.arrayToDataTable([
['Brand', 'Medium', 'Visits'],
['SiteA', 'Banner', 819527],
['SiteA', 'Direct', 489598],
['SiteA', 'Organic Search', 249444],
['SiteA', 'Paid Search', 248824],
['SiteB', 'Banner', 24858],
['SiteB', 'Direct', 24744],
['SiteB', 'Organic Search', 23751],
['SiteB', 'Paid Search', 22751]
]);

(It's true that, if no "GA profile" is selected, the chart isn't meaningful, as it lists each medium separately for each site. However, it's not meant to be viewed that way- I have the category filter default to one of the GA profiles, and it's meant to have one of them active at all times.)

Anyway, this all works fine, except for one thing: The colors of the mediums aren't consistent when switching between GA profiles. For example, when I select "Site A" then "Direct" might be blue while "Organic Search" is red, while for "Site B" "Direct" might be red while "Organic Search" is orange. I want it to be that the slice for each medium is always the same color, regardless of whichever GA profile I happen to be viewing data for. Any ideas on how I might achieve this? I looked through the documentation, but didn't see any way to specify a slice's color; only a way to set the color scheme as a whole. Is there a way to do this within a Google Chart option, or to set the colors after the initial draw()?

Answer 1

The API allows you to specify the colours that are shown for each segment. Using this, you can define a rolling set of colours to be used like so:

var options = {
    colors: ['blue', 'red', 'orange', 'purple']
}

This then applies the four colours to the four segments, and when it gets to a fifth segment (in this case, the start of the next site) it will start again from the list of colours you've assigned.

Update

If you're data set varies between sites, you will need to specify the colour for every single segment. You could create a loop that goes through every value and assign the correct colour for each and every segment so that you end up with a list of colours like so:

colors: ['blue', 'red', 'orange', 'purple', 'blue', 'red', 'orange', 'purple', 'blue', 'red', 'orange', 'blue', 'purple'...]

Of course, this could become very long set of colours but would be the only way to do it.