Re: Company Branding for Google Charts

[asgallant]

You can change the colors in the charts (typically by using either the "colors" or the series.color option).  Backgrounds are a bit trickier.  You have to use CSS to layer the background image behind the chart, and set the chart's backgroundColor option to "transparent".  The problem with backgrounds is twofold: not every chart supports the backgroundColor option (most of them do, but there are a few exceptions), and transparent backgrounds are not supported in versions of IE earlier than 9.

On Monday, December 31, 2012 7:45:20 AM UTC-5, Karyn Hill wrote:

The company I work for wants to start using Google charts but wants them to match our corporate branding with particular colors and a specific background. Is this possible? I don't have access to the CSS or head but can ask the web manager to add code to either if needed.

[Karyn Hill]

Where can I find information on changing the colors in the charts? My supervisor told me today that he wants a series of branded example charts by the 8th to show the big boss, but I'm starting from near zero of JavaScript. I can't see what's currently controlling the default colors so I assume that's part of the package and I'll have to override it somewhere.

Sorry for my extremely limited knowledge. I hate when my supervisor does this to me; I'm a graphic designer, not a developer. I'm happy to learn it but a week is simply not enough time to learn it, apply it to the Google Charts, then figure out what to do with the tables to display the information in the best way.

[asgallant]

It's all described in the Configuration Options section of each chart documentation page (see LineCharts as an example).  Here's an example showing both methods for assigning colors to a LineChart: http://jsfiddle.net/asgallant/EuvJc/.  The example also works exactly the same way for AreaCharts, BarCharts, ColumnCharts, ComboCharts, ScatterCharts, and SteppedAreaCharts.  CandlestickCharts work similarly, but have more extensive color options.  PieCharts also work similarly, but they don't have the series option available.  BubbleCharts can be colored the same way, but the can also be colored by point value instead.  GeoCharts and TreeMapCharts can only be colored by point value.  GaugeCharts have options to color data ranges on the gauge, not data points.

Most charts assign a single color to each series (exceptions are PieCharts, where each row get it's own color; GeoCharts, TreeMapCharts, and BubbleCharts set to color by value; and GaugeCharts).  If you need to be able to assign different colors to data points within a series, it is doable under certain conditions, but unless you need it, it's probably not worth going over.

I know it can seem a bit intimidating, but the API is actually pretty simple to use.  I'm more than happy to help you get started.  Feel free to ask any questions you may have and I'll do my best to answer them.

[Karyn Hill]

I see part of my problem. The chart I'm using to start learning on is the MotionChart, which apparently doesn't allow alterations to color. I'll switch to another chart type to learn on and will just deal with the MotionChart problem when he brings it up. He won't understand why, but if he can see I can do it to other charts, he'll know I just really can't do it to that one or I would have.

Thanks for your willingness to help. I'm sure I'll be on asking all sorts of questions, many of which will probably be obvious to most people. I'm OK with HTML and CSS but JavaScript touches things differently and I really ought to learn more about it before messing with it but don't have time. I'll try not to be a pain in the butt. :)

[asgallant]

In my experience, MotionCharts are actually the hardest ones to get working right.  If you can present the information you want in other charts, I would strongly recommend doing so.  It's also worth noting that the MotionCharts rely on Flash to work, which means you can't view them on most mobile devices.