Portfolio:

Google Charts on WP blog

WordPress is powerful content management platform that lets developers create stunning plug-ins to provide custom functions give site administrators convenient management tools. As part of our daily work we had come across situations where we could not find suitable plug-ins for what we wanted to do. In such cases, we decided to develop our own plug-ins and offer them to the community.

This is why and how we created the Google Charts plug-in. We needed a plug-in that would let blog authors add a simple geo-graph. But we didn’t stop there. We created a plug-in to support multiple types of Google graphs.

Our solution

The plug-in supports the following chart types:

• Geo Chart
• BubbleChart
• Line Chart
• Column Chart
• Bar Chart
• Pie Chart

We decided to create the plug-in based on WP’s support for short codes. The data for the chart is placed between the short code tags, as in following example:

[someChart][‘Year’, ‘Sales’, ‘Expenses’],[‘2004′,  1000,      400],[‘2005′,  1170,      460],[‘2006′,  660,       1120],[‘2007′,  1030,      540][/someChart].

 

Make sure there are no HTML tags in between the short code tags, to ensure that the graph renders correctly. If you experience problems, use the “Text” tab of the visual editor to verify that there are no HTML tags within each pair of chart tags.

In release 0.3.3 we added support for “Quick Tags”. Quick Tags are buttons that appear in the upper row of the visual text editor when the editor is switched to “Text” mode (as shown below):

Geo Chart

We started development of this plug-in from our own need to let authors add powerful Geo Charts to their pages and posts.

We support the regions display as in the following example:

Google’s Geo Chart supports the “marker” mode of display, and also lets you specify the region of interest. We exposed this functionality to the short code in order to achieve the following type of charts: We have also added the ability to control the colour gradient:

Bubble Chart

To display a bubble chart, use the short code [  bubbleChart  ].

In addition to the standard bubble chart, the plug-in can support grouping and individual size for the bubbles.

Line Chart

To display a line chart, use the short code [  lineChart  ].

We have also enabled the “function” rendering to create line charts with smoothly-curving lines, as in this example:

Column Chart

To display a column chart, use the short code [  columnChart  ].

To add a visual style to the columns, add annotations to the data within the short code tags.
Here is one example of styled columns: Columns can be stacked on top of each other, as in the following example:

Bar Chart

To add a bar chart, use the short code [  barChart  ].

As with column charts, you can modify the styles: You can connect the bars with each other:

Pie Chart

To add a pie chart, use the short code [  pieChart  ].

You can use the “slices” attribute to control the color and offset of each of the slices in the chart. At the moment we support only the basic pie chart; however, we plan to add the 3D and Donut types soon.

Download and install

Download GoogleGraph from WordPress.com and use the ‘Plugins’ menu on the administrator’s console to install it in your WordPress site. Alternatively, you can search for the plug-in from your “Plugins” -> “Install” page in the WordPress dashboard.