googleChart plugin
Written by kksou   
Thursday, 10 December 2009

This plugin allows you to easily add pie charts, bar graphs, line charts, etc. right inside your content item or article.

The charts are created using the Google Chart API.

Unique Features

  • You can embed more than one Google charts within an article - each with different chart types. For example, you can have pie chart combined with bar charts, etc.
  • Hide the complexities of the Google Chart APIs with simple and easy-to-remember parameter names.
  • For power users, you can use the raw mode to display charts using the raw Google Chart API - so that you can tap onto 100% of whatever that is provided by Google.
  • Runs on both Joomla 1.0 and native Joomla 1.5!

Chart Types

The Google Chart API provides many different types of charts. However, if you take a look at the API documentation, each chart has its own set of syntax for data, labels, range, grid lines, etc. It gets quite confusing at times, especially with the very cryptic way of naming the parameters.

In this plugin, I've selected some of the most commonly-used functions and give them a simpler and easier-to-remember parameter names.

As this needs to be coded one by one, below are the list of charts that I've implemented to date.

If you want other chart types, you can still access the entire Google Chart APIs using the Raw Mode.

  1. type=p: 2D Pie Chart
  2. {googleChart type=p width=200 height=100 
    data="10,20,30,40" label="Jan|Feb|Mar|Apr"}
    googleChart id=0

  3. type=p3: 3D Pie Chart
  4. {googleChart type=p3 width=250 height=100 
    data="10,20,30,40" label="Jan|Feb|Mar|Apr"}
    googleChart id=1


  5. type=bvg: Vertical Bar Chart
  6. {googleChart type=bvg width=250 height=100 
    data="10,40,60,90" label="Jan|Feb|Mar|Apr"}
    googleChart id=2

  7. type=bvg: Vertical Bar Chart, with grouped bars
  8. {googleChart type=bvg width=250 height=100 
    data="40,10,60,90|20,60,80,100"
    label="Jan|Feb|Mar|Apr" color="4D89D9,C6D9FD"}
    googleChart id=3
  9. type=bvs: Vertical Bar Chart, with stacked bars
  10. {googleChart type=bvs width=250 height=100 
    data="40,10,60,90|20,60,30,10"
    label="Jan|Feb|Mar|Apr" color="4D89D9,C6D9FD"}
    googleChart id=4
  11. type=bhg: Horizontal Bar Chart
  12. {googleChart type=bhg width=250 height=128 data="10,40,60,90" label="Jan|Feb|Mar|Apr"}
    googleChart id=5

  13. type=bhg: Horizontal Bar Chart, with grouped bars
  14. {googleChart type=bhg width=250 height=250 
    data="40,10,60,90|20,60,80,100"
    label="Jan|Feb|Mar|Apr" color="4D89D9,C6D9FD"}
    googleChart id=6
  15. type=bhs: Horizonal Bar Chart, with stacked bars
  16. {googleChart type=bhs width=250 height=128 
    data="40,10,60,90|20,60,30,10"
    label="Jan|Feb|Mar|Apr" color="4D89D9,C6D9FD"}
    googleChart id=7
  17. type=lc: Line Chart
  18. {googleChart type=lc width=250 height=100 
    data="10,40,60,90" label="Jan|Feb|Mar|Apr"}
    googleChart id=8

  19. type=lc: Multiple Lines Chart
  20. {googleChart type=lc width=250 height=100 
    data="10,40,60,90" label="Jan|Feb|Mar|Apr" color="4D89D9,C6D9FD"}
    googleChart id=9

How to use

  • To insert a Google Chart, use the following syntax:
  • {googleChart type=p3 width=250 height=100
    data="12,21,31" label="Label1|Label2|Label3"}
    
    googleChart id=10

  • You can insert more than one graphs within the same article - each of different chart types. For example, you can have pie chart combined with bar charts, etc.
  • There are many parameters you can use for each graph, as shown below.

