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.

• 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!

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

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


2. type=p3: 3D Pie Chart

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




3. type=bvg: Vertical Bar Chart

{googleChart type=bvg width=250 height=100 
data="10,40,60,90" label="Jan|Feb|Mar|Apr"}


4. type=bvg: Vertical Bar Chart, with grouped bars

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


5. type=bvs: Vertical Bar Chart, with stacked bars

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


6. type=bhg: Horizontal Bar Chart

{googleChart type=bhg width=250 height=128 data="10,40,60,90" label="Jan|Feb|Mar|Apr"}


7. type=bhg: Horizontal Bar Chart, with grouped bars

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


8. type=bhs: Horizonal Bar Chart, with stacked bars

{googleChart type=bhs width=250 height=128 
data="40,10,60,90|20,60,30,10"
label="Jan|Feb|Mar|Apr" color="4D89D9,C6D9FD"}


9. type=lc: Line Chart

{googleChart type=lc width=250 height=100 
data="10,40,60,90" label="Jan|Feb|Mar|Apr"}


10. type=lc: Multiple Lines Chart

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

• To insert a Google Chart, use the following syntax:

{googleChart type=p3 width=250 height=100
data="12,21,31" label="Label1|Label2|Label3"}


• 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.

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.

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"}



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"}



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.

3. 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"}

   

   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"}

   

4. 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.

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%)"}


5. 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.

{googleChart type=bvg width=250 height=100 
data="1,3,8,9" label="Jan|Feb|Mar|Apr"}



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"}


6. Axis Tick Mark. You can add a third parameter to the Range parameter to set the interval of the tick mark. For example:

{googleChart type=bvg width=250 height=100 
data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5"}



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"}


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

{googleChart type=bvg width=250 height=100 
data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5,1"}



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"}


8. Color. Color is specified using the 6-letter string of hexadecimal values in the format RRGGBB. For example:

{googleChart type=bvg width=250 height=100 
data="1,3,8,9" label="Jan|Feb|Mar|Apr" range="0,20,5,1"
color="66ff66"}



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"}



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"}


9. Legend. You can add a legend for charts such as the grouped bar chart with more than one sets of data. For example:

{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"}



10. 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:

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





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}

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"}


• Venn diagrams

{googleChart raw="cht=v&chs=200×100&chd=t:100,80,60,30,30,30,10"}


• 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"}

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.