Coloring Google Charts

I recently updated my xg_graph.js javascript library to allow coloring of Google graphs. (Google calls them charts). xg_graph.js makes drawing bar, column, line, pie, table, and geo charts easier. Line charts can contain lines or points or both. Pie charts can have a hole in the middle, in which case they’re a donut chart.

So, what can you add color to on a Google graph? Google graphs have colors by default, so you’re not adding colors, you’re overriding colors. This is even true, when you’re giving the text a color other than black.

For a bar chart, you can override the colors of annotations, the background, the background of the chart area, the colors of the bars, items along each axis, items in the legend, the title text, the tooltip or hint (the text that appears when you hover over something), and trendlines. You can maybe override background color, text color, border color, and/or transparency, depending on what you’re overriding the color of. Note: To override transparency, you override opacity which is the opposite of transparency. When will css add transparency to styling? That’s what I’d like to know.

While you can override colors for all those various things on a bar chart, xg_graph.js only allows you to override the primary coloring, which is for the bars. Bar, Column, and Line charts come in two basic fashions. In the first one, there are single bars/lines. In the second, there are multiple. When there are multiple, these are called series. The first of the series is called the primary. In the case of bar and column charts the series can be stacked on top of the primary.

So, the question comes, if you’re coloring the bars are you just coloring the primary bars, are you coloring the series, or both? Let’s talk about the series first, because that’s easier to color. You can color the series with the colors option. Just provide an array of colors. There is also a series option which accomplishes the same thing. However, you have to provide an array of objects, whatever those are. I use the colors options.

Google graphs use 31 default colors for the series. If you have more than 31 series (and why would you), the colors start repeating. In 2014, Google start providing Material charts. Material charts use Google’s Material Design Colors. When coloring series for Material charts, the first three series are different shades of blue, then next three are different shades of red, then orange, then green, purple, aqua, peach, gold, blue violet, pink, and now we’re up to 30. Even though it’s been 8 years, Material charts are in beta.

To color each primary bar differently, you have to add a style column to the data array. In your data array for Google graphs, the first row is headings. The heading for the style row is {role:’style’}. The brackets indicate that this is an object. This column for the other rows can contain the color ‘red’, or an object which is the style {color:’red’,opacity:50%}.

If you’re confused at this point, don’t worry, I’ve made it easy. To draw a graph with xg_graph, you place some code in the <head> of your webpage. Then you call xg_graph_google_init(‘bar’) or whatever graph type you’re drawing. This sets xg_graph_color_scheme to ‘default’, which will make it use the default colors. Then you set up your data array. To change the primary bar colors, change xg_graph_color_scheme to ‘primary’. Define a color array, and call data_array = xg_graph_google_apply_color(data_array, color_array). If you don’t specify enough colors, the colors you specify will be repeated. This adds that style column to your data array for you. To change the series, set xg_graph_color_scheme to ‘series’ or to ‘primary+series’. Then call xg_graph_google_apply_color(data_array, color_array). The data array doesn’t need to be updated, so don’t say data_array = …. Series colors are kept in a global array behind the scenes.

Let’s talk about pie, pie graphs to be specific. Donut graphs aren’t separate from Pie graphs for Google. You just specify the size of the pie hole. If there’s a hole, it’s a donut graph. It’s too bad that you can’t make the hole transparent and place an image of ice cream below the pie graph. Then you’d have a pie a la mode graph. Well, maybe you can, try setting background color to ‘transparent’. If you get this to work, let me know.

Another thing to note: Pie graphs can be 3D. Donut Graphs cannot be 3D. Pie graphs are the only type of Google graphs which can be 3D. You can somewhat fake 3D for Bar and Column graphs, by specifying border colors in the style column. I provided for 3D Pie graphs. I didn’t provide for fake 3D Bar graphs.

For pie graphs, xg_graph_google_apply_color colors the slices. This could have been done with either the colors or slices option. I used colors, because slices is an object, so more difficult. These colors work the same way as series. But, since there is only one option, you don’t have to change xg_graph_color_scheme. It is changed for you.

Geo graphs are maps made of line drawings. Google also has map graphs which use google maps and markers. Markers and colored text on geo/map drawings require you to obtain a maps API key and let Google Graphs know what that is. I didn’t provide for that.

By default, Geo graphs color the regions/locales in your data_array with a white-green gradient. A gradient varies the color based on the gradient colors. So the countries with lower values will be more white. Those which higher values will be more green. Geo graphs are always going to color locations based on a gradient.

For Geo graphs, it looks like you’re stuck with a gradient. However, you can give that gradient whatever colors you want, and as many colors as you want. Call xg_graph_google_apply_color(data_array,color_array). For the previous graph types, colors in color_array are repeated until there are enough colors. For Geo graphs, they’re not. If your color_array contains red, orange, yellow, green, blue, and violet, the countries will be colored using a gradient made of all those colors.

But wait, what’s this? If your data_array contains n locations and your color array contains n colors, each location is colored differently. If you want to color each location with a separate color, xg_graph.js also allows you to do that with an svg (a specific image type) map. You have to provide the svg.

And last, but not least, table graphs. A table graphs displays data in a table. The user can sort the data. You’ve probably seen these somewhere on the internet. Perhaps in Wikipedia. In a table graph, you may want to sort the various rows. By default, Google uses a white lavender gradient for the header row. Then, every other data row has a background of snow. With xg_graph.js you can apply background coloring to the header row. You can also apply coloring to either all data rows or to every other data rows. Table rows are styled using the cssColorNames options. This is an object containing the class names to be used in styling the rows.

In xg_graph.js, you need to provide the following classes, if you want to color the rows: xg_table_header_color, xg_table_row_color, and xg_table_alternating_row_color. Each class should contain background-color. The header row background color will be a gradient of white and whatever color you specify. If xg_graph_table_alternating_row_style=true, every other row background is colored. Since these classes are styles, and since you’re providing the classes, you can specify more than just background-color. Since coloring a table graph is based on classes, rather than the data array and color array, call xg_graph_google_apply_color(”,”) to apply coloring.

That’s it. If you want to provide other coloring or if you want to color other types of google graphs, you’ll need to code that yourself, unless you talk me into providing that capability in xg_graph.js. I provide the simpler coloring. The rest looks like it gets more complex.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x