Parameters

  1. Chart Type. Please refer to Chart Types.
  2. Width and Height. The width and height of the chart are compulsory. The Google Chart API DOES NOT automatically calculates the size of the chart of you. You need to enter the width and height yourself. This means that there will be some trial and error involved for you to get the right size.
  3. For 2D pie charts, you can start with width=2*height. For example,

    {googleChart type=p width=200 height=100
    data="10,20,30,40" label="Jan|Feb|Mar|Apr"}
    googleChart id=0

    For 3D pie charts, you can try width=2.5*height. For example,

    {googleChart type=p3 width=250 height=100
    data="10,20,30,40" label="Jan|Feb|Mar|Apr"}
    googleChart id=1

    The largest possible area for all charts except maps is 300,000 pixels. As the maximum height or width is 1000 pixels, examples of maximum sizes are 1000x300, 300x1000, 600x500, 500x600, 800x375, and 375x800.

    For maps, the maximum size is 440 pixels wide by 220 pixels high.

  4. Data. The data within each set is delimited by comma. For example, if you bar graph contains only one set of data:
    {googleChart type=bvs width=250 height=100
    data="40,10,60,90"
    label="Jan|Feb|Mar|Apr"}
    googleChart id=13

    If you bar graph contains two sets of data, each set of data is delimited by the vertical bar '|':

    {googleChart type=bvg width=250 height=100 
    data="40,10,60,90|20,60,80,100"
    label="Jan|Feb|Mar|Apr" color="4D89D9,C6D9FD"}
    googleChart id=3

  5. Labels. Only the first three parameters, i.e. chart type, width and height, and data are compulsory. The rest of the parameters, including labels, are optional.
  6. For pie charts, bar graphs and line charts, labels are specified simply by delimiting each label with the vertical bar (|).

    Note that for pie charts, the Google Chart API does not provide automatic display of data values in percentages. If you want to display the percentages, you have to manual input them in the labels as follows:

    {googleChart type=p3 width=360 height=100
    data="12,21,31"
    label="Label1 (19%)|Label2 (33%)|Label3 (48%)"}
    
    googleChart id=15

  7. Range of the x-axis and y-axis. There are many things in Google Charts that are not "automated", and this is one of them. If you do not specify any range, in a bar chart, Google will by default display value from 0 to 100. For example, the maximum y-value of the bar chart below is 9, but Google plots the bar graph with a maximum y-value of 100.
  8. {googleChart type=bvg width=250 height=100 
    data="1,3,8,9" label="Jan|Feb|Mar|Apr"}
    googleChart id=16

    To set the range of the y-value, use the following, where 0 is the minimum y-value, and 10 is the maximum y-value:

    {googleChart type=bvg width=250 height=100 
    data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,10"}
    googleChart id=17
  9. Axis Tick Mark. You can add a third parameter to the Range parameter to set the interval of the tick mark. For example:
  10. {googleChart type=bvg width=250 height=100 
    data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5"}
    googleChart id=18

    It's similar for horizontal pie chart:

    {googleChart type=bhg width=250 height=150
    data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5"}
    googleChart id=19
  11. Grid Lines. If you have specified the tick mark for the axis, you can also set the fourth parameter as 1 to display the grid line. For example:
  12. {googleChart type=bvg width=250 height=100 
    data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5,1"}
    googleChart id=20

    It's similar for horizontal pie chart:

    {googleChart type=bhg width=250 height=150
    data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5,1"}
    googleChart id=21
  13. Color. Color is specified using the 6-letter string of hexadecimal values in the format RRGGBB. For example:
  14. {googleChart type=bvg width=250 height=100 
    data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5,1"
    color="66ff66"}
    googleChart id=22

    For charts such as the grouped bar chart, the colors for each chart are delimited by commas, as shown below:

    {googleChart type=bvg width=250 height=100 
    data="40,30,60,90|20,21,42,78" label="Jan|Feb|Mar|Apr" 
    range="0,100,20,1" color="66ff66,ff6699"}
    googleChart id=23

    For pie charts, if you specify 2 or more colors, Google will span colors across these colors as shown below:

    {googleChart type=p3 width=250 height=100 
    data="72,48,32,10,6,3" label="Jan|Feb|Mar|Apr|May|Jun"
    color="FF3366,33CCFF,3366FF"}
    googleChart id=24

  15. Legend. You can add a legend for charts such as the grouped bar chart with more than one sets of data. For example:
  16. {googleChart type=bvg width=250 height=100 
    data="40,30,60,90|20,21,42,78" label="2006|2007|2008|2009" 
    range="0,100,20,1" color="66ff66,ff6699"
    legend="Sales|Profit"}
    googleChart id=25
    googleChart id=26
  17. Floating the Chart. You can float the chart to the left or right as shown here. The first one floats to the right. Tag used:
  18. {googleChart float=right type=bvs width=136 height=100
    data="40,10,60,90"
    label="Jan|Feb|Mar|Apr"}


    googleChart id=28

    And this one floats to the left. Tag used:

    {googleChart float=left type=bvs width=136 height=100
    data="40,10,60,90"
    label="Jan|Feb|Mar|Apr"}


    Important: To break away from the float, use the following:

    {googleChart br=1}

Raw Mode

For power users, you can enter Google Chart APIs in raw mode so that you can tap onto 100% of the Google Chart APIs as provided Google. For example:

  • Concentric pie charts
  • {googleChart raw="cht=pc&chd=s:Helo,Wrld&chs=200x100"}
    googleChart id=30

  • Venn diagrams
  • {googleChart raw="cht=v&chs=200100&chd=t:100,80,60,30,30,30,10"}
    googleChart id=31

  • Multiple markers
  • {googleChart raw="cht=lc&chd=s:2gounjqLaCf&chco=008000
    &chls=2.0,4.0,1.0&chs=250x150&chxt=x&chxl=0:||c|d|a|o|s|v|V|x||&
    chm=a,990066,0,3.0,9.0|c,FF0000,0,1.0,20.0|d,80C65A,0,2.0,20.0|
    o,FF9900,0,4.0,12.0|s,3399CC,0,5.0,11.0|v,BBCCED,0,6.0,1.0|
    V,3399CC,0,7.0,1.0|x,FFCC33,0,8.0,20.0|h,000000,0,0.30,0.5
    &chma=0,0,30,0"}
    googleChart id=32

Download

Remove the "Powered by" links

If you find the plugin useful and would like to use the plugin without the "Powered-by" links, you may do so by purchasing a "Powered-by" removal license for only USD $10 per site.

Secured payment is processed by 2checkout.com. All major credit cards are accepted, including Visa, Mastercard and American Express, etc. You can also pay by PayPal. Once the transaction is completed, you will be given a link to download the registered version with the "Powered by" links removed.


 

Comments  

 
# Jeremiah 2012-10-04 21:15
I find this to be a very useful module/plugin- but it does not work for joomla! 2.5--- I would like to pay for the developer to update this. Developer please contact me.
 
 
# kksou 2012-10-04 21:33
Hi Jeremiah,

Glad you find it useful.

Will try to work on it tonight to see I can come out with the version for Joomla 2.5.

Will let you know once it's done.

Regards,
/kksou
 
 
# jonathan c 2013-01-15 09:21
If you have a Joomla 3.0 version of both the module & plugin as well as an easier way to pull data from a db within a Joomla database table (or another database table would even be better) I would gladly purchase these from you for a nice fee.
 
 
# DM270 2013-02-13 09:31
Alguien sabe si funciona en joomla 2.5?
 
 
# Daydah 2013-11-27 06:07
Please the link to download is not working! I need this google chart plugin asap. Please can you provide a link for download? Thank you very very much!
 
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2015. kksou.com. All Rights Reserved