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

Example Interest Rates: Home Loan Variable: 1.89% (1.9%*) • Home Loan Fixed: 1.84% (2.11%*) • Fixed: 1.84% (2.11%*) • Variable: 1.89% (1.9%*) • Investment IO: 2.05% (4.36%*) • Investment PI: 1.58% (2.72%*)

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

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Washington)

  Want to have a chat?
 

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