Visualization colors array question/feature request

19 views
Skip to first unread message

Bluestreak2k5

unread,
Aug 23, 2011, 11:23:43 AM8/23/11
to Google Visualization API
So I am working on a personal project of visualizing the US
unemployment, employment, and work force #'s as compared to the US
unemployment rate % to show the unemployment % doesn't mean anything
when actually trying to understand the problems of unemployment in the
US.

http://chrisdblumberg.com/unemployment/

However, the colors array just doesn't work for visualizing dynamic
data.

Given that the data may be negative to negative, negative to positive,
or positive to positive is there a better tool to visualize this?

Or could I override the colors option with my own method such that it
could be:

options['colors']['negative'] = [ color, or array of colors ]
options['colors']['positive'] = [ color, or array of colors ]

so that if the numbers are negative the negative colors will be used,
and if the numbers are positive the positive will be used.

asgallant

unread,
Aug 23, 2011, 1:47:05 PM8/23/11
to google-visua...@googlegroups.com
There is no explicit support for anything like this (AKAIK), but you can hack a solution.  If you have a chart with both positive and negative values, get the range from the highest to lowest values and calculate the ratio of each to the range, then assign colors in the same ratios for the positive and negative values, adding a specific color for 0 in the middle.  Something like this:

/* this function takes a max and min and returns an array of colors 
 * from red (FF0000) to green (0000FF) that color the chart red for
 * negative numbers and green for positive numbers, zero is white
 
 * parameters:
 *   max = the maximum (positive) value
 *   min = the minimum (negative) value
 *   n = the number of color gradations (larger values of n give more accurate map gradation results)
 
 * returns the array of colors
 */
function getColors (maxminn{
    var Math.round((n-1Math.abs(min(Math.abs(minmax));
    var Math.round((n-1max (Math.abs(minmax));
    var colors [];
    var hex;
    for (0ai++{
        hex Math.round(256 a).toString(16).toUpperCase();
        hex (parseInt(hex1616"0" hex hex;
        colors.push("#FF" hex hex);
    }
    for (b>= 0i--{
        hex Math.round(255 b).toString(16).toUpperCase();
        hex (parseInt(hex1616"0" hex hex;
        colors.push("#" hex hex "FF");
    }
    return colors;
}



You can change it up to adjust for returning hex values rather than strings or to auto-detect negative max/positive min and calculate appropriately
Reply all
Reply to author
Forward
0 new messages