Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

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 Tag: color 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.

1
<?php 
2
/*
3
 Create RGB Color Pie Graph From HEX Value
4
 http://www.beliefmedia.com/code/wp-snippets/rgb-pie-graph
5
*/
6
 
7
function beliefmedia_rgb_pie_graph($atts) {
8
 
9
  $atts = shortcode_atts(array(
10
    'hex' => '#FFCC33',
11
    'width' => '600',
12
    'height' => '240',
13
    'td' => 'false' /* 3D Graph? */
14
  ), $atts);
15
 
16
  $hex = str_replace(array('px', '%', '#'), '', $atts['hex']);
17
  $id = md5(serialize($atts));
18
 
19
  $rgb = sprintf('%d, %d, %d', hexdec(substr($hex, 0, 2)), hexdec(substr($hex, 2, 2)), hexdec(substr($hex, 4, 2)));
20
  $rgbarray = explode(',', $rgb);
21
 
22
  $red = round(round(($rgbarray['0'] / 0x33)) * 0x33);
23
  $green = round(round(($rgbarray['1'] / 0x33)) * 0x33);
24
  $blue = round(round(($rgbarray['2'] / 0x33)) * 0x33);
25
 
26
  $return = '<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
27
      google.load("visualization", "1", {packages:["corechart"]});
28
      google.setOnLoadCallback(drawChart);
29
      function drawChart() {
30
        var data = google.visualization.arrayToDataTable([
31
          [\'Task\', \'RGB Color for #' . $atts['hex'] . '\'],
32
          [\'Red\', ' . $red . '],
33
          [\'Green\', ' . $green . '],
34
          [\'Blue\', ' . $blue . ']]);
35
        var options = { title: \'RGB Percentages for #' . $hex . '\', colors:[\'red\',\'green\',\'blue\'], backgroundColor: \'transparent\', is3D: ' . $atts['td'] . '};
36
        var chart = new google.visualization.PieChart(document.getElementById(\'' . $id . '\'));
37
        chart.draw(data, options);
38
      }
39
    </script>';
40
 
41
  $return .= '<div id="' . $id . '" style="width: ' . $atts['width'] . 'px; height: ' . $atts['height'] . 'px; margin: auto;"></div>';
42
 return $return;
43
}
44
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.

td

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 Tag: color

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment