Warning: DOMDocument::loadXML() [domdocument.loadxml]: Start tag expected, '<' not found in Entity, line: 1 in /home/content/51/11498251/html/wp-content/plugins/premium-seo-pack/modules/title_meta_format/init.social.php on line 475

Portfolio:

GoogleGraph WP Plug-in

Enhancing the visual experience

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:

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):

QuickTools wordpress plugin GoogleGraph WP Plug-in QuickTools

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:

Powered by TSBA.mobi GoogleGraph WordPress plugin

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:

Powered by TSBA.mobi GoogleGraph WordPress plugin

We have also added the ability to control the colour gradient:

Powered by TSBA.mobi GoogleGraph WordPress plugin

Bubble Chart

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

Powered by TSBA.mobi GoogleGraph WordPress plugin

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

Powered by TSBA.mobi GoogleGraph WordPress plugin

Line Chart

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

Powered by TSBA.mobi GoogleGraph WordPress plugin

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

Powered by TSBA.mobi GoogleGraph WordPress plugin

Column Chart

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

Powered by TSBA.mobi GoogleGraph WordPress plugin

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:

Powered by TSBA.mobi GoogleGraph WordPress plugin

Columns can be stacked on top of each other, as in the following example:

Powered by TSBA.mobi GoogleGraph WordPress plugin

Bar Chart

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

Powered by TSBA.mobi GoogleGraph WordPress plugin

As with column charts, you can modify the styles:

Powered by TSBA.mobi GoogleGraph WordPress plugin

You can connect the bars with each other:

Powered by TSBA.mobi GoogleGraph WordPress plugin

Pie Chart

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

Powered by TSBA.mobi GoogleGraph WordPress plugin

You can use the “slices” attribute to control the color and offset of each of the slices in the chart.

Powered by TSBA.mobi GoogleGraph WordPress plugin

At the moment we support only the basic pie chart; however, we plan to add the 3D and Donut types soon.

This plug-in is free. Try it now!

Download

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.

Contact us if you want to use the plug-in for commercial purposes

Contact Us