Create RGB Color Pie Graph From HEX Values (with WordPress Shortcode)

This article is one that was ported over from Internoetics. The imperfect nature of the function is preserved.

■ ■ ■

This article supports a number of color-related functions on our website. The primary purpose of the example is to represent RGB color values in a Google Pie Graph.

The Result

The shortcode of [hexgraph hex="#ffcc33"] returns the following chart:

A 3D chart may be returned with [hexgraph hex="#bcbcbc" td="1"].

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Create RGB Color Pie Graph From HEX Value

http://www.beliefmedia.com/code/wp-snippets/rgb-pie-graph

function beliefmedia_rgb_pie_graph($atts) {

$atts = shortcode_atts(array(

'hex' => '#FFCC33',

'width' => '600',

'height' => '240',

'td' => 'false' /* 3D Graph? */

), $atts);

$hex = str_replace(array('px', '%', '#'), '', $atts['hex']);

$id = md5(serialize($atts));

$rgb = sprintf('%d, %d, %d', hexdec(substr($hex, 0, 2)), hexdec(substr($hex, 2, 2)), hexdec(substr($hex, 4, 2)));

$rgbarray = explode(',', $rgb);

$red = round(round(($rgbarray['0'] / 0x33)) * 0x33);

$green = round(round(($rgbarray['1'] / 0x33)) * 0x33);

$blue = round(round(($rgbarray['2'] / 0x33)) * 0x33);

$return = '<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

[\'Task\', \'RGB Color for #' . $atts['hex'] . '\'],

[\'Red\', ' . $red . '],

[\'Green\', ' . $green . '],

[\'Blue\', ' . $blue . ']]);

var options = { title: \'RGB Percentages for #' . $hex . '\', colors:[\'red\',\'green\',\'blue\'], backgroundColor: \'transparent\', is3D: ' . $atts['td'] . '};

var chart = new google.visualization.PieChart(document.getElementById(\'' . $id . '\'));

chart.draw(data, options);

}

</script>';

$return .= '<div id="' . $id . '" style="width: ' . $atts['width'] . 'px; height: ' . $atts['height'] . 'px; margin: auto;"></div>';

return $return;

}

add_shortcode('hexgraph', 'beliefmedia_rgb_pie_graph');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

hex

The 6-figure HEX color value.

width

The width of the Google pie chart.

height

The height of the Google pie chart.

TO return a 3D chart, use td="1".

Considerations

Review Google Chart options here .
See also: "Using Google Graphs To Draw PHP, MySQL, and WP Version Usage" (article)
In the original version of this post we provided a CSS horizontal graph to represent RGB values. The purpose of the graph is a little useless so it was omitted. Another post is scheduled that deals with CSS Progress Bars.

Create RGB Color Pie Graph From HEX Values (with WordPress Shortcode)

Find other color related articles on our blog

The Result

WordPress Shortcode

Shortcode Attributes

Considerations

Like this article?

Martin Khoury

Leave a comment