WordPress Plugin: Easy Graphs

Everyone likes data visualizations so I wrote a plugin that will make the quick and secure creation of Pie Charts, Bar Charts and Line Charts easy. The answer is: Easy Graphs.

Easy graphs is very simple to use. It’s a shortcode – [easy_graphs]

Not just like that. The shortcode also requires one parameter “data”. This parameter is a comma separated list of number values “1,2,3,4,5,6,7″.

You can also add a “type” parameter. The “type” can be “line”, “bar” or “pie”. “bar” is the default.

For a Bar graph, you can optionally pass additional parameters: width, height, and color.

Example: [easy_graphs height="200" type="bar" data="30,70,65"]
[easy_graphs height="200" type="bar" data="30,70,65"]

By default, width and height are populated from your media embed sizes that are set in your Settings > Media menu inside WordPress. Color should be a hex color code.

For a line graph, the options are similar: color1, color2, height and width.

If you will: [easy_graphs height="200" type="line" data="200,150,175,260"]
[easy_graphs height="200" type="line" data="200,150,175,260"]

In this case, color1 is the “fill” color and color2 is the line color. Both should be hex.

For Pie charts, there are some additional limitations but fewer parameters: color1, color2 and diameter.

Try this: [easy_graphs diameter="150" data="40,60" type="pie"]
[easy_graphs diameter="350" data="40,60" type="pie"]

Diameter should be an integer represented in pixels. Color1 and color2 are the fill colors of the pie slices. The limitation is the pie chart, at this time, can only take 2 values. I’ll work on that.

On the roadmap are other things. Make the pie chart take more values than just 2. Maybe include other graph types. Labels so the data can be more easily understood.

What would you add to this?

Download Easy Graphs

TUTORIAL: Adding an oEmbed Provider to WordPress

I don’t often write tutorials. I probably should. But normally it’s only when someone asks me something and I think, “Hey, self… you should write up how to do this”. As if a book wasn’t enough.

Last night I was at the Austin Web Holiday party, a gathering of some 15+ technical meetup groups cross-pollinating over beer and socializing. I was introduced to one guy (can’t remember his name!) who had built a video site and enabled it for oEmbed. He couldn’t understand why WordPress wouldn’t just automatically let users use his videos, like it does for YouTube, Vimeo, etc. The full list of default oEmbed providers are listed here.

WordPress doesn’t allow automatic use of oEmbed for security reasons. Otherwise, someone could build a video service stuffed with malicious code that could potentially access your database or create a man in the middle attack or worse. WordPress.com certainly doesn’t allow arbitrary oEmbed sites and the dot-org open source software doesn’t allow arbitrary stuff automatically. But it can be done, on the dot-org side, with a plugin. All it is a hook.

Here’s an example. If you want to register an oEmbed video site that is, say, at (randomly) http:/mysuperawesomevideosite.com and your videos are of the format http://mysuperawesomevideosite.com/video/*, it’s as simple as adding a function in your plugin (or more properly from a PHP perspective, a method in a class – but that’s a personal preference. The method/function should call the  wp_oembed_add_provider() function.

In it’s simplest form, all you have to do is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class My_Plugin {

  var $oembed_endpoint;
  var $oembed_format;

  function __construct()
  {
    $this->oembed_endpoint = 'http://mysuperawesomevideosite.com';
    $this->oembed_format = 'http://mysuperawesomevideosite.com/video/*';

    $this->new_oembed();
  }

  function __destruct() {}

  function new_oembed()
  {
    wp_oembed_add_provider( $this->oembed_format, $this->oembed_endpoint );
  }

}

Then, to make this code work, just instantiate the class somewhere.

1
$my_plugin = new My_Plugin;

Voila!